Deploy the service in a small bubble (webchat mode) on your web page.¶

Module script¶

Where to find it¶

The module script can be found in channels -> Webchat

Connecteur

Parameter

You need to copy the script as above and paste it into your web page just before the end of the <body> tag.

The body element represents the main content of your HTML document. There can only be one body element per document.

Sample script:

<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 allows you to specify the main color of the widget according to your visual identity. - secondaryColor allows you to specify the secondary color of the widget according to your visual identity. - fullscreen allows you to display your bot in full screen (false/true). - APP_ID: Key allowing to communicate with the API. - SESSION_TOKEN_KEY: Session token. - API_BASE_URL: The api on which the dialogbox should send messages.

List of optional options¶

The autoOpenCondition & autoOpenDelay options allow to automatically open the chat to new visitors after the specified time and if autoOpenCondition returns the value true.
The location option allows you to prioritize the addresses within a given perimeter ( radius is in km)
legal link to the terms of use or legal notice.
icon url of the chat icon if you want to customize the chat bubbles.
store allows you to authorize explicit access to the other robots of the store via the chat. Two modes currently exist: as an icon on the top left or as a button at the bottom with a customizable text. The store must be an object if you want it at the bottom : { position : 'BOTTOM', text: 'My bots' }. You can simply set store to true to use the top icon.
history allows you to activate the history for the questions, and browse them with the keyboard arrows.
historySize allows you to change the number of questions retained in the history.
showRating allows you to hide the stars in the robot profile. Enabled by default.
GoogleApiKey allows you to use your own Google Place API key if autocompletion of places is needed on your bot.
questionsSuggestionsProvider autocompletion for user's messages.
QuestionsSuggestionsDelay autocompletion triggering a delay after the last key press.
messagesDelay** Allows you to define a custom delay for the display of the bot's answers.

Changing the layout of your bot on your web page is possible. You can change the vertical position of the chatbot by changing the default value, in this example we have set it to 80px, but you can change the value to your liking by 50, 60, 70, 100 etc... To do this you need to add the following line in the script:

chatPosition: { 
yAxis: '80px' 
},

Add a tooltip:

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

This gives the following script:

<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>

How to deploy it on your website¶

Directly in the source code of the page.

Step 1: Go to the source code of your web page

Step 1

Step 2: Add the script before the end of the body tag

Step 2

Step 3: See the result

Step 3

How to deploy it with WordPress without Administrator access¶

Step 1: Download the following extension for Wordpress: Insert Headers and Footers.
Step 2: In Wordpress -> Go to Settings -> Then click on "Insert Headers & Footers" and paste the script in the field "Scripts in Footer".
Step 3: Click on Save.

Option 2

How to deploy it with WordPress if you have Administrator access¶

Step 1: In Wordpress click on Appearance then Theme Editor.

Option 1 - apparence

Step 2: Click on footer.php.
Step 3: Paste the script before the end of the body tag </body>:
Step 4: Click on "Update file" and wait a few minutes.

How to deploy it with Jahia CMS¶

Step 1: You can do this directly in the main JSP of your template set, or you can use the addStuff module. To install this module deploy it from the administration then activate the module on your site, switch to edit mode and right click on the site from the left panel, then go to Option and click on the "Add stuff in your HTML code (only for preview/live mode)".
Step 2: Then, you can simply copy/paste your Prism.ai script.

How to customize the colors of your module¶

To customize your conversational assistant, you have to click on the Advanced settings.

Primary color represents the color of your bot's header and buttons.
Secondary color is the color of the microphone and the buttons in the cards.
Background style represents the background color of your bot. You can choose between a plain color, a gradient between 2 colors or backgrounds with patterns. Just click on Pattern to scroll down the list of available backgrounds. To add others, contact us at support@prisme.ai.

Once you have made your choices, click on Save.

Example with a gradient:

Config your color

Result color

Example with a patterned background:

Config your background

Result background