Le bouton de prise de rendez-vous

TABLE OF CONTENTS

• Le bouton de prise de rendez-vous
  • Trouver son URL de bouton de prise de rendez-vous
  • La personnalisation du bouton
  • Pré-remplissage des champs
  • Champs supplémentaires

Trouver son URL de bouton de prise de rendez-vous

Avec Agendize vous avez la possibilité de déployer votre produit via un bouton de prise de rendez-vous. L’URL de ce bouton est accessible depuis l’onglet Installation > Tous les boutons. Vous choisissez votre bouton et cliquez sur Installer :

Ensuite, nous nous intéresserons à l’URL Site Web (HTML) : 

Vous pouvez tester ce bouton sur un site de test de code comme codepen.io : 

La personnalisation du bouton

Dans un premier temps, au sein de la balise <img />, grâce à l’attribut src vous pouvez changer l’image de votre bouton pour l’adapter au thème de votre organisation. Vous avez également l’attribut onclick dans lequel se trouve une fonction openScheduling() qui contient tout simplement l’ID de votre succursale crypté sous forme de chaîne de caractères. Cela pourrait tout aussi bien fonctionner si vous mettez l’ID ou l’ID externe de votre succursale.

Exemple : onclick="openScheduling('agendize')"

Ensuite, intéressons-nous au contenu javascript de la balise script et plus précisément à l’objet scheduling. Ici vous pouvez définir les paramètres qui feront la construction de l’URL de votre widget.

Nous pouvons déjà repérer des paramètres de base par défaut. Parmis les plus importants à retenir nous avons : 

server : est l’URI de base de votre widget

button : est l’ID de votre bouton (voir l’onglet Rapports)

lang : est la langue d’affichage du widget (par défaut la langue de l’utilisateur si ce paramètre n’est pas renseigné)

 A cela, vous pouvez rajouter les paramètres suivants : 

service : ID du service ou ID externe du service

staff : ID de l’équipier ou ID externe de l’équipier

source : source de la prise de rendez-vous

date : forcer l’affichage du widget à partir d’une date spécifique (yyyy-mm-dd)

Vous pourrez donc faire la combinaison suivante : 

<img id="scheduling-8U5UaHGPgEZXwJjZcXUcFSU5fR03rfQHEg3zsdgVM40=" src="//france.agendize.com/web/img/scheduling_fr.gif" onclick="openScheduling('agendize')" style="cursor : pointer; border: 0" />
<script type="text/javascript">
  var scheduling = {
    server: 'france.agendize.com',
    version: 'v3',
    button: '1415848988431281',
    lang: 'fr',
    service: '1016582233232322',
    staff: '2016503598427407',
    date: '2023-02-27'
  };
</script>
<script type="text/javascript" src="https://france.agendize.com/web/scheduling.js"></script>

Ainsi, au même titre que la construction d’URL classique vous pouvez configurer votre votre bouton à votre convenance.

En savoir plus : Personnalisez votre bouton de prise de rendez-vous

Pré-remplissage des champs

En imaginant que vous voulez envoyer ce bouton de prise de rendez-vous à un client spécifique, vous avez également la possibilité de pré-remplir les champs du widget afin de faciliter le parcours de celui-ci.

Tout d’abord, vous devrez bien repérer les champs de votre widget qui devront être pré-emplis dans l'onglet Console puis Paramètres > Widget > Champs du widget. Pour l’exemple, nous prendrons le nom, le prénom, l’email et le numéro de téléphone.

Pour insérer ses champs dans l'URL il suffit d'ajouter les paramètres suivants : 

fisrtname=prenom-du-client

lastname=nom-du-client

email=email-du-client

phone=numero-de-telephone

Si nous reprenons notre dernière code nous avons donc : 

<img id="scheduling-8U5UaHGPgEZXwJjZcXUcFSU5fR03rfQHEg3zsdgVM40=" src="//france.agendize.com/web/img/scheduling_fr.gif" onclick="openScheduling('agendize')" style="cursor : pointer; border: 0" />
<script type="text/javascript">
  var scheduling = {
    server: 'france.agendize.com',
    version: 'v3',
    button: '1415848988431281',
    lang: 'fr',
    service: '1016582233232322',
    staff: '2016503598427407',
    date: '2023-02-27',
    firstname: 'James',
    lastname: 'Tibérius Kirk',
    email: '[email protected]',
    phone: '0102030405'
  };
</script>
<script type="text/javascript" src="https://france.agendize.com/web/scheduling.js"></script>

À la fin du parcours de votre client, celui-ci n’aura plus qu'à valider ou passer directement à la suite du formulaire.

Champs supplémentaires

Mais comment pré-remplir des champs personnalisés ?

Tout d'abord, vous devez vous rendre dans la modification du champ en question. Par exemple, nous allons modifier le champ Job / Fonction de notre widget. Puis, nous lui attribuons une clé externe nommé tout simplement, job.

Cette clé externe nous permet de récupérer le champ dans notre code sous forme de clé à laquelle nous allons donnée une valeur. Voyez dans le code ci-dessous l'attribut job ajouté en dernier :

<img id="scheduling-8U5UaHGPgEZXwJjZcXUcFSU5fR03rfQHEg3zsdgVM40=" src="//france.agendize.com/web/img/scheduling_fr.gif" onclick="openScheduling('agendize')" style="cursor : pointer; border: 0" />
<script type="text/javascript">
  var scheduling = {
    server: 'france.agendize.com',
    version: 'v3',
    button: '1415848988431281',
    lang: 'fr',
    service: '1016582233232322',
    staff: '2016503598427407',
    date: '2023-02-27',
    firstname: 'James',
    lastname: 'Tibérius Kirk',
    email: '[email protected]',
    phone: '0102030405',
    job: 'Support'
  };
</script>
<script type="text/javascript" src="https://france.agendize.com/web/scheduling.js"></script>

Notre champ Job / Fonction est désormais pré-rempli. Il ne vous reste plus qu'a ajouter les autres champs de la même manière.

Vous avez désormais tous les outils nécessaires pour personnaliser le parcours de vos utilisateurs depuis le bouton de prise de rendez-vous jusqu'au rendez-vous lui-même.