@festkit/embeddable-chat NPM

Festkit Embeddable Chat

Usage Screenshot

Installation

Embeddable Chat is available as an NPM package.

To install:

yarn add @festkit/embeddable-chat

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).