@xapp/chat-widget

This project was bootstrapped with Create React App.

Available Scripts

The widget communicates with an agent endpoint. There agents and visitors. The widget is a visitor. The widget can talk to an agent in two ways: either directly connecting to a Xapp skill endpoint or via a Chat Server.

The Chat server is a message proxy server that can connect many types of agent and visitor endpoint.

To connect directly to a skill run yarn start-with-dev-skill

To go through the chat server run yarn start-with-dev-server

Configuration

The required parameters are configured in config/config.ts. Use the REACT_APP_ENV to point to a test setup. See the package.json for details.

Install

npm i @xapp/chat-widget redux-thunk redux react-redux --production

Usage

import { ChatWidget } from "@xapp/chat-widget";
import "@xapp/chat-widget/dist/index.css";

function RenderWidget() {
    return <ChatWidget accountKey={"123"} />;
}

Styling

Use theme prop to style widget

const theme: WidgetTheme = {};
return <ChatWidget accountKey={"123"} theme={theme} />;

Local Development

Configuration at Build

You can use a .env to configure the widget during the build process. This will inject the configuration parameters to the field.

When putting together the .env file, it is important to understand difference between _ and - where _ will create a new object while - will camelcase the word.

Sample .env

SERVER_URL=
ACCOUNT_KEY=
THEME=normal