Flowstorm Client Bot with Examples

How to embed bot client in your project or website?

To use bot client in your project or website you can simple link it from bot.flowstorm.ai or install via npm.

link from bot.flowstorm.ai

  1. add link to js and css in your page
<link href="https://bot.flowstorm.ai/client-bot.css" rel="stylesheet">
<script src="https://bot.flowstorm.ai/client-bot.js"></script>
  1. call initFSClientBot function in your code 
<script>
    initFSClientBot({
        botKey: '60353867bbc21e2bef56faaf',
    });
</script>

import from npm

  1. install @flowstorm/client from npm repository 

npm install @flowstorm/client

You will need to add .npmrc file to you project with these settings:

@flowstorm:registry=https://gitlab.com/api/v4/projects/23512224/packages/npm/

  1. import js and css in your project
import { initFSClientBot } from '@flowstorm/client';

@import "~@flowstorm/client/client-bot.css";
  1. call initFSClientBot function in your code 
initFSClientBot({
    botKey: '60353867bbc21e2bef56faaf',
});

client bot settings

To the initFSClientBot function you can pass various settings:

Property Type Default value Description
elementId string null ID of element which should be used for bot client. You can prepare element on your page and display bot there or if it is not set, element with bot will be added just before the closing </ body tag on your page.
customCssClass string null If you are not using your own elementId, you can add custom CSS class to the generated element with client bot via this property. You can add multiple classes, just separate names with space. Example myClass1 myClass2.
botKey string N/A ID of your application.
allowUrlParams boolean false Allow to pass some information with client bot setup via url params. You can pass:<br>botKey - as part of pathname. Example: https://your.site.name/<botKey> or https://your.site.name/?key=<botKey> <br>animObjects - shortcut for backgroundAdvancedAnimationParticlesCount (see below) <br>animate - shortcut for backgroundSimpleAnimation (see below)
domain string ‘’ Allow to set domain for stored cookies. Keep empty, if you don’t need this.
guiMode string ‘chat’ Layout of client bot. Can be set to kiosk (only one message from bot and client are visible) or chat (whole history of communication is visible).
fullScreen boolean false UI will take whole screen to render. It will render UI to 100vw and 100vh. So this view is recommended for layouts without any other elements.
widgetSize { width: string, height: string } { width: ‘400px’, height: ‘700px’ } UI will take whole screen to render.UI will be set to width and height. Width and height are string - example '500px', '100%', '50vw', …
backgroundColor string #927263 Default background color.
backgroundImage string null Default background image. It has to be url of background image. If both backgroundColor and backgroundImages are set, backgroundImage has higher priority.
backgroundImageBlur number 0 Default blur of added background image.
imageAverageColorOpacity number (float) 0.5 In kiosk mode can be image added to the bot response. Background around this image is calculated as average color of this image. And with this property you can set opacity of this background. It has to be number between 0 - 1.
animationSpeed number 500 Speed of animations (hiding texts, scrolling, …) - in milliseconds.
backgroundSimpleAnimation boolean true First layer of animations over background - turns on/off simple animation of main gradient on the background.
backgroundAdvancedAnimationParticlesCount number 5 Second level of animations over background - value can be 0-20 - count of animated objects added to the background with random opacity.
userMessageBackgroundColor string rgba(255, 255, 255, .3) Default background color of user message in kiosk gui mode.
userMessageTextColor string #ffffff Default color of user message.
userMessageTextOutlineColor string rgba(0, 0, 0, .5) Default color of outline of user message. Outline is visible only in kiosk gui mode with avatar enabled.
botMessageBackgroundColor string rgba(0, 0, 0, .4) Default background color of bot message in kiosk gui mode.
botMessageTextColor string #ffffff Default color of bot message.
botMessageTextOutlineColor string rgba(0, 0, 0, .5) Default color of outline of bot message. Outline is visible only in kiosk gui mode with avatar enabled.
textInputEnabled boolean true Displays input for messages - turns on/off input for user messages and buttons for interaction (removes all buttons).
reverseAvatarOrder boolean false Displays avatar in reverse order in ui. Avatar is displayed on the bottom side of the widget. Available only in chat gui mode.
collapsable boolean true UI will be rendered into overlayer fixed to the bottom of the page. By default is collapsed. It will use width and height of widgetSize. Fullscreen mode is not allowed in this case.
collapsed boolean true Setting for collapsable mode. It is allowing to expend/collapse BotUI widget on init.

