Widget Library

ClicRDV provides a Javascript library, which ease the creation of links, buttons, popins and iframes for the appointment module.

1. Loading the library

To use the library, you will need to include the script from ClicRDV's servers :

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

Note Note that there is no "http" nor "https" at the beginning of the URL. As a result, the script will be loaded with the same protocol as the page you're on.

2. Adding a widget to the page

Use the following method to create a widget :

TIMENDO.renderWidget( widgetType, groupUrlname, widgetOptions);
Parameter Type Description
widgetType string 'link' or 'iframe'
groupUrlname string your URL identifier
widgetOptions object see options below

widgetOptions is an object which can have the following properties :

Parameter Type Description
params object add any option that can be added to the appointment module URL
autoresize boolean if true, the iframe will automatically be resized.
target string "popin" to open the appointment module in a popin within the page, or "_new" to open in a new browser tab (default)
style string Style of the generated button : "clicrdv-button-style1", "clicrdv-button-style2", ... "clicrdv-button-style6".
Those styles can be previewed in the administration interface.
size [width, height] Size for the generated iframe or popin.
button_text_color string Color of the button text, ex : '#000000'
button_bg_color string Color of the button background, ex : '#FFFFFF'
lang string Locale that will be use to open iframe, available values : 'fr', 'en', 'es', 'de', 'nl'
cookiesFix boolean Solution to create a cookie from the iframe for non permissive browsers (Safari, ...).
Instanciate a session for clicrdv then return to the url of widget intégration.
base_url string Base URL of the widget

Note For the utilisation of widget in sandbox environment, you have to change "base_url" and set it to 'https://sandbox.clicrdv.com'


Note If you cannot insert the script tags in the place where the widget should be inserted (because it does not exist in the DOM for example), you can create the widgets later, by instantiating them directly and rendering them in a specific DOM element : 

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

or for an iframe :

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

Examples

Simple :

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

Advanced :

<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 TIMENDO.widgets.Iframe ('rdv-clicrdv', {
      size: [650, 500],
      params: {
        interventions_ids: [1234, 4567],
        calendar_id: 8,
        nologo: true
      }
    });
    myWidget.render('clicrdv-container');
<script>

Live demos