Dans la balise <head> du site, mettre juste une fois le code suivant :

<script src="https://app.realvuu.com/integration/plugins/common.js"></script>

<link href="https://app.realvuu.com/integration/plugins/common.css?client=[CLIENT_SLUG]&project=[PROJECT_SLUG]" rel="stylesheet" />

N.B. Si un site web comporte plusieurs projets, l'attribut "project" peut être omis dans l'URL. L'effet est que certaines couleurs (icône de chargement et texte avant l'ouverture du sélecteur) ne seront pas spécifiques au projet mais au client, donc si le branding du client est "orange" mais que le projet est "jaune", le branding utilisé sera celui du client (orange).

À l'emplacement désiré dans la balise <body>, placer le code suivant (il est important de remplacer les éléments entre crochets :

<div id="realvuu-plugin-site-web"></div>

<script type="text/javascript"> realVuu.plugins.planSelector({ id: "[GUID, ID du sélecteur]", client: "[STRING, Slug du client]", project: "[STRING, Slug du projet]", container: "#realvuu-plugin-site-web", lang: "en", /* Optionel */ openUnitInCrm: false /* Optionel */ }); </script>

Les informations doivent être fournies par une personne de RealVuu, elles ne peuvent pas être devinées.

Paramètre	Valeurs possibles
id	`GUID`, ID du sélecteur
client	`STRING`, Slug du client
project	`STRING`, Slug du projet
container	`STRING`, sélecteur jQuery vers le DIV qui recevra le iframe du sélecteur de plans
lang	`FR` ou `EN`, soit la langue courante parmis les 2 supportées.
openUnitInCrm	`true` si l'on désire qu'au clic d'une unité on ouvre la page qui correspond à l'enregistrement dans le CRM ou `false` (défaut) si l'on désire afficher l'information de l'unité comme d'habitude à même le sélecteur de plans.

Les images ci-contre permettent de comprendre comment intégrer ces éléments aux bons endroits.

Introduction