Web chat widget

We provide an easy to use webclient that can be placed on a website.

Embed

You can add it by embedding a simple javascript code on your web page. Then you'll have live chat with chatbot functionality on your website.

Here is a simple example showing the embed coee

<html>
    <head>
    </head>
    <body>
        <script src="https://widget.flow.ai/w/Aasdasdada132424234==/flow-webclient-1.1.2.min.js"></script>
    </body>
</html>

Advanced topics

There are a some advanced customisation options for the web client that can be applied

Trigger event

Automatically triggering an event is especially useful for showing a welcome message or pushing a dialog into a specific flow when a user opens the webclient.

An event can be triggered by adding a global javascript variable called __flowai_webclient_autoTriggerEvent. The following example will automatically trigger the event SHOW_WELCOME whenever a user opens the webclient for the first time.

Example

<script type="text/javascript">
window.__flowai_webclient_autoTriggerEvent = 'SHOW_WELCOME';
</script>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

Trigger message

This works pretty similair like the triggering of an event. The big difference is that a message would be send as if the user did it him or herself.

Example

<script type="text/javascript">
window.__flowai_webclient_autoMessage = '3 pizza hawaii please';
</script>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

Auto open

Automatically open the webclient when it's loaded on the page by setting __flowai_webclient_autoOpen to true.

Example

<script type="text/javascript">
window.__flowai_webclient_autoOpen = true;
</script>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

Alternative button

We have an option you can use a custom button to toggle the webclient. Provide a query selector that matches the button or buttons.

Example

<script type="text/javascript">
window.__flowai_webclient_triggerSelector = '#alternativeButton';
</script>
<a href="#" id="alternativeButton">Click me!</a>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

Hide button

You can hide the default button by setting the __flowai_webclient_hideButton to true

Example

<script type="text/javascript">
window.__flowai_webclient_hideButton = true;
</script>

Session storage

By default the widget stores messages accross browser sessions. By setting __flowai_webclient_storage to session you can change this behavior. When set to session all messages are removed when a user closes the web browser.

Example

<script type="text/javascript">
window.__flowai_webclient_storage = 'session';
</script>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

Sending metadata

The Flow.ai contextual AI engine will find and use entities within flows. Sometimes you might already have certain information available inside the front end the AI could use. You can send this data by setting __flowai_webclient_params.

The format of the params is identical to the way you receive data within cloud code or a webhook.

Example

<script type="text/javascript">
window.__flowai_webclient_params = {
  departure_city: [{
    value: 'Amsterdam'
  }],
  destination_city: [{
    value: 'NYC'
  }]
}
</script>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

results matching ""

    No results matching ""