Vizir

# Partagez votre chatbot

Vous pouvez partager votre chatbot sur vos interfaces de chat de votre entreprise.

# Partager par profils

Cette option va vous permettre d'afficher votre chatbot (ou non) en fonction des profils des utilisateurs.

Par exemple

  • Le bot est intégré en widget web, vous pouvez afficher le bot seulement sur certaines page avec un filtres sur la parentUrl
  • Vous pouvez imaginer avoir 2 chatbots sur un même site web et en affiché un seul en fonction du profil de la personne qui visite votre site web
  • Le chatbot est intégré sur votre intranet (ou sur sharepoint) vous pouvez créer un groupe de béta testeurs pour qui le chatbot sera visible. Il restera invisible pour l'ensemble des autres utilisateurs.

# Bot Web

L'option la plus simple pour rendre votre chatbot accessible à vos utilisateurs est le bot web.

Vous aurez alors accès à une URL du type https://chat.vizir.co/name-your-chatbot

Cette page sera publique et toute personne disposant du lien, pourra donc utiliser votre chatbot.

Vous pouvez personnaliser le design de votre chatbot pour le rendre à l'image de votre entreprise (logo, couleurs, ...)

Sécurité

Si votre chatbot est intégré avec vos applications métiers internes via API, toute personne qui a accès au chatbot pourra utiliser cette intégration API.

Pour pallier à ce soucis de sécurité, vous avez plusieurs options

  • Désactiver le partage de votre chatbot en mode web. Votre chatbot ne sera plus accessible via URL, vous devrez alors le rendre accessible sur une plateforme tierce (Teams, Slack, ...) Partage Chatbot vizir via page web

  • Ajouter un login à votre chatbot. Vous pouvez sécuriser l'accès à votre chatbot pour que seuls les utilisateurs de votre entreprise puissent utiliser le chatbot. Voir login

# Widget Web

Une autre option de partage très simple à mettre en place est le widget Vizir.

Votre chatbot sera alors directement accessible sur votre site internet.

Le widget Vizir peut s'insérer sur tout type de site web, il suffit pour cela de coller le code récupéré dans le dashboard et de l'insérer entre les balises <head> et </head> de votre site.

Partage Chatbot vizir via widget

Le design du widget est également personnalisable depuis l'onglet Design du dashboard Vizir.

Voici un aperçu d'un widget sur un site web. Screenshot Chatbot vizir via widget

# Module Vizir (API Vizir)

# Intégration dans votre page web et initialisation

Pour pouvoir interagir avec le bot Vizir depuis le code JS de votre page web, vous pouvez utiliser le module Vizir en plaçant les deux balises suivantes dans la balise <body> ou <head> de votre page web :


<link href="https://chat.vizir.co/static/widget/m.css" rel="stylesheet">
<script src="https://chat.vizir.co/static/widget/module.js"></script>

DANGER

Si vous placez ces balises dans le <head>, toute autre code interagissant avec le widget Vizir (initialisation et autres méthodes) doit être placé à l'intérieur d'un gestionnaire d'évènement `load' comme suit :

window.addEventListener('load', () => {
  // write your code here;
  // window.vizir.widget.init(....
});

Un objet vizir et son sous-objet widget sont alors instanciés sur l'objet global window. Vous devez alors initialiser votre widget via la méthode init() du module :

window.vizir.widget.init(url_serveur_widget, id_environnement_bot, identifiant_utilisateur, autres_paramètres);

Les paramètres à fournir sont :

  • url_serveur_widget : (requis) dans les cas d'utilisation courants (notamment hors installation "on premise" de Vizir), la valeur à renseigner ici est : "https://chat.vizir.co".
  • id_environnement_bot : (requis) ID de l'"environnement" Vizir (test, production, ...) que vous voulez exposer sur votre page. Pour récupérer cette valeur, sur le tableau de bord Vizir, cliquez sur "Ouvrir le chatbot" (en haut à droite) pour ouvrir votre chatbot en mode web. Sur la page ou l'onglet qui vient de s'ouvrir, récuperez la suite de caractères qui se trouve en dernière partie d'URL. Par exemple, si l'URL est "https://chat.vizir.co/12345abcde", l'ID de votre environnement est 12345abcde.
  • identifiant_utilisateur : (optionnel) permet de spécifier l'ID du répondant qui conversera avec votre bot sur cette page. Si vous n'en spécifiez pas, Vizir attribuera automatiquement cet ID (une suite de caractères aléatoires). Le cas le plus courant d'utilisation de ce paramètre est losque le widget est exposé sur un outil interne à l' entreprise, sur lequel est identifé l'utilisateur et que vous souhaitez que le répondant soit "nommé" de manière identique sur cet outil et sur Vizir (par exemple, en passant comme valeur l'adresse email de l'utilisateur)
  • autres_paramètres : (optionnel) permet de prérenseigner certains "attributs Vizir" au moment de l'initialisation du bot. Ce paramètre doit être un objet dont les valeurs des champs doivent être des chaînes de caractères ou des nombres ; par ex : { first_name: 'John', last_name: 'Doe', job_title: 'Sales Manager', floor: 42 }

