# Canaux
Cet onglet permet de paramétrer les canaux sur lesquels le chatbot est disponible: - vous pouvez modifier les canaux déjà présent, choisit lors de la création du nouveau chatbot - ajouter ultérieurement un nouveau canal de diffusion.
# Skype for Business
Ce paramétrage permet de faire passer le chatbot en mode hor ligne sur Skype (bouton Pause) ou de redémarrer le connecteur sur Skype for Business en cas de problème (bouton Redémarrer).
Les cadres suivant permettent d'indiquer les informations de connexion (E-mail, mot depasse, ID Azure) ainsi que l’activité et le rôle du chatbot, par exemple : assistante RH. Une fois modifié, le changement apparaîtra automatiquement sur Skype Entreprise en dessus du nom du chatbot.
# Microsoft Teams
Pour activer un bot sur teams, la démarche est expliquée ici.
Depuis la page d'edition du canal teams, vous pouvez publier ou retirer votre chatbot dans le catalogue teams de manière automatique ou manuel.
# Automatiquement
# Autorisation
Afin d'effectuer la publication de votre chatbot dans le catalogue teams, Witivio a besoin de l'autorisation d'un Administrateur du tenant. Cliquez sur le bouton "je t'autorise" afin de commencer le processus d'authenfication.
Vous devriez voir apparaitre une fenêtre d'authentification microsoft. Identifiez-vous avec les informations d'un admnistrateur du tenant
Une fois l'autorisation effectué avec succés. Vous devriez voir l'état au dessus du bouton "je t'autorise" passé à connecté comme sur l'image ci-dessous.
# Publication
Une fois connecté vous pouvez publier l'application automatiquement depuis la plateforme en cliquant sur le bouton Publier
Une fois la publication effectué vous devriez voir un bouton Retirer apparaître afin de retirer l'application du catalogue Teams.
# Manuellement
Si vous ne possédez pas de compte administrateur du tenant vous pouvez publier votre bot manuellement dans le catalogue Teams.
# Télechargement
Depuis la page d'edition du canal teams, Téléchargez le package de l'application en cliquant sur le bouton télécharger comme l'image ci-dessous.
# Publication
Rendez-vous sur Teams, puis cliquez sur Autres applications ajoutés comme encadré dans l'image ci-dessous.
🔴
Sans l'étape du dessus, l'application ne sera pas fonctionnel.
# Administration
En tant qu'administrateur rendez vous sur le centre d'administration Microsoft Teams depuis le portail office. Accéder à l'onglet Gérer les applications
Vous pouvez aussi choisir d'afficher ou non votre chatbot dans l'application Chatbots
Pour publier l'application Chatbots sur teams, la démarche est expliquée ici.
# Webchat
Le canal Webchat est activé par défaut.
🔴
La fenêtre Webchat est votre chatbot en intégration et vous permet de le tester et voir ses comportements, avant la publication de ses connaissances. Lorsque vous modifiez le profil dans la base de connaissances, le chatbot prend en compte le choix du nouveau profil dans le test.
# Configuration du composant webchat V2
<script>
window.webChatSettings = {
botId: '[BOTID]',
color: '[COLOR]',
background: 'square3d',
avatar: '[URL]',
title: '[TITLE]',
description:"[DESCRIPTION]",
height: '650px',
callout: true,
welcome: true,
width:'400px',
apiKey: '[API KEY]',
displayMode:'close',
branding: false,
autoscroll: false,
autocomplete:false,
hideSendBox:false,
refresh: false,
};
!function () { function t() { var t = e.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = "https://webchat.witivio.com/v2/init.js", t.onload = function () { witivioWebChat.load(window.webChatSettings) }; var n = e.getElementsByTagName("script")[0]; n.parentNode.insertBefore(t, n) } var e = document, n = window; n.attachEvent ? n.attachEvent("onload", t) : n.addEventListener("load", t, !1) }();
</script>
| botId | L'identifiant unique de votre chatbot. L'identifiant est disponible dans le menu paramètres . |
| color | Couleur primaire en hexa. Il s'agit de le couleur du bandeau et de la bulle de la webchat. |
| avatar | URL de l'image de votre chatbot. |
| title | Le titre de la fenêtre de discussion. Généralement le nom du chatbot. |
| description | Description de la fenêtre de discussion. Généralement le role du chatbot. |
| callout | Activer le message de bienvenue (par défaut: true). Il s'agit du message de base d'invitation à la conversation (dernier message de base) à personnaliser depuis l'onglet Connaissances > Messages. |
| welcome | Activer l'affichage du message de bienvenue dans la fenêtre de discussion. (par défaut : true). Il s'agit du message de "Bonjour" à personnaliser depuis l'onglet Connaissances > Messages. |
| user | Non obligatoire. Si vous êtes dans SharePoint Online, vous pouvez utiliser :
Si aucune configuration n'est spécifiée, le composant génère un identifiant unique qui est enregistré dans le navigateur.
|
| refresh | Affiche un bouton qui réactualise le composant (par défaut : false) |
| hideSendBox | Permet de masquer le champ de saisie du message et le bouton envoyer (par défaut : false) |
| apiKey | L'api key qui se trouve dans les paramètres du chatbot |
| displayMode | Détermine si la webchat doit s'afficher ouverte 'open' ou fermée 'close' lors du chargement de celle-ci (par défaut 'close') |
| environnement | Environnement de la base de connaissance ('production', ou 'intégration') (par défaut : 'production') |
| triggerableDialogId | Identifiant du Triggerable ID à démarrer (facultatif) |
| triggerableDialogItemId | Identifiant du Triggerable Item ID à démarrer (facultatif) |
| background | Image de fond. Par défaut: square3d (= losanges en guise d'image de fond de la webchat). Valeurs possibles: (square3d, communication, square, travel). Ajouter la valeur 'none' si vous ne souhaitez pas personnaliser l'image de fond de votre webchat. |
| autocomplete | Permet d'afficher la liste des questions en mode autocompletion (par défaut: false) |
| autoscroll | Permet de forcer l'autoscroll lorsqu'un utilisateur remonte dans la conversation et décide de renvoyer un message dans le chat. |
| buttonDesign.shape | Permet de choisir la forme du bouton, valeurs possibles: square, circle, chat (par défaut: circle) |
| buttonDesign.icon | Permet de choisir l'icône du bouton, valeurs possibles: 'bot' prendra l'avatar de votre chatbot, peut également prendre la classe d'une Font Awesome (par exemple 'fa fa-quote-right' ou 'fas fa-comment') ou mettre une URL vers une image (par défaut: fa-comment-dots) |
| buttonDesign.height | Longueur du bouton, unité conseillée: 'px' (par défaut: '80px') |
| buttonDesign.width | Largeur du bouton, unité conseillée: 'px' (par défaut: '80px') |
| buttonDesign.border | 6 caractères hexadécimaux pour la bordure ou 'none' pour aucune bordure (attention la forme 'chat' du bouton est considéré comme une bordure) (par défaut: 'ffffff') |
| buttonDesign.text | Le texte à afficher à coté de l'icone choisi. Au dela de 25 caractère, le texte sera coupé. |
| headerHeight | permet de régler la taille du header. valeurs possible : small, normal (par défaut: 'normal' si non spécifié) |
| position | position de la webchat sur la page,'top', 'middle' ou 'bottom' puis 'left' ou 'right' suivie optionnellement d'une marge de maximum 150px (par défaut: 'bottom right 10px 10px') |
# Configuration du composant webchat V3 (preview)
<script>
"use strict";
window.webchatV3Settings = {
color: "[COLOR]",
position: "right bottom 50px 25px",
avatar: "[URL]",
buttonDesign: {
shape: "square",
text: "",
height: "75px",
width: "75px",
},
menu: {
suggestion: false,
question: true,
},
displayMode: "close",
title: "[TITLE]",
slide: false,
animation: true,
skipContent: false,
callout: {
display: true,
capacity: false,
description: "",
}
autocomplete: true,
refresh: true,
hideSendBox: false,
apiKey: "[APIKEY]",
botId: "[BOTID]",
};
var e=document,t=e.createElement("script");t.type="text/javascript",t.async=!1,t.src="https://webchat.virtualagentstudio.com/v3/static/js/main.js";var a=e.getElementsByTagName("script")[0];a.parentNode.insertBefore(t,a);
var e=document,t=e.createElement("script");t.type="text/javascript",t.async=!1,t.src="https://webchat.virtualagentstudio.com/v3/source/simple-update-in.production.min.js";var a=e.getElementsByTagName("script")[0];a.parentNode.insertBefore(t,a);
</script>
<body>
<div class="vas-webchat" id="vas-webchat"></div>
</body>
| color | Couleur primaire en hexa (sans le "#" devant). Il s'agit de la couleur de la webchat. |
| position | Placer la webchat selon vos préférences, sous le format [left/right top/bottom x y] (par défaut : "right bottom 50px 25px") |
| avatar | URL de l'image de votre chatbot. |
| buttonDesign.shape | Permet de choisir la forme du bouton, valeurs possibles: square, circle (par défaut: circle) |
| buttonDesign.text | Possibilité de mettre du text à la place de l'icône (limite à 25 caractères) |
| buttonDesign.height | Longueur du bouton, unité conseillée: 'px' (par défaut: '75px') limité à 100px |
| buttonDesign.width | Largeur du bouton, unité conseillée: 'px' (par défaut: '75px') limité à 100px |
| menu.suggestion | Permet d'activer des suggestions propres à votre Webchat |
| menu.question | Permet d'activer des questions récurrentes propres à votre Webchat |
| displayMode | Détermine si la webchat doit s'afficher ouverte 'open' ou fermée 'close' lors du chargement de celle-ci (par défaut 'close'). |
| title | Le titre de la fenêtre de discussion. Généralement le nom du chatbot. |
| slide | Mode d'affichage alternatif sous forme de menu sur le côté (par défaut : false). |
| animation | Les animations de la webchat. |
| skipContent | Permet de ne pas afficher le menu ainsi que le message de bienvenue à l'ouverture de la webchat. |
| callout.display | Activer le message de bienvenue (par défaut: true). Il s'agit du message de base d'invitation à la conversation à personnaliser depuis l'onglet. |
| callout.capacity | Affiche les suggestions dans la callout (menu.suggestion doit être activé). |
| callout.description | Message d'accueil présente dans la callout (le paramètre callout doit être activé) |
| autocomplete | Active l'autocomplétion lors de vos recherches sur la webchat. |
| refresh | Actualise la conversation pour supprimer les messages précédent |
| hideSendBox | Supprime le champ pour écrire |
| apikey | L'api key qui se trouve dans les paramètres du chatbot |
| botId | L'identifiant unique de votre chatbot. L'identifiant est disponible dans le menu paramètres . |
| triggerableDialog.triggerableDialogId | Identifiant du Triggerable ID à démarrer (facultatif) |
| triggerableDialog.triggerableDialogItemId | Identifiant du Triggerable Item ID à démarrer (facultatif) |
| environment | Environnement de la base de connaissance ('production', ou 'intégration') (par défaut : 'production') |
| profileId | Modifie la réponse apportée par la webchat selon le profil de l'utilisateur. (par défault: "") |
| userId | Si aucune configuration n'est spécifiée, le composant génère un identifiant unique qui est enregistré dans le navigateur. (par défault: "") |
| displayName | Nom d'utilisateur. (par défault: "") |
# Configuration du composant Webchat V1 compatible avec IE11 (obsolete)
# Sécurité du chatbot
La webchat géré également la sécurité du chatbot d'une meilleure façon. Elle permet de savoir où est déployée la webchat. A des fins de gouvernance, il est obligatoire d'indiquer explicitement où se trouve la webchat, et donc de déclarer les différents sites sur lesquels elle sera disponible.
⚠️
Sans cette définition explicite, la webchat ne chargera pas sur votre site. Cela permet d'éviter qu'un individu ajoute la webchat sans que cela soit autorisé.
💡
La fenêtre Webchat s'affiche également dans le canal de diffusion Webchat (onglet "Paramètres"), afin de vous permettre de tester et parler directement au chatbot en production.
# Personnalisation de la webchat
Accédez à l'onglet Personnalisation si vous souhaitez personnaliser la webchat depuis la plateforme Witivio.
Cliquez sur le bouton PRE-VISUALISER pour avoir une preview de votre webchat personnalisée.
🔴
Lorsque vous souhaitez afficher cette configuration personnalissée, il suffit de supprimer la personnalisation déjà existante dans le script JS et ne laisser que ces informations :
- Bot Id (Paramètres > Paramètres > Bot)
- Api KEY (Paramètres > Paramètres > Clef)
Lorsqu'il s'agit de votre première configuration, une fois la personnalisation terminée, cliquer sur SAUVEGARDER en haut à droite. Accédez au code JS de votre page et ajoutez les deux valeurs Bot Id et Api key.
Si vous souhaitez obtenir le code JS de votre configuration, cliquer sur COPIER LA CONFIGURATION en haut à droite. Celle-ci sera copiée dans votre presse-papier.
# Webpart SharePoint Modern
Vous pouvez télécharger la webpart ici
Pour ajouter le composant WebPart dans votre SharePoint Modern, vous devez ajouter le package sppkg au catalogue des applications.
Si vous ne disposez pas d'un catalogue d'applications, un administrateur en ligne SharePoint peut en créer un en suivant les instructions de ce guide: Utilisez le catalogue des applications pour rendre les applications professionnelles personnalisées disponibles pour votre environnement SharePoint Online..
# Déployer le package dans le catalogue d'applications
Accédez au catalogue d'applications de votre site.
Téléchargez ou faites glisser witivio-webchat.sppkg dans le catalogue des applications.
Cela déploie le package de solution côté client. S'agissant d'une solution côté client totalement fiable, SharePoint affiche une boîte de dialogue et vous invite à faire confiance au déploiement de la solution côté client.
- Sélectionner Deployer.
# Configurer la webchat
La webchat est maintenant disponible à partir de vos pages sur votre site SharePoint.
- Modifier une page sur votre site SharePoint
- Cliquez sur Ajouter un nouveau composant WebPart
- Si vous faites défiler l'écran vers le bas, vous trouverez la Webpart "Witivio-webchat"
- Sélectionnez la. Le composant apparaît, mais la discussion en ligne n'est pas encore configurée.
⚠️
Il n'apparaîtra pas tant que vous ne l'avez pas configuré.
- Sélectionnez le crayon pour éditer les paramètres. Veuillez vous référer à l'article ci-dessus pour comprendre la configuration.
💡
Lors de l'ajout de la Webpart à SharePoint, le contexte utilisateur est envoyé via la webchat. Cela signifie que l'utilisateur et le nom de l'utilisateur sont envoyés au bot. N'oubliez pas de consulter vos politiques de confidentialité si vous souhaitez que vos utilisateurs soient anonymes.
⚠️
La Webpart SharePoint de la webchat doit être ajoutée en haut de la page. Sinon, elle ne sera affichée que lors du scroll.
# Outlook
La plateforme Witivio permet d'ajouter un chatbot sur Outlook sous forme de webchat.
Voici les étapes à suivre pour intégrer votre assistant virtuel à votre Outlook :
- Dans un premier accédez à la plateforme Witiovio puis à l'onglet Paramètres > Canaux
Cliquez sur le bouton + AJOUTER UN CANAL et choisissez Outlook
Une URL est generée. Cliquez sur le bouton COPIER L'URL.
- Cliquez sur le bouton SUIVANT. Le canal Outlook est prêt à être ajouté!
- Connectez-vous à Outlook. Accédez à l'onglet Accueil au niveau de la barre de navigation supérieure, puis sélectionnez la commande Téléchargez des compléments
- Une nouvelle fenetre s'affiche. Dans le menu de gauche, cliquez sur Mes compléments
- En bas de la page, cliquez sur la commande + Ajouter un complément personnalisé et choisir à partir d'une URL.
Collez ici l'URL generée depuis la plateforme Witivio.
Cliquez ensuite sur Ok > Installer
Une fois ajouté, retrouvez votre complément personnalisé au niveau de la barre de navigation supérieure. Sélectionnez-le, une fenêtre s'ouvre à droite de la page. Échangez ainsi avec votre chatbot depuis Outlook.
# Lumapps
# Beezy
# Powell 365
# SMS
Conversez avec votre chatbot par sms depuis votre téléphone portable.
Cliquez ici pour en savoir plus sur la configuration Twiliio.