Web channel

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

Chat widget

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>

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>

Auto send message

This works pretty similar 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 params

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>

Custom originator

We call the sender of a message the originator.

By default anyone using the web widget has an anonymous originator. You can however send information that allows you to identify a user. This is useful if you are using the web widget in a secure environment where you have identified the user.

Example

<script type="text/javascript">
window.__flowai_webclient_originator = {
  name: "Jane",
  profile: {
    fullName: 'Jane Doe',
    picture: 'https://my-user-images.com/jane.png',
    email: '[email protected]'
  },
  metadata: {
    userName: 'janedoe21',
    userRole: 'admin'
  }
}
</script>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

Event handlers

We provide a __flowai_webclient_events.addListener method to add custom event handlers.

The events that are triggered are similar to the Flow.ai JavaScript SDK.

Reply messages

Whenever Flow.ai sends a reply to the webclient you can subscribe to handle these reply messages.

<script type="text/javascript">
__flowai_webclient_events.addListener('received', function(reply){
  // Called when a reply is received
  // Do anything with the reply
})
</script>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

Sent messages

You can also subscribe to messages that are send by the user. Whenever Flow.ai has received the message it will trigger a delivered handler.

<script type="text/javascript">
__flowai_webclient_events.addListener('send', function(message){
  // Called when a message was sent
})

__flowai_webclient_events.addListener('delivered', function(message){
  // Called when a message was delivered
})
</script>
<script src="https://widget.flow.ai/w/Aasdasdada132424234..."></script>

Other events

__flowai_webclient_events.addListener('error', function(err){
  // Called on error events
})

__flowai_webclient_events.addListener('connected', function(){
  // Handle connected event
})

__flowai_webclient_events.addListener('reconnecting', function(){
  // Handle reconnecting event
})

__flowai_webclient_events.addListener('disconnected', function(){
  // Handle disconnected event
})