Les conversationnels simulent une conversation écrite entre MAIF et l'utilisateur, sous la forme d'un "chat", via des questions réponses guidées.
Les conversationnels simulent une conversation écrite entre MAIF et l'utilisateur, sous la forme d'un "chat", via des questions réponses guidées.
Le conversationnel utilise un header et un footer "light" spécifiques, prochainement dans le design system.
#partie-conversation
.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
.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
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.
.conversationnel
.conversation
.conversation-question.color-univers
| Contenu
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
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
#conversationnel-questions-champ
#conversationnel-questions-champ-lien
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
.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
#liste-deroulante