Les conversationnels simulent une conversation écrite entre MAIF et l'utilisateur, sous la forme d'un "chat", via des questions réponses guidées.
Popin Inline HTML
Les parcours conversationnels
Dans quel contexte utiliser un parcours conversationnel :
- Pour un parcours de tarif ne nécessitant qu'un nombre limité de questions
- Pour un parcours principalement utilisé sur mobile
- Pour un début de parcours destiné à recueillir un petit nombre d'informations
- Pour un parcours ne nécessitant pas une restitution dans un tableau complexe
Information
Le conversationnel utilise un header et un footer "light" spécifiques, prochainement dans le design system.
#partie-conversation
Conversationnel - partie conversation
Partie haute du conversationnel, intégrant les intéractions (messages) entre l'utilisateur et la MAIF.
Voir le code
HTML
Pug
.conversationnel
.conversation
.row
.col-sm-8.col-center
a(href='#').reinit
i.maificon.maificon-fleche-return
span Réinitialiser
Contenu de la conversation - voir éléments suivants#message-maif
Conversationnel - Message MAIF
Le message MAIF sert à afficher une question ou une réponse apparaissant comme MAIF
Voir le code
HTML
Pug
.message.message-m
header
.perso
.message-container
.text
span Message MAIF
.message.message-m
header
.perso
.message-container
.text Texte standard Gras possiblesur plusieurs lignes
.message.message-m
header
.perso
.message-container
.text
span Message d'information (Popin)
a(href='#', data-toggle='modal', data-target='#popin-1').link-information.color-univers Texte d'action sur plusieurs lignes possible
.message.message-m
header
.perso
.message-container
.text
span Message d'action (Popin)
a(href='#').link-action.background-univers
i.maificon.maificon-pdf
span Texte d'action sur plusieurs lignes possible#partie-question
Partie question
Partie basse du conversationnel, intégrant les demandes MAIF.
La partie question, représentée ci-dessous, permet de faire afficher les champs, boutons, liste, etc permettant de répondre à une question posée par la MAIF.
Voir le code
HTML
Pug
.conversationnel
.conversation
.conversation-question.color-univers
| Contenu
Attention
Afin d'afficher 2 lignes de réponses, il est nécessaire d'ajouter la classe two-lines-question sur les container .conversation et .conversation-questions
#autocomplete
Autocomplete
Attention
Afin d'afficher le filigrane noir sur la conversation, il est nécessaire d'ajouter le code suivant <div class="overlay"></div> dans le container .conversation.
Il faut ajouter la classe open sur le container .dropup lors de la saisie pour ouvrir la liste déroulante de propositions.
#boutons
Boutons
Conversationnel - Champ
#conversationnel-questions-champ
Conversationnel - champ-lien
#conversationnel-questions-champ-lien
Attention
Ce composant, contenant un lien de passage à l'étape suivante permettant de rendre la question facultative, s'affiche obligatoirement avec l'ajout de la classe two-lines-question sur les container .conversation et .conversation-question.
#sous-tunnel
Sous-tunnel
Voir le code
HTML
Pug
.conversationnel
.conversation-steps.active
header
.top.background-univers
.title Recherche par marque / modèle
a(href="#").close
i.maificon.maificon-croix1
span Fermer
.timeline-container
.row
.col-sm-8.col-xs-11.col-center
ul.timeline.list-unstyled.color-univers
li.active
span
li
span
li
span
li
span
.step-title
.row
.col-sm-8.col-xs-11.col-center
.flex-row
a.back-link.color-univers(href="#")
span Retour
.title Choisissez la marque de votre véhicule
.step-content
.loader.color-univers
div
div
div
div
div
div
div
div
div
div
div
div
div
div
div
div
div
div
div
div
.row
.col-sm-8.col-xs-11.col-center
form.maif-form
span.scrolled-trigger
.loading-overlay
// ... form elements#popins
Popins
Popin Avertissement HTML
Popin Aide Expand
Popin Bonus-Malus
#liste-deroulante
Liste déroulante
Voir le code
HTML