Intégrez la prise de rendez-vous à votre site web

Créé par Julien Pauthier, Modifié le  Sun, 26 Feb 2023 sur 09:47 PM par  Julien Pauthier

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

TABLE OF CONTENTS


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>


Note : Vous pouvez également mettre en place un bouton flottant, que nous proposons à cette page en exemple.


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.



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 : découvrez leur liste ici.

Cet article a-t-il été utile ?

C'est super !

Merci pour votre commentaire

Désolé ! Nous n'avons pas pu vous être utile

Merci pour votre commentaire

Dites-nous comment nous pouvons améliorer cet article !

Sélectionner au moins l'une des raisons

Commentaires envoyés

Nous apprécions vos efforts et nous allons corriger l'article