Festkit Embeddable Chat

Installation

Embeddable Chat is available as an NPM package.

To install:

yarn add @festkit/embeddable-chat

or

npm install @festkit/embeddable-chat

Usage

Import the setup function and (optionally) the setRoom function:

import { FKChat, setRoom } from '@festkit/embeddable-chat'

To set up the widget:

FKChat('#chatBox', {
  sessionToken: '<your session token>',
  user: {
    name: '<the users name>', // to be displayed on the chat message
    uid: '<the users id>' // the unique id for the user.
  }
})

The widget doesn't have any height or width of its own and expands to fill the container element. Also, the widget is transparent so if you're overlaying the widget over some content, you will need to set a background color or gradient on its container element.

As the user navigates around in your single-page app, you may want to update their room. To do this, simply use the setRoom function:

  setRoom('Rock Arena')

You can generate a session token for your user by making a request to https://embeddable-chat.vercel.app/token with your Access Key and Secret.

Getting a session token

To get a session token, make the following request from your backend:

POST https://embeddable-chat.vercel.app/token

Headers:

|Header|Value| |------|-----| |Accept|application/json| |Content-Type|application/json|

Body:

{
  "key": "<your access key>",
  "secret": "<your access secret>",
  "uid": "<the user's unique ID on your system>"
}

Reach out to us to get an Access Key and Secret for your project.

API

FKChat

| Option | Type | Description | |---------|---------------------------|-------------| |element| HTMLElement or CSS selector string | The container in which the chat widget should be rendered. | |options| FKChatOptions | A set of config options (see writeup below). |

FKChatOptions

| Option | Type | Description | |-------------|----------------------------------------|-------------| |accessKey| string | The Access Key provided to you by Clapstream. | |sessionToken| string | The session token generated by calling https://embeddable-chat.vercel.app/token. | |presentation| string | The kind of design to use for showing chat messages. Can be set to cards or compact (default: cards). | |room| string | The initial room to show on the user's chat messages (default: Home). | |theme| string | Is the widget being shown against a dark background or a light background? (Default: light). | |user| UserDetails | The details for the logged in user (see writeup below). |

UserDetails

| Option | Type | Description | |-------------|----------------------------------------|-------------| |name| string | The name of the logged in user, shown on chat messages. | |uid| string | The unique identifier for the logged in user. |

setRoom

| Option | Type | Description | |-------------|----------------------------------------|-------------| |name| string | The name of the room to be shown on the user's chat messages. |

License

You can check out the full license here

This project is licensed under the terms of the ISC license.