Skip to content

Déployez le service en petite bulle (mode webchat) sur votre page web.

Où trouver le script du module

Si vous n'avez pas le script du module , allez dans Connecteur -> Canal utilisateur -> Webchat

Connecteur

Parameter

Il faut copier le script ci-dessous et le coller dans votre page web juste avant la fin de la balise body.

  • L'élément body représente le contenu principal de votre document HTML. Il ne peut y avoir qu'un élément body par document.
  • Veuillez à bien remplacer le botId par celui de votre bot (ligne 4).

Exemple de Script. Pour obtenir celui de votre bot, aller dans Prisme -> Connector -> Webchat -> Voir le Script de votre bot.

<script type="text/javascript" src="//cdn.prisme.ai/wegobot_inject.js" charset="UTF-8"></script>
<script type="text/javascript">
  injectWegobot({
    "botId": "DaqQWBCbTs",
    "primaryColor": "#14499b",
    "secondaryColor": "#14499b",
    "fullscreen": false,
    "apiCredentials": {
      "parse": {
        "APP_ID": "lrzrR2WoKff6oXTyZaQUUHY2KPkf4dkxizs8oAm4",
        "SESSION_TOKEN_KEY": "SESSION_GOGOWEGO_TOKEN_KEY",
        "API_BASE_URL": "https://api.prisme.ai/parse/1"
      }
    }
  });
</script>
- primaryColor vous permet de spécifier la couleur principale du widget en fonction de votre identité visuelle. - secondaryColor vous permet de spécifier la couleur secondaire du widget en fonction de votre identité visuelle. - fullscreen vous permet d'afficher votre bot en plein écran (false/true). - APP_ID: Clé autorisant à communiquer avec l'API. - SESSION_TOKEN_KEY: Token de session. - API_BASE_URL: L'api sur laquelle la dialogbox doit envoyer les messages.

Liste des options. (aucune n'est requise pour le fonctionnement du bot)

  • Les options autoOpenCondition & autoOpenDelay permettent d'ouvrir automatiquement le chat à de nouveaux visiteurs après le temps spécifié et si autoOpenCondition renvoie la valeur true.
  • L'option location permet de classer les adresses par ordre de priorité dans un périmètre donné ( radius est en km)
  • legal lien vers les conditions d'utilisation ou les mentions légales.
  • icon url de l'icône du chat si vous souhaitez personnaliser les bulles du chat.
  • store permet d'autoriser l'accès explicite aux autres robots du store via le chat. Deux modes existent actuellement : sous forme d'icône en haut à gauche ou en bas sous forme de bouton avec un texte personnalisable. Le store doit être un objet si vous le souhaitez en bas : { position : 'BOTTOM', text: 'My bots' }. Vous pouvez simplement définir store sur true pour utiliser l'icône supérieure.
  • history permet d'activer l'historique pour les questions, et les parcourir à l'aide des flèches du clavier.
  • historySize permet de modifier le nombre de questions retenues dans l'historique.
  • showRating permet de masquer les étoiles dans le profil du robot. Activé par défaut.
  • googleApiKey permet d'utiliser votre propre clé Google Place API si l'autocomplétion des lieux est nécessaire sur votre bot.
  • **questionsSuggestionsProvider**autocomplétion pour les messages de l'utilisateur.
  • questionsSuggestionsDelay autocomplétion déclenchant un délai après le dernier appui sur une touche.

Changer la disposition de votre bot sur votre page web c'est possible. Vous avez la possibilité de changer la position verticale du chatbot en modifiant la valeur par défaut, dans cet exemple nous l'avons fixé à 80px, mais vous pouvez modifier la valeur à votre convenance par 50, 60, 70 ,100 etc... Pour ce faire il faut ajouter la ligne suivante dans le script :

chatPosition: { 
yAxis: '80px' 
},

Ajouter une tooltip :

tooltip: "Hello, si vous avez des questions, je suis là pour vous aider !",

Ce qui donne le script suivant :

<script type="text/javascript" src="//cdn.prisme.ai/wegobot_inject.js" charset="UTF-8"></script>
<script type="text/javascript">
injectWegobot(
{
 "botId": "DaqQWBCbTs",
 "primaryColor": "#14499b",
 "secondaryColor": "#14499b",
 "fullscreen": false,
 "apiCredentials": {
  "parse": {
   "APP_ID": "lrzrR2WoKff6oXTyZaQUUHY2KPkf4dkxizs8oAm4",
   "SESSION_TOKEN_KEY": "SESSION_GOGOWEGO_TOKEN_KEY",
   "API_BASE_URL": "https://api.prisme.ai/parse/1"
  }
 },
 chatPosition: {
  yAxis: '80px'
 },
 tooltip: "Hello, si vous avez des questions, je suis là pour vous aider !"
}
);
</script>

Comment le déployer sur votre site internet

Directement dans le code source de la page.

Étape 1 : Se rendre sur le code source de votre page web

Step 1

Étape 2 : Ajouter le script avant la fin de la balise body

Step 2

Étape 3 : Voir le résultat

Step 3

Comment le déployer avec WordPress sans accès Administrateur

  • Étape 1 : Télécharger l'extension suivante pour Wordpress : Insert Headers and Footers.
  • Étape 2 : Dans Wordpress -> Aller dans Réglages -> Puis cliquer sur "Insert Headers & Footers" et coller le script dans le champ "Scripts in Footer".
  • Étape 3 : Cliquer sur Save.

Option 2

Comment le déployer avec WordPress si vous avez un accès Administrateur

  • Étape 1 : Dans Wordpress cliquer sur Apparence puis Editeur de thème.

Option 1 - apparence

  • Étape 2 : Cliquer sur footer.php.
  • Étape 3 : Coller le script avant la fin de la balise body </body>: Option 1 - modif
  • Étape 4 : Cliquer sur "Mettre à jour le ficher" et patienter quelques minutes.

Comment le déployer avec Jahia CMS

  • Étape 1 : Vous pouvez le faire directement dans la JSP principale de votre ensemble de modèles, ou vous pouvez utiliser le module addStuff. Pour installer ce module déployez-le depuis l'administration puis activez le module sur votre site, passez en mode édition et faites un clic droit sur le site depuis le panneau de gauche, puis allez dans Option et cliquez sur le "Add stuff in your HTML code (only for preview/live mode)".

  • Étape 2 : Ensuite, vous pouvez copier/coller tout simplement votre script Prisme.ai

Comment personnaliser les couleurs de votre module

Pour personnaliser votre assistant conversationnel, il faut cliquer sur les paramètres avancés.

  • Primary color représente la couleur du Header de votre bot et des boutons.
  • Secondary color représente la couleur du micro, ainsi que des boutons dans les cards.
  • Background style représente la couleur de fond de votre bot. Vous avez le choix entre une couleur unie, un dégradé entre 2 couleurs ou bien des fonds avec des motifs. Il suffit de cliquer sur Pattern pour dérouler la liste des fonds disponibles. Pour en ajouter d'autres contacté nous sur l'adresse support@prisme.ai.

Une fois vos choix effectués, cliquer sur Save.

Exemple avec un dégradé :

Config your color

Result color

Exemple avec un fond à motifs :

Config your background

Result background