# Fonctionnalités disponibles via le module

Une fois initialisé, le widget peut être contrôlé via les méthodes suivantes :

  • window.vizir.widget.open() : ouvre le widget
  • window.vizir.widget.close() : ferme le widget
  • window.vizir.widget.remove() : supprime totalement le widget de la page
  • window.vizir.widget.sendMessageToBot(messageText) : envoie un message au bot de la part du répondant courant. messageText est une chaîne de caractères correspondant au message à envoyer. ⚠ Le message est envoyé dans le contexte de l'introduction et la liste des messages précédemment envoyés par le répondant sera vidée.
  • window.vizir.widget.setRespondentMemory(memory) : met à jour la mémoire du répondant. memory est un objet de la forme memory = { attribute: { ... }, tag: { ... }, event: { ... }.
  • window.vizir.widget.loadFeature(featureID) : charge une Compétence spécifique. featureID (requis) est l'id de la Compétence à afficher.
  • window.vizir.widget.loadResource(resourceID) : charge une Ressource spécifique. resourceID (requis) est l'id de la Ressource à afficher.
  • window.vizir.widget.setPosition(x, y) : modifie le positionnement du badge du widget sur la page parente. x (requis) : définit le positionnement horizontal et doit être égal à "left" ou "right" ; y (requis) : définit le positionnement vertical et doit être égal à "bottom" ou "top".

ℹ️ d'autres méthodes pourront être ajoutées progressivement en fonction des besoins identifiés.

# Événements transmis à la page parente

Pour la plupart des interactions réalisées via le chatbot, un message est envoyé à la page parente. Afin d'être notifié de ces "messages", il faut ajouter le code suivant sur la page parente :

window.addEventListener('message', (messageJson) => {
  const message = JSON.parse(messageJson.data);
  if (message.type === 'vizirDataSubmitted') { // 'vizirDataSubmitted' est un exemple d'évènement remonté (voir plus bas pour la liste exhaustive d'événements).
    // Here put the code you want
    console.log('event data =', event.data)
  }
});

🛡 Sécurisez votre code !

Il est fortement conseillé de s'assurer que le message provient bien du widget Vizir, en ajoutant le code suivant au début du gestionnaire d'événement:

if (message.origin !=== 'https://chat.vizir.co') return;

L'objet message: est structuré comme suit :

message = {
  "type": "vizirDataSubmitted", // le type de l'évènement
  "data": {
    // Données envoyées avec l'évènement (si présentes)
    // ...
  }
}

Par exemple, à chaque validation d'Adaptative Card, le message reçu sera de la forme :

{
  "type": "vizirDataSubmitted",
  "data": {
    "mappingMessage": {
      "email": "Email",
      "request_type": "Request Type",
      "description": "Description"
    },
    "email": "laurent@vizir.co",
    "request_type": "Help Needed",
    "title": "Cannot find my keyboard",
    "description": "I lost my computer keyboard yesterday after throwing it throught the window"
  }
}

Liste des évènements remontés

  • 'vizirDataSubmitted' : émis lorsque le répondant clique sur le bouton "Valider" d'une Adpatative Card (voir plus haut pour plus de détails).
  • 'burgerMenuItemClicked' : émis lors d'un clic sur une entrée du Burger Menu. Accompagné de data de la forme :
{
  "logic": {
    "nextResourceDetail": {
      "featureID": "...",
      "featureTitle": "",
      "resourceID": "...",
      "resourceTitle": "..."
    },
    "active": true|false,
    "type": "...",
    "goToResource": "...",
    "goToFeature": "..."
  },
  "type": "...",
  "title": "...",
  "payload": "...",
  "url": "",
  "endProcess": false|true,
  "call_to_actions": [],
  "_id": "...",
  "index": "..."
}
  • 'imageAttachmentButtonClicked' : émis lors d'un clic sur le bouton permettant d'envoyer une image (aucune data envoyée).
  • 'fileAttachmentButtonClicked' : émis lors d'un clic sur le bouton permettant d'envoyer un fichier (aucune data envoyée).
  • 'vizirMessageSentViaInput' : émis lors de l'envoi d'un message via le champ de saisie (en bas du widget). Accompagné de data de la forme :
{
  "message": "Bonjour",
  "attachments": [
    {
      "type": "file",
      "url": "https://test.fr/chuck_norris_jokes.pdf",
      "name": "chuck_norris_jokes.pdf"
    },
    ...
  ]
}
  • 'vizirQuickReplyClicked' : émis lors d'un clic sur une suggestion de réponse. Accompagné de data de la forme :
{
  "message": "Bonjour",
  "attachments": [
    {
      "type": "file",
      "url": "https://test.fr/chuck_norris_jokes.pdf",
      "name": "chuck_norris_jokes.pdf"
    },
    ...
  ]
}
  • 'vizirRestartButtonClicked' : émis lors d'un clic sur le bouton de reboot (si présent en en-tête de la page / du widget) (aucune data envoyée).
  • 'vizirCloseButtonClicked' : émis lors d'un clic sur le bouton de fermeture du widget (aucune data envoyée).

# Facebook Messenger

Vous pouvez décider de partager votre chatbot directement sur Facebook Messenger.

C'est intéressant dans le cadre d'un chatbot B2C, ou lorsque votre cible est présente sur Facebook.

Etant donné que peu de nos clients utilisent cette option (nos clients sont plus présents sur Teams ou Slack), pour rendre votre chatbot accessible directement dans Messenger vous pouvez nous envoyer un email à it@vizir.co

Votre chatbot sera accessible comme un contact "lambda", comme peut l'être le chatbot de la SNCF par exemple (sauf que le votre fonctionnera correctement 😂) Screenshot Chatbot vizir via Messenger

# Teams

Microsoft Teams est de plus en plus utilisé dans les entreprises pour communiquer en interne. Installer votre chatbot sur Teams vous permettra de:

  • augmenter l'usage
  • améliorer l'expérience de vos utilisateurs
  • disposer de fonctionnalités supplémentaires (notifications par exemple)

Vous retrouvez toutes les informations nécessaires pour déployer votre chatbot sur Microsoft Teams directement sur notre site web.

👉 Voir le site web (opens new window)

# Skype

Votre chatbot peut également être accessible directement dans Skype. Si votre entreprise utilise Skype en interne c'est la solution à envisager pour booster l'usage.

Pour connecter votre chatbot à Skype, veuillez écrire un email à it@vizir.co.

# Slack

Votre chatbot peut également être accessible directement dans Slack. Si votre entreprise utilise Slack en interne c'est la solution à envisager pour booster l'usage.

Votre chatbot va apparaitre directement dans Slack dans la catégorie application comme ci dessous Screenshot Chatbot vizir disponible dans Slack

Vous pouvez retrouver la doc ici (opens new window)

# Google Chat

Votre chatbot peut également être accessible directement dans Google Chat. Si votre entreprise utilise Google Apps en interne c'est la solution à envisager pour booster l'usage.

Votre chatbot va apparaitre directement dans Google Chat dans la catégorie application comme ci dessous
Screenshot Chatbot vizir disponible dans Slack

Vous pouvez retrouver la doc ici (opens new window)

# Sharepoint

Votre chatbot peut également être accessible directement dans Sharepoint. Votre chatbot va apparaitre sur votre Sharepoint comme ci dessous Screenshot Chatbot vizir disponible dans sharepoint

Vous pouvez retrouver la doc ici (opens new window).

# Facebook Workplace

Vous pouvez retrouver la doc ici

# SMS

Si vous souhaitez que votre chatbot soit accessible via SMS, c'est possible. Contactez directement les équipes Vizir (it@vizir.co) pour avoir plus d'informations.

# Email

Nous sommes actuellement en pleine réflexion pout proposer un chatbot directement accessible dans vos emails (Gmail et Outlook)

Votre chatbot sera alors capable de lire certains de vos emails (ou tous), extraire les éléments importants (entités) et répondre directement (ou simplement créer le brouillon si vous souhaitez une validation humaine).

Vous serez capable de

  • répondre par emails à vos demandes clients sur la date de livraison
  • répondre par emails à vos demandes internes de création d'équipe sur Teams
  • ...

Si ces cas d'usages vous intéressent, dites nous-en plus sur votre cas d'usage pour que nous l'intégrions dans notre Roadmap.

# Iframe

Si vous souhaitez installer votre chatbot sur une page hébergée chez vous, donc avec une URL personnalisée du type chatbot.monentreprise.com alors il faut créer une page web avec un iframe de votre chatbot en pleine page.

Comme ce n'est pas facile, et qu'on a pas mal tatonné pour arriver à un résultat parfait, on vous offre le code iframe parfaitement responsive !

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type"text/css">
      html {
          overflow: auto;
      }

      html,
      body,
      div,
      iframe {
          margin: 0px;
          padding: 0px;
          height: 100%;
          border: none;
      }

      iframe {
          display: block;
          width: 100%;
          border: none;
          overflow-y: auto;
          overflow-x: hidden;
      }
    </style>

  </head>

  <body>
    <iframe src="URL DE VOTRE CHATBOT">
      frameborder="0"
      marginheight="0"
      marginwidth="0"
      width="100%"
      height="100%"
      scrolling="auto">
    </iframe>
  </body>

</html>

# Webex Teams

Limitations de Webex

⚠️ Avant d'interfacer votre bot avec Webex, il faut avoir en tête les limitations spécifiques à cette plateforme :

  • Les messages au format Adaptive Cards sont supportés, mais seulement jusqu'à la version 1.2 de ce format (📌 pensez à vérifier que vous avez la bonne valeur dans la définition de votre ressource sur le Dashboard Vizir)
  • Les Carousels ne sont pour l'instant pas supportés.

# Créer le bot Webex :

  • Se rendre ici : https://developer.webex.com/my-apps/
  • Créer le bot.
  • Générer et copier le token.

# Sur le dashboard Vizir :

  • ☢️ Laisser inchangé l'APPID qui est prérempli ☢️ (à moins que vous ne sachiez vraiment pourquoi vous voulez le modifier 😉). (🦕 Attention! Pour les partages de bot Webex configurés avant le 8/9/2022, à la place de l'ancienne valeur, copier l'envID de l'environnement Vizir courant)
  • pour l'APP SECRET, coller la valeur du token récupérée plus tôt sur l'interface de Webex.
  • Cliquez ensuite sur le bouton Initialiser pour finaliser automatiquement la connection entre votre bot Vizir et votre bot Webex. 🔗 🚀

