Responsive intégration

Viewport

First of all, the parent website must be responsive, at least containing the meta tag "viewport"

    <meta name="viewport" content="width=device-width">

Mobile and normal Mode

The interface of appointement is "adaptative". This means there are different interfaces depending on the device used to render appointement page.

The interface will be different if you look at smartphone or computer.

A developer can test this behavior in Chrome (Developer tools) by changing the user-agent
Do not forget to refresh the page after doing changes.

Popin mode

Warning: the popin mode is forced when you navigate through the widget

Here 2 examples

    https://www.clicrdv.com/:urlname
    https://www.clicrdv.com/:urlname?popin=1

Note : Replace :urlname by the corresponding URL for your appointement page.

    https://www.clicrdv.com/mybeaute
    https://www.clicrdv.com/mybeaute?popin=1

Dimensions in percentage

In the iframe and widget integration, we present a way for assigning dimensions.

For responsive integration, we advice to have a container that you manage natively in responsive mode and to pass the dimensions in percentage to widget.

For example

size: ['100%', 500],

This action allow appointment module to adapt with a responsive container.

Example of full code

<div id="clicrdv-container" content="width=device-width">

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

<script>
     var myWidget = new CLICRDV.widgets.Iframe ('mybeaute', {
          size: ['100%', 500],
          params: {
            // nologo  : true
          }
        });
        myWidget.render('clicrdv-container');
</script>