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 ».
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.
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.
Déroulez le menu « Options d’écran » en haut à droite et activez le champ « Champs personnalisés ».
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.
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]
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]
Cliquez sur Publier ou Mettre à jour la page, puis testez la.