Création d'un bouton et intégration du module de prise de rendez-vous en ligne

Pour créer un nouveau bouton, dirigez-vous dans la section Installation. Dans la partie Installez la prise de rendez-vous en ligne, cliquez sur Créer un nouveau bouton.



Nommez le bouton et sélectionner la succursale avec laquelle associer ce nouveau bouton. Cliquez ensuite sur Ajouter.



Une fois ajouté, le bouton présente un bouton Publier :



Apparaît la liste des intégrations proposées pour votre présence web :



Pop-in / Site Web (HTML)

Ce mode d’intégration permet à vos visiteurs de cliquer sur un lien ou sur un bouton afin que le widget de prise de rendez-vous s’affiche directement dans la page de votre site web.

Note : L’affichage s’adapte à un écran de téléphone mobile (responsive) via ce mode d’intégration.


Voici le code d’intégration à employer :


<img id="scheduling-companyId" src="https://app.agendize.com/web/img/scheduling_fr.gif" onclick="openScheduling(companyId)" style="cursor : pointer; border: 0"/>
<script type="text/javascript">
        var scheduling = {server: 'app.agendize.com', button: 'XXXX', lang: 'fr'};
</script>
<script type="text/javascript" src="https://app.agendize.com/web/scheduling.js"></script>



Le tag <img/> peut être remplacé par un tag <a/>, ou par tout autre élément HTML souhaité. Son identifiant (ie: scheduling-companyId) ainsi que le paramètre d’appel de la fonction JavaScript doivent faire référence à la succursale à laquelle cette intégration est liée.


Exemples d’intégrations 


Lien hypertexte de prise de rendez-vous :


<a href=”#” style=”insert the style you want” onclick="openScheduling(companyId)" style="cursor: pointer;" id="scheduling-companyId">
        Book your appointment
</a>
<script type="text/javascript">
        var scheduling = {server: 'app.agendize.com', lang: 'en'};
</script>
<script type="text/javascript" src="https://app.agendize.com/web/scheduling.js"></script>


Élément DIV (image...) avec action d'ouverture de la prise de rendez-vous via JavaScript :


<div class=”the class you want” onclick="openScheduling(companyId)" style="cursor: pointer;" id="scheduling-companyId">
Book your appointment
</div>
<script type="text/javascript">
        var scheduling = {server: 'app.agendize.com', lang: 'en'};
</script>
<script type="text/javascript" src="https://app.agendize.com/web/scheduling.js"></script>


Illustration du rendu


Avant d’actionner le bouton...


Après avoir actionné le bouton...

URL de mini-site

Agendize génère automatiquement un mini-site pour chaque succursale créée : https://app.agendize.com/book/companyId?button=XXXX pour la page destinée à un affichage sur ordinateur. Cette URL de minisite peut être utile si vous choisissez d’intégrer un lien “Prenez rendez-vous” dans un email, ou dans tout autre contexte ou le recours à Javascript n’est pas possible.


Note : L’affichage s’adapte à un écran de téléphone mobile (responsive) via ce mode d’intégration.



iframe

Vous pouvez intégrer le widget dans une iframe en ayant recours au code HTML suivant :


<iframe 
        src="https://app.agendize.com/book/iframe/companyId?button=XXXX" 
        frameborder="0" 
        style="width: 750px; height: 510px; border: 0" 
        marginwidth="0" 
        scrolling="auto">
</iframe>


Le widget s’affiche de façon responsive en s’adaptant aux dimensions que vous spécifiez au niveau de l’iframe.


Voici un exemple de rendu :

QR Code

Une intégration par QR Code est proposée pour chaque succursale, et se présente sous la forme d’une image à imprimer :



Google My Business

Veuillez vous référer notre article spécifique au sujet de Google My Business.


Paramètres d’intégration

Les intégrations pop-in, iframe et URL de mini-site permettent en outre de recourir à des paramètres (GET ou JavaScript) pour déterminer :

  • lang : la langue du widget peut être défini si vous souhaitez le proposer dans une langue spécifique : allemand (de), anglais (en), espagnol (es), français (fr), italien (it), japonais (jp), néerlandais (nl), portugais (pt)
  • service : l’identifiant du service à sélectionner pour la prise de rendez-vous
  • resource : l’identifiant de la ressource à sélectionner pour la réservation
  • resourceGroups : l’identifiant du groupe de ressources à sélectionner pour la réservation
  • staff : l’identifiant de l’équipier à pré-sélectionner pour cette prise de rendez-vous
  • gid : l’éventuel code de suivi GoogleAnalytics
  • cs : désactivation du sélecteur de succursale : cs=true
  • mode : service : choix du service uniquement
  • service-staff : choix du service puis de l’équipier
  • staff-service : choix de l’équipier puis du service
  • identifiant de champ de formulaire : la valeur d’un champ (visible ou caché) à pré-renseigner (voir l'article Pré-saisir les données de contact dans le module de prise de rendez-vous)
    • Exemple : référence d’article consulté au moment de la prise de rendez-vous
  • source: personnalisation de la source de la prise de rendez-vous (canal d’acquisition), par exemple :
    • source=fb pour signaler les prises de rendez-vous depuis Facebook
    • source=site pour indiquer les prises de rendez-vous depuis votre site web
    • ces indications seront visibles dans les rapports Rendez-vous par source