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.

tarifExpress.gif
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