Intégration responsive

Viewport

Avant tout, le site parent doit être responsive, a minima avec la balise meta "viewport"

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

Mode mobile et mode normal

L'interface de prise de RDV est "adapative". C'est à dire qu'il y a une interface différente en fonction de l'appareil qui sert à visualiser la page de prise de RDV.

L'interface sera différente si on la regarde sur un smartphone ou sur un ordinateur.

Un développeur pourra tester ce comportement dans Chrome (part la console de développement) en changeant le user-agent. Ne pas oublier de rafraichir la page après le changement.

Mode popin

Attention, le mode popin est forcé quand on passe par le widget

Voilà 2 exemples

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

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

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

Dimensions en pourcentage

Dans l'intégration iframe et widget, nous présentons les moyens d'assigner des dimensions.

Dans une optique d'intégration responsive, nous conseillons d'avoir un conteneur que vous gérez nativement en responsive et de passer des dimensions en pourcentage dans le widget

Par exemple

size: ['100%', 500],

Cela permettra au module de prise de RDV de s'adapter au conteneur responsive.

Exemple de code complet

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