Rdv en ligne moderne : personnalisation - Shortcuts

Rdv en ligne moderne : personnalisation

Intégrer la réservation en ligne sur votre site (popup ou panneau latéral)

Notre guide pour vous aider à intégrer le module de réservation en ligne sur votre site.

Réglages entreprise > Réglages e-RDV …

Pour avoir accès au nouveau e-RDV, la version du e-RDV cochée doit être « Moderne ».

Pour modifier le graphisme de votre widget, cliquez sur « paramétrage du widget ».

paramétrage erdv

Une pop-up s’ouvre avec le paramétrage du e-RDV.

Sélectionnez ici le format souhaité (pop-up ou panneau latéral) et configurez les éléments graphiques de votre e-RDV. Une fois votre design définit, cliquez sur « copier dans le presse-papier ». Vous aurez alors le code de votre widget dans le presse papier, qu’il faudra intégrer à votre site WordPress.

Erdv paramètres

Site HTML

Vous trouverez ci-dessous un exemple de page web HTML qui intègre la pop-up. Pour plus d’information, nous avons surligné certains aspects :

Vert – utilisez raccourcissoftware.com pour la production, raccourcissoftwareqa.com pour l’assurance qualité, raccourcissoftwaredev.com pour le développement, en fonction de l’organisation de votre entreprise.

Bleu – définissez le type de conteneur sur _m pour le format popup ou sur _s pour le format panneau latéral à droite.

Jaune – reportez-vous au code de widget personnalisé dans la console pour les identifiants et les clés spécifiques à l’entreprise.

Ceci est un exemple de page HTML qui intègre le widget pop-up.

<html>

<head>

<link rel=”stylesheet” href=https://bookingscontent.shortcutssoftware.com/ols-onlinebooking-ui/styles.css?CompanyId=1611 /> <!– Reportez-vous à votre code de widget personnalisé dans la console à CompanyId –>

</head>

<body>

Pour tester la nouvelle version des E-RDV, utilisez <b>Salons > Shortcuts NA – 8.1 Demo Azure</b> site.</br>

<!– Dans le code ci-dessous, utilisez le type de conteneur _m pour le popup ou _s pour le panneau latéral. Reportez-vous à votre code de widget personnalisé dans la console pour tous les autres identifiants et clés.–>

<scs-widget

container-type=”_m

company-id=”1611

customer-key=”eUefzH1uvs3JKptbnEn8

customer-secret=”04ZO8SBocgclCdoNbt9H

access-token-key=”7a8xQfmAnmlr8S65

access-token-secret=”I0EVeYwaSWZlORVr” >

</scs-widget>

<script type=”text/javascript” src=https://bookingscontent.<span style= »background: #83f52c; »>shortcutssoftware.com</span>/ols-onlinebooking-ui/ols-onlinebooking-ui.min.js?CompanyId=<span style= »background: #faed27; »>1611 </span>defer>

</script> <!– Reportez-vous à votre code de widget personnalisé dans la console pour le CompanyId –>

<a href=”#/book-now”>Book Now</a>

</body>

</html>

Site WordPress

Dans un premier temps, il faut ajouter la feuille de style CSS. Allez dans Réglages> Insérer un code…

Insérez ensuite le bon code d’en-tête pour CompanyId et enregistrez. Voici un exemple d’entreprise fictive :

<link rel=”stylesheet” href=”https://bookingscontent.shortcutssoftwareqa.com/ols-onlinebooking-ui/styles.css?CompanyId=603” /> <!– Supprimer la section en surbrillance pour la production. « qa » correspond à l’assurance qualité et  « dev » aux environnements DEV ->

Accédez à l’onglet « Pages » puis à l’onglet « Ajouter » . Cette page servira de base pour la pop-up ou le panneau latéral. Nous avons utilisé l’exemple ‘Shortcuts popup’ (le nom n’a pas d’importance) et le slug est ‘m’ pour modal/popup.

Popup rdv en ligne coiffeur

Déroulez le menu « Options d’écran » en haut à droite et activez le champ « Champs personnalisés ».

Tuto rdv en ligne coiffeur
Champ personnalisé

Pour voir la section, descendez en bas de la page jusqu’à « Champs personnalisés ».

Ajoutez un nouveau champ personnalisé – nous avons appelé l’exemple « scolb-popup », mais vous pouvez choisir quelque chose de différent – et ajoutez le code de widget ci-dessous :

<scs-widget

container-type=”_m” <!– _m for popup, _s for side panel –>

company-id=”xxxxx ” <!– Reportez-vous à votre code de widget personnalisé dans la console–>

customer-key=”xxxxx” <!– RReportez-vous à votre code de widget personnalisé dans la console–>

customer-secret=”xxxxx” <!– Reportez-vous à votre code de widget personnalisé dans la console –>

access-token-key=”xxxxx” <!– Reportez-vous à votre code de widget personnalisé dans la console–>

access-token-secret=”xxxxx” <!– Reportez-vous à votre code de widget personnalisé dans la console–>

></scs-widget>

Cliquez sur « Ajouter un champ personnalisé » pour finaliser.

champ personnalisé SC

Revenez maintenant à la section de modification du contenu de la page pour ajouter une référence à ce champ personnalisé. Le shortcode dans l’exemple ressemble à cela, mais il peut varier pour votre thème. Sachez que nous avons nommé le champ personnalisé « scolb-popup », mais vous auriez pu nommer le vôtre différemment.

[wc_html name=”scolb-popup“][/wc_html]

Tuto erdv

Cliquez sur Publier ou Mettre à jour la page.

Créez des boutons ou des liens sur les pages où vous voulez ajouter la pop-up/le panneau latéral.

Voici un exemple de bouton qui ouvre la pop-up Shortcuts avec le slug m.

[wc_button type=”info” url=”/ m/#/book-now” title=”Book Now” target=”” url_rel=”” icon_left=”” icon_right=”” position=”” class=””]Book Now[/wc_button]

Popup erdv

Cliquez sur Publier ou Mettre à jour la page, puis testez la.