Comment créer un CTA
Pour créer un CTA, entrez les informations suivantes :
Clé API du magasin* : cette clé est utilisée pour spécifier le magasin(s) que le booking widget présentera à l'ouverture. La clé se trouve dans l'onglet « Mon Entreprise » > Détails de l'entreprise.
Vous pouvez utiliser votre clé API magasin par défaut ou une autre.
Nom CTA* : le titre de votre CTA.
Paramètres hardcodés : utilisez cette option pour entrer un code personnalisé. Cela remplacera toute valeur définie dans « Paramètres », À L'EXCEPTION du paramètre Google Tag.
*Note : l'entrée doit commencer par « { » et se terminer par « } ».
*Note : n'entrez que le code paramètre, voir l'exemple ci-dessous :
Ex: {bookingFlow:'locations', serviceTags:'vip'}
Paramètres avancés
Activer le magasin sélectionné : configure le widget de telle sorte qu'à l'ouverture, la liste de vos magasins s'affiche (au lieu d'un seul magasin). Le client sera invité à sélectionner un magasin dans la liste.
Entrez une étiquette de filtre de magasin (utilisez des virgules pour l'opérateur ET): filtre la liste des magasins affichés dans le widget (pertinent si vous avez plusieurs magasins).
Pour appliquer une étiquette à un magasin, naviguez vers l'onglet « Mon entreprise » > Détails de l'entreprise > Étiquettes de filtre pour la réservation. Pour plus d'informations, voir ici.
Entrez une étiquette de filtre de service (utilisez des virgules pour l'opérateur ET) : filtre la liste des services affichés dans le widget.
Pour appliquer une étiquette à un service, naviguez vers l'onglet « Services » > {sélectionner un service} > Détails du service > Étiquettes de filtre pour la réservation. Pour plus d'informations, voir ici.
Entrez un ID de catégorie de service: présélectionne une catégorie de service spécifique lors de l'ouverture du booking widget. Pour obtenir l'ID d'une catégorie de service, naviguez vers l'onglet « Services » > {cliquez sur l'icône en forme de crayon à côté d'une catégorie de service} > notez l'ID sous « Détails de la catégorie »
Entrez un ID service : présélectionne un service spécifique lors de l'ouverture du booking widget. Pour obtenir l'ID d'un service, naviguez vers l'onglet « Services » > {sélectionnez un service} > notez l'ID sous « Détails du service ».
Afficher les descriptions : choisir d'afficher ou non la description du magasin, de la catégorie de service et du service, et si oui, comment.
Toujours visible
Jamais visible
Initialement réduit avec un bouton pour se déplier
Masquer les étapes : sauter l'étape de sélection du service et/ou l'étape de sélection du personnel. Sauter l'étape de sélection du service peut être pertinent si le service est présélectionné (le client n'aura pas besoin de sélectionner le service), tandis que sauter l'étape de sélection du personnel peut être pertinent si le service n'a qu'un seul membre du personnel associé (le client n'aura pas besoin de sélectionner le membre du personnel).
Service
Personnel
La liste des paramètres personnalisables qu'offre Shopify est limitée. La liste complète se trouve ici (notez que ceci vous obligerait à configurer et à générer le code du widget vous-même, en dehors de Shopify). Les paramètres qui ne sont pas disponibles dans Shopify sont les suivants :
Géolocalisation : permet aux clients de sélectionner les magasins en fonction de leur proximité (pour l'activer, contactez votre représentant Booxi)
locationCategory : les clients doivent sélectionner une région comme première étape lors de l'ouverture du widget.
staffId : présélectionne un membre du personnel spécifique lors de l'ouverture du widget (vous devez également appliquer un service ID).
availabilityTags : filtre les disponibilités sur les plages horaires affectées d'une ou plusieurs étiquettes.
Objet client : avec Shopify, l'activation de l'option « Utiliser la session utilisateur existante » (voir « Session utilisateur » pour référence) permet de pré-remplir le widget avec les informations du client. Cependant, l'activation de ce paramètre ne vous permet pas de choisir les propriétés à transmettre ni de définir la valeur d'une propriété (par exemple, si vous voulez activer les rappels par défaut). L'intégration du widget en dehors de Shopify vous permettra de le faire.
Événement
Entrez une date d'événement : Ouvre le widget à une date spécifique.
Entrez un ID d'événement : Ouvre le widget à un événement spécifique (c'est-à-dire un rendez-vous ou un événement de groupe).
Détails supplémentaires
Mappez une variable de produit ; les options disponibles sont les suivantes :
({Product.ID}
{Product.Name})
({Product.ID} - {Product.Name})
{Variant.SKU}
{Variant.Barcode}
La variable choisie sera incluse dans le champ « Demande supplémentaire du client » dans Booxi. Cela peut être utile si vous proposez plusieurs services qui redirigent vers la même URL de panier d'achat (cela vous permettra d'identifier rapidement le bon produit). Voir l'exemple ci-dessous :
Vous pouvez récupérer cette information dans le rapport de rendez-vous (voir la colonne « Client request »).
Redirection d'URL : redirige vers une autre page après la fermeture du booking widget.
URL si la réservation a été effectuée avec succès
URL si la réservation a été annulée
Les deux champs doivent être entrés pour que la redirection fonctionne.
Si vous avez activé le paiement par panier, laissez ce champ vide.
Analytique
Personnalisez votre CTA
Texte du CTA
Couleur d'arrière-plan
Couleur du texte
Border-radius
Vous pouvez appliquer ces personnalisations directement dans l'éditeur de votre boutique, voir ici pour plus d'informations.
Langue : la langue dans laquelle le booking widget sera présenté.
*Note : si aucune langue n'est sélectionnée, la langue par défaut du navigateur s'appliquera.
Session utilisateur
« Utiliser la session utilisateur existante » : si cette option est cochée, l'application Shopify transmettra les coordonnées du client au Booking Widget pour pré-remplir les informations client en fonction de la session en cours.
« Ignorer le formulaire d'identification client du Booking Widget » : si cette option est cochée, l'étape d'identification du client sera sautée (c'est-à-dire que le client n'aura pas besoin d'entrer ses informations lors de la réservation).
*Note : s'il manque des informations, l'étape d'identification du client ne sera pas sautée.
Vos CTAs seront affichés dans la page « Liste CTA ».
Comment supprimer ou dupliquer un CTA
Pour supprimer ou dupliquer un CTA, il suffit de cliquer sur le CTA cible, puis d'utiliser les options appropriées en haut à droite de l'écran, comme indiqué ci-dessous :
Comment ajouter un CTA à une page
Une fois vos paramètres configurés, vous êtes prêt à ajouter le CTA à votre boutique Shopify. Les CTA Booxi peuvent être ajoutés à n'importe quel composant de la boutique qui autorise les éléments d'application. Par exemple, dans une page du site (c'est-à-dire dans l'en-tête, le corps ou le pied de page) ou sur une page produit.
Dans l'éditeur web de Shopify, vous pouvez ajouter un CTA en tant que section OU en tant que bloc dans une section. L'ajout d'un CTA en tant que section l'affiche dans sa propre zone (voir exemple), tandis que l'ajout d'un CTA en tant que bloc à l'intérieur d'une section inclut le bouton dans un élément Shopify existant (voir exemple).
*IMPORTANT : dans l'éditeur web, activez la bascule Booxi dans l'onglet « Intégrations d’application »; ceci est nécessaire pour le bon fonctionnement des CTAs.
Ajout d'un CTA en tant que section
Exemple d'un CTA en tant que section :
Pour ajouter un CTA dans une section : naviguez vers « Applications » > Booxi > Liste des CTA, puis copiez le shortcode d'un CTA.
Ensuite, ouvrez l'éditeur de votre boutique en ligne et naviguez jusqu'à la page souhaitée.
Exemple 1 : ajouter le CTA à la page d'accueil
Ouvrez votre boutique en ligne.
Naviguez jusqu'à la page d'accueil.
Cliquez sur « Ajouter une section »
Cliquez sur « Applications », sélectionnez Booxi.
Cliquez sur l'option Booxi CTA, puis entrez le shortcode.
Cliquez sur le bouton, testez-le
Exemple 2 : ajouter le CTA à une page produit (voir ici pour une note importante)
Naviguez vers votre section « Produits
Sélectionnez un produit
Dans la section appropriée (par exemple « Modèle »), cliquez sur « Ajouter un bloc »
Cliquez sur « Applications », sélectionnez Booxi.
Cliquez sur l'option Booxi CTA, puis entrez le shortcode
Cliquez sur le bouton testez-le
Ajouter un CTA en tant que bloc dans une section
Exemple d'un CTA en tant que bloc au sein d'une section :
Pour ajouter un CTA en tant que bloc dans une section : naviguez vers « Applications » > Booxi > Liste des CTA, puis copiez le lien d'un CTA.
Ensuite, ouvrez l'éditeur de votre boutique en ligne et naviguez jusqu'à la page désirée.
Exemple 1 : ajouter le CTA à la page d'accueil
Ouvrez votre boutique en ligne.
Naviguez jusqu'à la page d'accueil.
Cliquez sur « Ajouter une section », puis sélectionnez un type de section (tout type de section autorisant les boutons, par exemple : « Image avec texte »).
Ajoutez un bouton si aucun n'est préchargé.
Cliquez sur le bouton, puis collez le lien CTA dans la section « Lien du bouton ».
Cliquez sur le bouton, testez-le.
Ajouter un CTA à un élément de menu
Vous pouvez également ajouter des CTA à des éléments de menu. Voici un exemple :
Suivez ces étapes :
Copiez le lien de votre CTA cible (à partir de l'onglet « Liste des CTA »)
Dans votre compte Shopify, accédez à « Contenu » > Menus > {sélectionnez un élément de menu}
Ajoutez un nouvel élément de menu (si nécessaire)
Collez le lien du CTA cible dans le champ « Lien ».
Sauvegardez vos modifications.
Note concernant l'ajout de CTA à une page produit
Si vous souhaitez inclure des CTA sur vos pages produit, notez que par défaut, toutes les pages produit hériteront du modèle de produit par défaut. Cela signifie que le CTA inclus dans la page par défaut s'appliquera à toutes les pages produit. Si votre objectif est de configurer les widgets de chaque page produit pour qu'ils s'ouvrent sur le produit (ou service) choisi, vous devez choisir l'une des solutions suivantes :
Option 1 : créer un modèle pour chaque produit
Créez un CTA pour chaque produit (c'est-à-dire service), en veillant à entrer l'ID du service dans le champ « Entrez un identifiant de service ».
Dans l'éditeur web, créez un modèle de produit pour chaque page produit.
Dans chaque modèle de produit que vous avez créé, incluez un bouton Booxi et collez le CTA approprié (shortcode ou lien) dans sa section lien.
 |  |
Enfin, attribuez le modèle approprié à chaque produit, utilisez le lien CTA créé pour chacun d'entre eux, en veillant à attribuer le bon modèle au produit.
Option 2 : utilisez l'objet métachamp
Créez un CTA pour chaque produit (c'est-à-dire chaque service), en veillant à entrer l'ID du service dans le champ « ID du service ».
Créez un méta-champ de produit de type « Texte sur une seule ligne » (Paramètres > Métachamps et métaobjets > Produits).
Ensuite, pour chaque produit, collez le code court approprié dans la section Méta-champs de sa page produit.
Ensuite, pour chaque produit, ouvrez votre éditeur et dans le champ « ID CTA ou code court », sélectionnez la source dynamique que vous avez créée.
Notes liées à la personnalisation
Pour les boutons que vous avez ajoutés en tant que section (voir ci-dessous), les personnalisations doivent être effectuées dans les paramètres de Booxi CTA.
Options de personnalisation :
Pour les boutons ajoutés en tant que bloc dans une section (voir ci-dessous), la personnalisation doit être faite en utilisant l'éditeur de thème de Shopify.
Voici quelques éléments pertinents :
Couleurs
Typographie
Animations
Boutons
*Note : Selon l'élément, les modifications apportées au thème peuvent affecter d'autres éléments de votre site web (par exemple, si vous modifiez le thème des boutons, cela affectera tous les boutons de votre site web au lieu d'un seul).