Examples

Chat mode collapsable (expanded)

Example below shows how to add client bot application in chat mode into page as a collapsable window. 

initFSClientBot({
    botKey: '60353867bbc21e2bef56faaf',
    collapsable: true,
    collapsed: true,
    guiMode: 'chat',
    backgroundImage: 'https://core.flowstorm.ai/file/assets/images/TTP/promethist-background-brown.png',
    textInputEnabled: true,
})

Chat mode filling custom element

Example below shows how to add client bot application in chat mode into prepared element on page. In this case you have to add property elementId and prepare element with this id in yout html. Then you have to add to the parent element width and height and set widgetSize properies height and width to 100%. 

<div class="d-flex h-100">
    <div class="p-2 flex-fill bg-col1"></div>
    <div class="p-2" style="height: 100vh; width: 600px">
        <div id="myCustomElementId"></div>
    </div>
</div>
initFSClientBot({
    elementId: 'myCustomElementId',
    botKey: '60353867bbc21e2bef56faaf',
    collapsable: false,
    widgetSize: {
        width: '100%',
        height: '100%',
    },
    guiMode: 'chat',
    backgroundImage: 'https://core.flowstorm.ai/file/assets/images/TTP/promethist-background-brown.png',
    textInputEnabled: true,
})

Kiosk mode collapsable without text input (collapsed)

Example below shows how to add client bot in kiosk mode application into page as a collapsable window. Bot is now collapsed and user has to click to the icon to expand it. 

initFSClientBot({
    botKey: '60353867bbc21e2bef56faaf',
    collapsable: true,
    collapsed: true,
    guiMode: 'kiosk',
    backgroundImage: 'https://core.flowstorm.ai/file/assets/images/TTP/promethist-background-brown.png',
    textInputEnabled: false,
})

Kiosk mode filling custom element without text input

Example below shows how to add client bot application in kiosk mode into prepared element on page. In this case you have to add property elementId and prepare element with this id in yout html. Then you have to add to the parent element width and height and set widgetSize properies height and width to 100%. 

<div class="d-flex h-100">
    <div class="p-2 flex-fill bg-col1"></div>
    <div class="p-2" style="height: 100vh; width: 600px">
        <div id="myCustomElementId"></div>
    </div>
</div>
initFSClientBot({
    elementId: 'myCustomElementId',
    botKey: '60353867bbc21e2bef56faaf',
    collapsable: false,
    widgetSize: {
        width: '100%',
        height: '100%',
    },
    guiMode: 'kiosk',
    backgroundImage: 'https://core.flowstorm.ai/file/assets/images/TTP/promethist-background-brown.png',
    textInputEnabled: false,
})

Kiosk mode filling custom element with text input

Same as example above, only difference is in property textInputEnabled. 

initFSClientBot({
    elementId: 'myCustomElementId',
    botKey: '60353867bbc21e2bef56faaf',
    collapsable: false,
    widgetSize: {
        width: '100%',
        height: '100%',
    },
    guiMode: 'kiosk',
    backgroundImage: 'https://core.flowstorm.ai/file/assets/images/TTP/promethist-background-brown.png',
    textInputEnabled: true,
})

Kiosk mode filling whole screen with text input

initFSClientBot({
    botKey: '60353867bbc21e2bef56faaf',
    collapsable: false,
    fullScreen: true,
    guiMode: 'kiosk',
    backgroundImage: 'https://core.flowstorm.ai/file/assets/images/TTP/promethist-background-brown.png',
    textInputEnabled: true,
})