@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

Sample .env

SERVER_URL=
ACCOUNT_KEY=
THEME=normal