Iframe integration of the Appointment module

The iframe integration allows a very simple integration of the appointment module into your website.

HTML code

To create an iframe for the appointment module, we use the same URL as the appointment module, and add the popin=1 parameter.

Important It is highly recommended to set the height and width of the iframe. The iframe should be at least 470px wide :

<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 Replace :urlname by your URL identifier

Integration within a CMS

This code can be added to all CMS (Joomla, Drupal, Wordpress, ...), by editing your pages in "HTML mode".

Important To insert HTML code in your articles, you have to be in "HTML mode", otherwise, the code appears in your article. Most editors display a button to switch to this mode.

---

Automatic resizing

The appointment module uses the HTML5 postMessage API to notify the parent page when the height of the module changes. The parent page can then resize the iframe height to make the integration seamless.

Internet Explorer 6 and 7 don't provide this API, so the resizing is not available for these browsers.

Messages are sent in JSON : {"height":510}

The following code decodes the message and resize the iframe :

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";
        }
    }
});

---

Parameters transmission

The URLs sent through email by the appointment module and appointment reminders can be customized to point towards your website.

Those URLs may contain parameters to complete some transactions (password recoveries, or email validation, ...). Therefore, those parameters MUST be transmitted to the iframe hosted on the target page.

The emails will add a clicrdv_params parameter to your URL, which must be transmitted to the iframe URL :

The following code will parse these parameter and dynamically create an 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>

Warning Once your URL is added to the emails, if you do not pass the parameters, it might block the automatic login from email, password recovery, or account confirmations.

---