# Parler avec le bot sur Webex Teams :

  • Connectez-vous à votre espace Webex Teams.
  • Créez une nouvelle conversation directe : Créez un nouvel espace de conversation directe
  • Invitez le bot, en le cherchant avec son "Bot username" exact et complet (sinon vous ne le trouverez pas). Invitez le bot
  • S'affiche alors le nouvel espace et le bot démarre la conversation en affichant votre ressource d'introduction.

# Prise en charge des "réactions" 👍🥳🎅🐋

Les "réactions" sont supportées sur Teams et Workplace. Les évènements correspondants sont enregistrés en base avec pour triggerName la valeur "reaction". Le champ triggerData contient quant à lui la donnée reactionType qui donne plus d'information sur la réaction envoyée : "like", "heart", ...

  • Sur Workplace :
    • seule la réaction correspondant au clic sur le bouton "👍" en regard du champ de saisie est supportée (ndlr: au 11/07/2022, sur Workplace, il n'est pas possible de recevoir les évènements correspondant aux réactions sur des messages précédents).
    • vous pouvez configurer une Action Rapide "/reaction_like" pour intercepter cette interaction et afficher la resource de votre choix. Si vous ne le faites pas, l'utilisateur recevra "Oups, il semblerait que votre réponse ne soit pas valide"
  • Sur Teams, avec l'évènement est également enregistré l'ID du message Teams pour lequel a été suscité la réaction, mais pas la resourceID.

← Notifications/Envois groupés →