Intégration iframe du module de RDV

L'iframe permet d'intégrer le module de prise de RDV ClicRDV au sein de votre propre site. Cette intégration est très simple à réaliser.

Code HTML d'intégration

Il vous suffit de créer une iframe vers l'URL habituelle du module de prise de RDV à laquelle vous aurez ajouté le paramètre popin=1.

Important Il est fortement recommandé de mettre une hauteur et une largeur par défaut à l'iframe. L'iframe doit avoir une largeur d'au moins 470px :

<iframe src="https://www.clicrdv.com/:urlname?popin=1"
           style="width: 600px; height: 500px; border: 0">
   <p>Your browser doesn't support iframes. 
            To book an appointment, please follow this link :
     <a href="https://www.clicrdv.com/:urlname">https://www.clicrdv.com/:urlname</a>
   </p>
</iframe>

Note Remplacez :urlname par l'URL correspondant à votre page de prise de RDV.

Intégration avec un CMS

Le code ci-dessus peut être intégré dans tous les CMS (Joomla, Drupal, Wordpress, ...), en éditant les pages en "HTML libre".

Important Pour insérer du code HTML dans vos articles, il faut passer en mode HTML. Dans la barre de bouton de l'éditeur il devrait y avoir un bouton HTML. Cliquez dessus, puis collez le code.

---

Redimensionnement automatique

ClicRDV utilise l'API postMessage d'HTML5 afin de notifier à la page hébergeant l'iframe les changement de hauteur du module de prise de RDV, rendant l'utilisation d'une iframe totalement transparente.

Internet Explorer 6 et 7 ne supportant pas cette fonctionnalité, il n'est pour le moment pas possible de redimensionner l'iframe pour ces deux navigateurs.

Les messages sont envoyés au format JSON sous la forme {"height": 510}.

Le code suivant permet de les traiter :

var addListenerMethod = (window.addEventListener ? 'addEventListener' : 'attachEvent'),
    eventName         = (window.addEventListener ? 'message' : 'onmessage');

window[addListenerMethod](eventName, function (e) {
    // Check message origin for security
    if (/https?:\/\/([a-z0-9\-]+\.)?clicrdv\.com/.test(e.origin)) {
        var data = JSON.parse(e.data);
        if (data.hasOwnProperty('height')) {
            document.getElementById('clicrdv-iframe').style.height = data.height + "px";
        }
    }
});

---

Transmission de paramètres

Les liens envoyés par e-mail via le module de prise de RDV ou les rappels peuvent être paramétrés pour rediriger vers votre site internet.

Cependant ces liens peuvent contenir des paramètres relatifs à la validation de certaines transactions (mots de passe oubliés, validation d'un RDV ou de l'adresse email, ...).

Pour assurer le fonctionnement de ces fonctionnalités il vous est nécessaire de transmettre ces paramètres d'URL à l'iframe.

Les e-mails envoyées ajouteront automatiquement un paramères clicrdv_params à l'url de votre site internet, paramètre qui DOIT être transmis à l'iframe :

Le code ci-dessous récupère ces paramètres et créer dynamiquement l'iframe :

<div id="clicrdv-container"></div>

<script>
    var iframeUrl = 'https://www.clicrdv.com/rdv-clicrdv?popin=1',
        params    = /[\\?&]clicrdv_params=([^&#]*)/.exec(window.location.href),
        iframe    = document.createElement('iframe');

    iframe.id = 'clicrdv-iframe';
    iframe.src = iframeUrl + (params !== null ? '&'+decodeURIComponent(params[1]) : '');
    iframe.width = 650;
    iframe.height = 450;
    iframe.frameBorder = 0;
    document.getElementById('clicrdv-container').appendChild(iframe);
</script>

Attention Une fois l'URL de votre site intégré à nos emails, l'abscence d'iframe ou la non transmission de ces paramètres pourra empêcher vos nouveaux clients de prendre rendez-vous, de se logguer, de récupérer un mot de passe oublié, etc.

---