Botfuel webchat client designed to work with bots made with Botfuel Bot SDK. For a more detailed documentation, see https://app.botfuel.io/docs.

We provide a HTTP poll fallback if websockets are not supported by the browser.

<script> tag using CDN

jsDelivr is a global CDN delivery for JavaScript libraries.

To include the latest release:

<script src="https://cdn.jsdelivr.net/npm/botfuel-webchat-client"></script>

For older releases:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Then add the following script on your page:

BotfuelWebChat.init({
    appToken: '<BOTFUEL_APP_TOKEN>'
});

Note: Register and create an app on https://app.botfuel.io to get a <BOTFUEL_APP_TOKEN>.

For development, you can also provide a custom backend:

BotfuelWebChat.init({
    appToken: '<BOTFUEL_APP_TOKEN>'
    serverUrl: 'http://localhost:7001'
});

We mainly use:

• React.js: UI building library
• Syled-components: CSS-in-JS library for styling React UI components
• Apollo: Execute GraphQL queries and subscriptions to the webchat server (https://webchat.botfuel.io).
• Webpack: development and production builds

To launch a development server, run:

yarn
yarn start

It will launch a webpack dev server.

To build a production optimized for production, run:

yarn build:production

this is useful for testing bundle size or issues that only happen in production. It is executed by the npm publish command (prepublish hook).

To publish package on NPM and jsdelivr, simply bump the version (according to semver) and publish it:

npm version <patch, minor, major>
npm publish

The script will automatically be available on jsdelivr.

By default, webchat-client automatically parses links. Links such as https://www.botfuel.io will appear as clickable anchor tags in messages.

It is possible to display HTML in messages by turning on the parseHTML option. By default it’s turned off. Dangerous HTML tags are filtered.

We use Fragment on the payload field in the Message query in the WebChat/index.jsx file because it can be of several types: Text, Table, Actions, Postback, Quickreplies, BotAction and Images. The type of payload define which fields are available on it. These types are defined server-side.

In the same file, we use optimiticResponse (Apollo) when sending the use message so we immediately update UI with the message sent instead of waiting for the server’s response. This provides a better UI experience where the user can immediately see the message he typed and entered.

See the LICENSE file.