Un carrousel est un excellent moyen de montrer une liste d’options à vos visiteurs sous une forme visuellement attrayante et pratique. Une vignette de carrousel peut comporter une grande image, un titre, une description et des liens. Les visiteurs peuvent faire défiler vos vignettes horizontalement, cliquer sur les liens et explorer les pages Web connexes.

Utilisez-le pour afficher une liste de produits ou de services, une liste d’articles ou toute autre liste d’articles qui correspondent à votre scénario de bot. Si vous avez configuré une connexion API, vous pouvez créer des carrousels dynamiques basés sur les données de votre API.

1. Créez une carte "message riche"

Pour ajouter un carrousel à votre scénario de bot, créez d’abord une carte "message riche". Ensuite, vous pouvez ajouter un carrousel en cliquant sur l’icône "vignette ou carrousel".

Pour en savoir plus sur la configuration d’un scénario de bot, consultez Configurer un scénario bot.

2. Configurez votre carrousel

Une fois que vous avez choisi une carte riche dans le scénario, vous devez choisir l’icône du carrousel pour entrer dans la configuration du carrousel.

Vous avez la possibilité de créer un carrousel statique qui doit être mis à jour manuellement de temps à autre si vos références changent ou un carrousel dynamique qui sera connecté à votre API et mis à jour automatiquement par l’API.

Pour chaque Vignette, vous pouvez choisir une Image, un Titre & Description et des Liens.

Idéalement, votre image est carrée et mesure 285x285 px (si sa taille est plus grande elle sera redimensionnée pour s'adapter à cette taille).

2.1 Carrousel statique

Dans la configuration du carrousel, vous pouvez à tout moment effectuer les actions suivantes :

• Ajouter, modifier et supprimer l’image, le titre & la description et les liens individuellement pour chaque vignette
• Télécharger une image depuis votre ordinateur ou pointer vers une URL
• Aperçu du carrousel en action

2.2 Carrousel dynamique

Pré-requis :

Avoir une connexion API configurée et une carte de connexion API configurée lors d’une étape précédente du scénario sinon le carrousel dynamique ne saura pas quelles variables utiliser parmi toutes les connexions API que vous pourriez avoir.

Pour en savoir plus sur la connexion API et son utilisation dans le carrousel dynamique, reportez-vous au point 3 "Carrousel dynamique avec une connexion API".

Pour les carrousels dynamiques, vous pouvez configurer une image, un titre, une description et des liens à partir de votre API ou, si vous ne souhaitez pas utiliser les informations de votre API, les champs peuvent être remplit de contenu statique.

De la même manière que pour les carrousels statiques, vous pouvez gérer les actions suivantes dans le carrousel builder pour les carrousels dynamiques :

• Configurez le nombre de vignettes pour le carrousel.
  Dans ce cas, l’ordre des vignettes est déterminé par l’ordre dans lequel l’API envoie les données.
• Aperçu du carrousel en action

3. Carrousel dynamique avec une connexion API

Les carrousels dynamiques avec une connexion API vous permettent d’afficher des listes d’éléments de manière agréable dans un chat. Utilisez-le pour présenter des produits, des services ou du contenu qui est toujours mis à jour avec vos données et personnalisé pour vos visiteurs.

Dans l’exemple suivant, nous allons construire un carrousel dynamique qui montrera 5 produits basés sur une question posée à un visiteur.

3.1 Création d’une connexion API

3. 1. 1 Création d’une connexion API

Remplissez les champs de votre connexion API comme pour toute autre connexion que vous auriez pu faire par le passé. En savoir plus sur la configuration d’une connexion API.

Pour exploiter la connexion API avec le carrousel dynamique, vous devrez lier les variables de connexion API à ArrayList of strings. Cela nécessite une syntaxe JSONPath spécifique que nous expliquerons dans la section suivante.

3. 1. 2 Cartographie du JSONPath pour un carrousel dynamique

1. Testez votre connexion en cliquant sur le bouton "Test Connection", en bas de l’écran, pour visualiser le JSONPath retourné par votre API. Dans notre exemple, le JSONPath ressemble à ceci, comme prévu il contient un array JSON dans le champ "search_results" :

{
"search_results": [
{
"title": "sixthreezero Around The Block Women's Beach Cruiser Bike",
"link": "https://www.smart-store.com/sixthreezero_around_the_block",
"image": "https://www.smart-store.com/images/sixthreezero_around_the_block.jpg",
"rating": 4.5,
"ratings_total": 4485,
"price": {
"raw": "$269.99"
}
},
{
"title": "BESPORTBLE Mountain Bike",
"link": "https://www.smart-store.com/besportble_mountain_bike",
"image": "https://www.smart-store.com/images/besportble_mountain_bike.jpg",
"rating": 3.6,
"ratings_total": 16,
"price": {
"raw": "$179.99"
}
},
.
.
. Rest of the list
.
.
]
}

2. Repérez dans les variables de votre JSONPath les variables dont vous aurez besoin pour votre carrousel. Dans notre exemple, c’est "titre", "lien", "image" et "prix".

3. Dans la colonne “output variable”, donnez un nom correspondant à chacune des variables ci-dessus et écrivez-les, une par ligne. Dans notre exemple, nous avons choisi les noms suivants : product_title, product_link, product_image et product_price. Ce sont les noms de variables que vous utiliserez plus tard pour configurer votre carrousel dynamique.

4. Utilisez la syntaxe JSONPath pour mapper chaque “output variable” à un élément JSON valide. Dans notre exemple, la syntaxe ressemble à celle de la capture d’écran ci-dessous. Toute variable de sortie dans cet exemple sera liée à une liste de chaînes collectées par la syntaxe de chemin JSON.

Pour en savoir plus sur la syntaxe JSONPath, consultez la documentation officielle ici.

5. Enregistrez votre connexion API et accédez au bot auquel vous souhaitez ajouter un carrousel dynamique.

3.2 Mise en place du scénario bot

1. Dans votre scénario bot, ajoutez une carte de type connexion API et choisissez la connexion API configurée dans les étapes précédentes. N’oubliez pas de choisir la dernière version de la connexion API.

2. Si vous avez défini une entrée dans votre connexion API comme dans notre exemple, vous verrez un champ pour définir la question que vous souhaitez poser à vos visiteurs. Dans notre exemple, la question est "Quel type de produit recherchez-vous?".

3. Dans "Prochaine étape après réponse", configurez pour continuer à une nouvelle étape de type "message riche".

4. Dans votre carte de message riche, écrivez du texte pour introduire votre carrousel et cliquez sur l’icône "carrousel".

5. Choisissez le type de carrousel "Dynamique" et remplissez les champs avec les variables configurées plus tôt dans votre connexion API. Utilisez l’icône "ajouter une variable" dans chaque champ pour voir les variables disponibles.
Si vous ne voyez pas vos variables, cela signifie que quelque chose n’a pas été correctement configuré dans votre scénario de bot entre la carte de connexion API et la carte de message riche.

6. Prévisualisez votre carrousel et assurez-vous que tout fonctionne correctement.