Créer un widget de réservation

Cet article explique comment créer et personnaliser un widget de réservation sur votre compte Smeetz for Business.

  1. Comment créer un widget de réservation
  2. Comment installer un widget de réservation
  3. Où trouver tous les widgets de réservation

1. Comment créer un widget de réservation


Créer > Widget de réservation

Screenshot 2021-05-21 at 14.43.35

Remplissez les champs suivants:
  • Nom du widget : ce nom n'apparaîtra pas publiquement, il vous permet de reconnaître votre widget de réservation sur votre compte Smeetz for Business. 
  • Type d'intégration : vous avez le choix entre 4 types de widget
    1. Bouton de réservation: le client clique sur le bouton du widget, une box s'ouvre et il accède directement aux tickets d'un unique produit (la visibilité des tickets présents dans le widget est à sélectionner plus bas)
      Capture d’écran 2021-09-03 à 13-59-33-png
    2. Liste de produits: le client clique sur le bouton du widget, une box s'ouvre et il accède à une liste de produit (la visibilité des produits présents dans le widget est à sélectionner plus bas). Le client clique sur un produit et le widget s'ouvre pour la réservation.
      2
    3. Calendrier du produit : le produit choisi apparaît directement dans la page web. Une fois que le client choisit son ticket, le widget s'ouvre pour finaliser la réservation.
      3

      Veuillez noter que ce type d'intégration ne fonctionne pas avec les add-ons

    4. Calendriers des produits : les produits sélectionnés apparaissent directement sur la page web, triés par jour, semaine ou mois. Le client clique sur un produit et le widget s'ouvre à la réservation.
    5. 4
    • Type de bouton : lorsqu'il y a un bouton de réservation, celui-ci peut être
      • Fixé: ce bouton est fixé dans une zone de la page
      • Flottant: ce bouton se déplace avec la page et est toujours visible
    • Couleurs et police: vous pouvez personnaliser l'aspect de votre bouton

    Choix de la couleur : le code couleur HTML vous permet de choisir la couleur du fond, du contour et du texte. Vous pouvez facilement trouver la liste complète des codes de couleur HTML en ligne.

    • CSS personnalisé : Si vous avez un design personnalisé, vous pouvez l'insérer ici. Ecrivez-le directement en langage CSS.
    • Label : C'est le texte qui apparaîtra dans votre bouton de réservation, par exemple "Réservez ici".
    • Arrondi: Décidez du niveau d'arrondi des bords de votre bouton
    • Type de booking flow: Vous choisissez comment vos tickets apparaîtront une fois que quelqu'un aura cliqué sur le bouton de réservation, vous avez deux options :
      • Lightbox : Une box avec vos choix de produits et de billets apparaîtra au milieu de votre écran
      • Volet sur la droite : Un panneau avec vos choix de produits et de billets apparaîtra sur le côté droit de votre écran
    • Langue du booking flow : Choisissez la langue souhaitée ou choisissez l'automatisation
    • Produit et tickets : Choisissez les produits et/ou tickets correspondants. Si vous ne sélectionnez pas de tickets spécifiques, tous les tickets d'un même produit seront automatiquement inclus
    • Panier: Possibilité d’intégrer un panier à votre widget, afin que vos clients puissent acheter différents produits en une seule fois. Veuillez contacter notre équipe de support pour de plus amples informations: support@smeetz.com

    Sur le côté droit de la page, sous "Aperçu", vous pourrez voir le design et tester le widget de réservation.

    Nous vous recommandons vivement de tout tester dans les champs sur le côté droit de la page, avant de copier le code HTML. Assurez-vous que tout fonctionne bien et correspond à ce que vous désirez.

    2. Comment installer un widget de réservation

    Vous pouvez maintenant copier le code HTML de votre widget de réservation en sélectionnant "Copier dans le presse-papiers". Vous pouvez ensuite coller le code à l'endroit où vous souhaitez que le widget apparaisse sur votre site web.

    Veillez à le coller dans la balise <body> et testez-le sur votre site web.

    Tutoriel détaillé pour plus d'informations.

    B2C Customer (9)

    3. Exemples de couleurs pour vos widgets calendriers

    Il est parfois difficile de trouver des couleurs cohérentes pour améliorer votre widget, voici pour vous quelques exemples avec leurs codes de couleur afin de vous faciliter la tâche : 

    Nuances vertes :

     

    Faible

    Moyenne

    Forte

    #f5fbf7

    #cbecd2

    #89d599

    vert
     
    Nuances rouges :
     

    Faible

    Moyenne

    Forte

    #fef3f3

    #fdcdcb

     #fca7a3

    rouge

    Nuances bleues : 

     

    Faible

    Moyenne

    Forte

    #f4fafd

    #d8eef8

     #a1d5ee

    bleu

     

    Nuances grises : 

     

    Faible

    Moyenne

    Forte

    #f5f7fa

    #d8dde3

     b0bac3

    gris

     

     

     

     

    4. Où trouver tous les widgets de réservation

    Vous trouverez tous vos widgets de réservations sous Canaux > Widget de réservation. Vous pouvez sans autre les modifier, sans devoir re-copier/coller le code HTML. Les modifications sont prises en compte automatiquement sur votre site web.

    Screenshot 2021-05-21 at 15.56.55

    Comme vous pouvez le voir, vous pouvez également créer de nouveaux widgets de réservation à partir de cette page (en haut à droite).