Create web UIs for Tock chatbots
Include react, react-dom and tock-react-kit in an HTML page.
React must be at least version 16.8 (must have hooks)
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script
crossorigin
src="https://unpkg.com/tock-react-kit@latest/build/tock-react-kit.umd.js"
></script>Render your app in an element:
<body>
<div id="chat"></div>
<script>
TockReact.renderChat(document.getElementById('chat'), '<TOCK_BOT_API_URL>');
</script>
</body>You can also use it as a module (i.e Create React App) and bundle it:
npm i tock-react-kit
import { renderChat } from 'tock-react-kit';
renderChat(document.getElementById('chat'), '<TOCK_BOT_API_URL>');Use the third argument of renderChat to style your app:
renderChat(document.getElementById('chat'), '<TOCK_BOT_API_URL>', 'referralParameter', {
fontFamily: 'monospace',
fontSize: '24px',
botColor: 'rebeccapurple',
userColor: 'limegreen',
borderRadius: '0px',
styles: {
chat: `background: #fff;`,
},
});If the chat does not suit your needs you can also use the components separately.
Renders an entire chat in a target element.
| Argument name | Type | Description |
|---|---|---|
element |
Element |
Target element where the chat will be rendered |
tockBotApiUrl |
string |
URL to the Tock Bot REST API |
referralParameter |
string |
Optional referal parameter |
theme |
TockTheme |
Optional theme object |
options |
TockOptions |
Optional options object |
Hook that provides chat history and methods to communicate with the Tock Bot. It must be used alongside with TockContext. Returns a useTock interface.
| Argument name | Type | Description |
|---|---|---|
tockBotApiUrl |
string |
URL to the Tock Bot REST API |
A TockTheme can be used as a value of a ThemeProvider of emotion-theming (bundled with the library) or as a third argument of renderChat.
| Property name | Type | Description |
|---|---|---|
fontFamily |
string? |
CSS font-family used in the chat |
fontSize |
string? |
CSS base font-size used in the chat |
userColor |
string? |
CSS color used mainly for the user's chat speech balloons |
botColor |
string? |
CSS color used mainly for the bot's chat speech balloons |
cardColor |
string? |
CSS background color for cards |
inputColor |
string? |
CSS background color for the main user text input |
borderRadius |
string? |
Border radius used in various chat components |
conversationWidth |
string? |
CSS max-width of the chat interface |
styles |
TockThemeStyles? |
Object allowing further styling (see below) |
| Property name | Type | Description |
|---|---|---|
card |
string? |
Additional CSS styles for cards (overrides base styles) |
carouselItem |
string? |
Additional CSS styles for carousel cards container (overrides base styles) |
carouselArrow |
string? |
Additional CSS styles for carousel scrolling arrows (overrides base styles) |
messageBot |
string? |
Additional CSS styles for the bot's speech balloons (overrides base styles) |
messageUser |
string? |
Additional CSS styles for the user's speech balloons (overrides base styles) |
quickReply |
string? |
Additional CSS styles for the quick reply buttons (overrides base styles) |
chat |
string? |
Additional CSS styles for the chat container (overrides base styles) |
A TockTheme can be used as a value of a ThemeProvider of emotion-theming (bundled with the library) or as a third argument of renderChat.
| Property name | Type | Description |
|---|---|---|
timeoutBetweenMessage |
number? |
Timeout between message |
widgets |
any? |
Custom display component |
Tock web connector can send custom messages :
{
data: {
departure: 'Paris',
arrival: 'Nice'
},
type: 'TrainCardWidget',
}
You can define your own display components for this custom message :
import React from 'react';
import { renderChat } from 'tock-react-kit';
const TrainCardWidget = ({departure, arrival}) => {
return (
<div>
<p>Departure: {departure}</p>
<p>Arrival: {arrival}</p>
</div>
);
};
renderChat(
document.getElementById('chat'),
'<TOCK_BOT_API_URL>',
'referralParameter',
{},
{
widgets: {
TrainCardWidget
}
}
);