Mon édition
Module supplémentaire Agents IA - avancé

Tout le monde apprécie une expérience visuellement agréable et facile à utiliser, mais la messagerie riche, comme les boutons et les carrousels, n’est pas prise en charge par Salesforce de façon native.

Nous pensons que l’expérience utilisateur est si importante que nous avons créé notre propre module et des scripts pour vous. En installant notre module complémentaire (contactez votre responsable du service client pour demander votre module complémentaire), vous pouvez exploiter ces designs dynamiques sous la forme de messages enrichis dans vos workflows de dialogue. Vous pouvez ensuite l’implémenter dans votre expérience de chat incorporée Salesforce.

Les personnalisations accessibles incluent :

  • Boutons
  • Carrousels
  • HTML

Ces capacités sont également personnalisables pour votre marque, afin de correspondre à l’apparence de votre marque.
Dans cet article, nous allons voir comment exploiter toutes les options de notre créateur de dialogue.

Pour bénéficier de ces options, suivez les instructions d’activation du module complémentaire de messagerie riche Salesforce avec un administrateur Salesforce.

 

Boutons

Les boutons étaient déjà disponibles avec Salesforce, quelles sont les différences avec les nôtres ?

Ils sont personnalisables et peuvent être formatés pour s’adapter à votre marque et à l’expérience que vous souhaitez créer. Découvrez les différentes possibilités ci-dessous.

Type et utilisation Exemple visuel

Vertical par défaut

 

Utilisation

Ce sera la vue standard si aucune version n'est spécifiée.

Screenshot_2023-01-24_at_09.50.30.png

Boutons binaires horizontaux

 

Utilisation

Utiliser : &&version1&& dans le message de l'agent IA avant le bouton.

Screenshot_2023-02-03_at_17.19.28.png

Screenshot_2023-01-24_at_09.52.37.png

Boutons linéaires horizontaux

 

Utilisation

Utiliser : &&version2&& dans le message de l'agent IA avant le bouton.

 

Screenshot_2023-02-03_at_17.17.16.png

Screenshot_2023-01-24_at_09.50.42.png

CSAT - Étoiles

 

Utilisation

Utiliser : &&version3&& dans le message de l'agent IA avant le bouton.

Les boutons doivent être 1 - 5 + « pas maintenant ».

Screenshot_2023-02-03_at_17.23.00.png

Screenshot_2023-01-24_at_13.26.23.png

CSAT - Emojis

 

Utilisation

Utiliser : &&version4&& dans le message de l'agent IA avant le bouton.

Screenshot_2023-02-03_at_17.23.37.png

Screenshot_2023-01-24_at_13.26.34.png

 

Carrousels

Les carrousels vous permettent d’afficher plus de contenu de manière visuelle, permettant au visiteur de choisir l’option qui lui est utile, mais ils sont plus volumineux, plus dynamiques et plus visuels que les boutons.
Vous trouverez ci-dessous les versions que nous déverrouillons avec notre module. 

 

Type et utilisation Exemple visuel

Carrousel par défaut

 

Utilisation

Peut être utilisé avec ou sans images.

Lorsque vous utilisez des images, vous pouvez ajouter une liste d’URL d’images pour créer un « collage ».

Prend en charge les boutons standards et les boutons externes.

Screenshot_2023-01-24_at_10.09.15.png

Carrousel large et sombre

 

Utilisation
L’image sert d’arrière-plan à l’ensemble de la carte. Prend en charge plusieurs images par carte, comme le carrousel par défaut. 

Utiliser : &&version2&& dans le titre de la première carte du carrousel
Cela fonctionne aussi avec les carrousels dynamiques

Screenshot_2023-01-31_at_12.55.03.png

Screenshot_2023-01-24_at_09.53.07.png

Carrousel d'offres sans image et formaté

 

Utilisation

Peut généralement être utilisé pour les carrousels affichant plusieurs packages, niveaux ou autres offres.

Utiliser : &&version3&&dans le titre de la première carte du carrousel (fonctionnerait aussi avec les carrousels dynamiques).

Utilisez la structure HTML suivante dans la description de la carte.


<h2>7,99 €/mois</h2>
<h5>Essai gratuit de 1 semaine</h5>
<p>puis 9,99 €/mois. Résilier à tout moment</p>


Screenshot_2023-01-31_at_12.56.02.png

Chat.png

 

Exemples HTML

Si les options présentées jusqu’à présent ne vous suffisent pas, vous pouvez aussi convertir le code HTML en messages très personnalisés, ainsi que simplement transformer du texte. 

 

Type et utilisation Exemple visuel

Bouton de lien externe


Utilisation

Quand vous utilisez un seul bouton de lien externe, il est rendu comme dans l’exemple à gauche.

Screenshot_2023-01-24_at_13.33.33.png

Médias incorporés

 

Utilisation

Mettre le code HTML dans le message de l'agent IA sans autre contenu

<iframe src="https://www.youtube.com/embed/8dvFVEHKvrI" frameborder="0" allowfullscreen></iframe>>

<img src="https://www.ultimate.ai/hs-fs/hubfs/Website/Visuals/hp2-2.png">>

Screenshot_2023-01-24_at_13.32.20.png

Bouton largeur intégrale

Utilisation

Pour étendre le bouton à la largeur de la totalité de l’agent IA, vous devez ajouter la classe "btn-full"

<div class="info">Some text</div>

<div class="buttons-wrapper buttons-wrapper-v0 btn-full">

<a target="_blank" href="https://www.google.com" class="oneElement">Purple button-link</a></div>

Screenshot_2023-01-24_at_13.32.35.png

Zone d’information avec boutons

Utilisation

Message d'agent IA personnalisé avec deux niveaux de hiérarchies du texte et un bouton.
Cela peut être utilisé pour fournir des informations importantes (comme la date de livraison), des informations annexes et un lien externe (CTA) important

Possibilité de combiner le bouton V2 également, cette fois-ci dans la version au sein du message de l’agent IA.

<div class="titlesBlock">
<p>🚚 Livraison le 30 juin 2022</p>
<p>📦 4 article(s) expédié(s) par Ultimate</p>
</div>

<div class="buttonBlock">
<div class="buttonBlock_text">
Vous ne l'avez pas encore reçu ? Il est possible que votre colis ait été livré à un voisin ou un point de retrait.
</div>

<div class="buttons-wrapper buttons-wrapper-v1"><a class="btn-default" href="https://www.google.com" target ="_blank">🔍 Suivi du colis</a>
</div>

Screenshot_2023-02-03_at_17.21.21.png

Screenshot_2023-01-24_at_13.31.46.png

 

Tout peut être personnalisé en fonction de votre contenu et les composantes HTML peuvent vous servir d’inspiration pour réaliser tout ce que vous souhaitez accomplir.

Réalisé par Zendesk