Intégration iframe du module de RDV

Introduction

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. Par exemple :

<iframe src="https://www.clicrdv.com/:votre-urlname?popin=1">
   <p>Votre navigateur ne supporte pas les iframes. 
            Pour prendre RDV, suivez le lien suivant: 
     <a href="https://www.clicrdv.com/:votre-urlname">Prendre RDV</a>
   </p>
</iframe>

(Remplacez tous les :votre-urlname par l'URL correspondante à votre page de prise de RDV.)

Il est fortement recommandé de mettre une hauteur et une largeur par défaut à l'iframe

Pour l'instant, merci de prévoir une largeur minimum de 470px.

<iframe src="https://www.clicrdv.com/:votre-urlname?popin=1" 
           style="width: 600px; height: 500px; border: 0">
    <p>Votre navigateur ne supporte pas les iframes. 
            Pour prendre RDV, suivez le lien suivant: 
     <a href="https://www.clicrdv.com/:votre-urlname">Prendre RDV</a>
   </p>
</iframe>

Le paramètre popin=1 permet d'appliquer une mise en page adaptée aux espaces réduits tels que des iframes. D'autres paramètres d'URL sont documentés sur la page du module de prise de rendez-vous.

Utilisation avec un CMS

Le code ci-dessus peut-être intégré dans tous les CMS classiques (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.

Utilisation avancée

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) {
    // Vérifier par sécurité l'origine des messages
    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;
        }
    }
});

Transmission de paramètres

Afin de permettre une intégration totale de votre site internet dans le processus de prise de rendez-vous, nous avons la possibilité de remplacer l'adresse de clicrdv.com par l'adresse de votre site dans les emails que nous envoyons à vos clients. Cependant ces liens peuvent contenir des paramètres relatifs aux mots de passe oubliés, à la 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. Ils seront encodés dans le paramètre clicrdv_params. Par exemple : http://votre-adresse-internet.com/?clicrdv_params=[paramètres à transmettre à l'iframe].

Le code suivant permet créer une iframe ClicRDV :

<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 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.

Librairie de widgets

ClicRDV développe une librairie vous permettant de créer divers types de widgets (liens, boutons, popin, iframes, etc) tout en implémentant les fonctionnalités décrites ci-dessus. Un générateur de code reposant sur cette librairie est disponible dans la section "Internet" > "Module ClicRDV" de l'administration de votre compte. La documentation suivante vous permettra d'utiliser les options avancées de cette librairie.

Chargement

Il vous suffit d'inclure le script situé à l'adresse http://clicrdv-assets.s3.amazonaws.com/lib/clicrdv-widgets-v1/clicrdv-widgets-min.js pour utiliser cette librairie.

<script src="//clicrdv-assets.s3.amazonaws.com/lib/clicrdv-widgets-v1/clicrdv-widgets-min.js"></script>

Création d'un widget

Deux méthodes permettent de créer un widget ClicRDV sur votre page :

• En utilisant la méthode 'renderWidget' et en spécifiant le type de widget à créer ('link' or 'iframe'). Le widget sera alors ajouté immédiatement dans le document, à la suite de la balise script :

  CLICRDV.renderWidget([widget type], [group urlname], [widget options]);
  

• En créant des instances de widget (CLICRDV.widgets.Link or CLICRDV.widgets.Iframe) :

  var myWidget = new CLICRDV.widgets.Link([group urlname], [widget options]);
  myWidget.render('my_widget_container_id');
  

Dans les exemples précédents, [widget options] était un objet pouvant contenir les clefs suivantes :

• params contient sous la forme d'un objet javascript les paramètres d'URL à ajouter au module ClicRDV. L'ensemble des paramètres sont documentés à cette adresse : http://www.clicrdv.com/api-module-prise-rdv.
• autoresize est un booléen, si sa valeur est true et si le widget est une iframe, celle-ci sera automatiquement redimensionnée à la taille de son contenu afin de ne pas afficher les barres de défilement du navigateur sur le module ClicRDV. Sa valeur par défaut est true pour le iframes, et false dans les autres cas.
• target est uniquement utilisé par les widgets de type "link" pour spécifier dans quelle fenêtre, frame, ou iframe sera chargée le module ClicRDV lors d'un clic sur un lien ou bouton. Par défaut ClicRDV sera ouvert dans une nouvelle fenêtre (target:"_new"). Pour ouvrir le module dans une fenêtre modale (popin) utiliser la valeur (target: "popin").
• style Style du bouton généré. La librairie intègre 6 styles par défaut, de "clicrdv-button-style1" à "clicrdv-button-style6". Ceux-ci sont prévisualisables depuis le générateur de bouton dans l'administration de votre compte.
• size Tableau [largeur, hauteur] contenant la taille de l'iframe générée (Uniquement pour les iframes/fenêtres popin).

Exemples d'utilisation

Simple :

<script src="//clicrdv-assets.s3.amazonaws.com/lib/clicrdv-widgets-v1/clicrdv-widgets-min.js"></script>
<script>CLICRDV.renderWidget('link', 'rdv-clicrdv');<script>

Avancé :

<div id="clicrdv-container"></div>
...
<script src="//clicrdv-assets.s3.amazonaws.com/lib/clicrdv-widgets-v1/clicrdv-widgets-min.js"></script>
<script>
    var myWidget = new CLICRDV.widgets.Iframe ('rdv-clicrdv', {
      size: [650, 500],
      params: {
        interventions_ids: [1234, 4567],
        calendar_id: 8,
        nologo: true
      }
    });
    myWidget.render('clicrdv-container');
<script>