Passer au contenu principal
Toutes les collectionsBooking widgetIntégration du Widget de prise de rendez-vous
Ajoutez le bouton de rendez-vous Booxi sur votre site web
Ajoutez le bouton de rendez-vous Booxi sur votre site web

Comment générer le code du widget et où placer chaque élément dans votre outil de création de site web

Mis à jour cette semaine

Pour ajouter le booking widget à votre site web, suivez les étapes suivantes :

PARTIE 1: Générer le code pour votre widget

Si vous n'êtes pas certain de la version du booking widget que vous utilisez actuellement, voir ci-dessous :

Le booking widget v2 ressemble à ceci :

Le booking widget v3 ressemble à ceci :

Vous pouvez également vous référer au script Booxi dans la balise head de votre code.

  • Booking widget v2:

    <script src="https://www.booxi.com/api/booknow.js" async=""></script>
  • Booking widget v3:

    <script src="https://www.booxi.com/booknow/booknow.js" async=""></script>

Booking widget v2

  • Accédez à notre générateur de code

    • Si votre région de hosting est l'Amérique du Nord, cliquez ici

    • Si votre région de hosting est l'Europe, cliquez ici

  • Dans le générateur de code, entrez la clé API associée à votre magasin (pour trouver votre clé API, allez dans « Mon Entreprise » > Détails de l'entreprise > « Clé API »)

  • Entrez les champs supplémentaires et/ou configurez les paramètres comme vous le souhaitez [facultatif]

  • Testez votre bouton en cliquant sur « Run ».

Prenez connaissance des différents éléments du code, tel qu'illustré ici. Vous en aurez besoin dans la partie 2.

Booking widget v3

  • Accédez à notre générateur de code

    • Si votre région de hosting est l'Amérique du Nord, cliquez ici

    • Si votre région de hosting est l'Europe, cliquez ici

  • Dans le générateur de code, entrez la clé API associée à votre magasin (pour trouver votre clé API, allez dans « Mon Entreprise » > Détails de l'entreprise > « Clé API »)

  • Entrez les champs supplémentaires et/ou configurez les paramètres comme vous le souhaitez [facultatif]. Voir ici pour plus d'informations.

  • Testez votre bouton

PARTIE 2: Insérez le code dans votre site web

  • Accédez à votre outil de création de site web. Si vous utilisez un des outils suivant, cliquez-le lien :

  • Dans le générateur de code, copiez la bibliothèque Book Now du tag <head> et collez-la dans le tag <head> de votre page.

  • Dans le générateur de code, copiez le code de configuration du tag <body> et collez-le au début du tag <body> de votre page.

  • Dans le générateur de code, copiez le code du bouton et collez-le à l'endroit où vous voulez qu'il apparaisse.

  • Testez le fonctionnement du bouton dans l'outil de votre site web.

Voici une vidéo illustrant les étapes ci-dessus (booking widget v2) :

Vous pouvez personnaliser votre widget; une certaine familiarité avec le Javascript et le CSS est nécessaire. Pour une personnalisation plus avancée, contactez votre représentant Booxi.

Avez-vous trouvé la réponse à votre question ?