Les parcours conversationnels

Les conversationnels simulent une conversation écrite entre MAIF et l'utilisateur, sous la forme d'un "chat", via des questions réponses guidées.

img-conversationnel.png
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.
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
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.

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

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

eemple de popin inline
Popin Inline HTML
popin-avertissement.png
Popin Avertissement HTML
popin-aide.png
Popin Aide Expand
popin-bonus.png
Popin Bonus-Malus

#liste-deroulante

Liste déroulante

HTML