Librairie de widgets

ClicRDV fournit une librairie vous permettant de créer divers types de widgets (liens, boutons, popin, iframes, etc) pour le module de prise de RDV.

1. Chargement de la librairie

Pour utiliser la libraiire, vous devrez inclure le script de la façon suivante :

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

Note Remarquez qu'il n'y a pas de "http" ou "https" au début de l'URL source du script. Cela signifie que le script sera chargé avec le même protocole que la page sur laquelle il est inclus.

2. Ajouter un widget sur une page de votre site

Suivez la méthode ci-dessous pour créer un widget :

CLICRDV.renderWidget( widgetType, groupUrlname, widgetOptions);
Paramètre Type Description
widgetType string 'link' (lien) ou 'iframe'
groupUrlname string l'identifiant URL de votre groupe ClicRDV (la partie "groupUrlname" de votre page de prise de rendez-vous au format "https://www.clicrdv.com/groupUrlname")
widgetOptions object voir options ci-dessous

widgetOptions est un objet qui peut contenir les propriétés suivantes :

Paramètre Type Description
params object ajoutez n'importe quelle option du module de prise de RDV
autoresize boolean si true, l'iframe sera automatiquement redimensionnée.
target string "popin" pour ouvrir le module de prise de RDV sous forme de popin "au dessus" de la page, ou "_new" pour ouvrir le module dans un nouvel onglet du navigateur (défaut)
style string style du bouton généré : "clicrdv-button-style1", "clicrdv-button-style2", ... "clicrdv-button-style6".
Ceux-ci sont prévisualisables depuis le générateur de bouton dans l'administration de votre compte.
size [width, height] Dimensions de l'iframe ou du popin généré.
button_text_color string Couleur du texte du bouton , ex : '#000000'
button_bg_color string Couleur de fond du bouton, ex : '#FFFFFF'
lang string Locale utilisée pour ouvrir l'iframe, valeurs disponibles : 'fr', 'en', 'es', 'de', 'nl'
cookiesFix boolean Solution pour créer un cookie depuis l'iframe pour les navigateurs non permissif (Safari, ...).
Instancie une session sur clicrdv puis retourne sur l'url d'intégration du widget.
base_url string Adresse de base du widget

Note Pour une utilisation du widget sur l'environnement Sandbox, il faudra changer le paramètre "base_url" et mettre 'https://sandbox.clicrdv.com'


Note Si vous n'avez pas la possibilité d'insérer la balise <script> à l'endroit du DOM où le widget doit être inséré, vous pouvez créer le widget plus tard en l'instanciant directement : 

var myWidget = new CLICRDV.widgets.Link(groupUrlname, widgetOptions);
myWidget.render('my_widget_container_id');

ou bien pour une iframe :

var myWidget = new CLICRDV.widgets.Iframe(groupUrlname, widgetOptions);
myWidget.render('my_widget_container_id');

Exemples

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>

Démos