Install a chat widget on your website

Botfront provides a feature-rich chat widget you can use on your website. The Rasa Webchat you can enrich your conversations with:

• Text, buttons, and quick replies
• Images
• Carousels
• Typing indicator

Install the Chat Widget on your website. You will find installation instructions by following the link. It can be installed either as a React Component or as a plain javascript snippet.

Configure the channel

This channel is configured by default when you run Botfront locally with the CLI.

1. Go to Settings -> Credentials
2. If you install Botfront on a remote server. set base_url to the public url where the Rasa API can be reached.

rasa_addons.core.channels.webchat.WebchatInput:
  session_persistence: true
  base_url: "https://your.rasa.host:5005" # set this to the Rasa service host
  socket_path: "/socket.io/"

Page specific intro message

You can also specify different intros/welcome messages depending on the page the conversation starts at. For example, if a user opens the bot on a pricing page, you can set a different intro than the homepage in the initPayload:

WebChat.default.init({
  ...
  initPayload: '/get_started_home',
  ...
})

WebChat.default.init({
  ...
  initPayload: '/get_started_pricing',
  ...
})

All you have to do is create 2 different stories, one starting with * get_started_home and another one with * get_started_pricing. You can use the Intro Stories feature to group these stories and easily test them in Botfront