Skip to main content

Events

This page documents all available events emitted by the chatbot that may be listened on. Note that events are an opt-in feature (i.e. it is disabled by default), as they should not be required for a vast majority of users. Events should be enabled for the following reasons:

  • You wish to execute certain application logic on specific chatbot events (e.g. log messages from chatbot)
  • You are using plugins that relies on events emitted by the chatbot (you should refer to the plugin documentation for what events are needed)
Tip

Before adding your own listeners with custom logic for events, it may be helpful to lookup existing plugins in case there's already a solution out there (e.g. rcb-input-validator-plugin).

Overview

Below is a list of available events with a brief description for each one. You can use these events to listen for and respond to key interactions in the chatbot.

NameDescription
RcbChangePathEventEmitted when the chatbot changes its conversation path.
RcbChunkStreamMessageEventEmitted when a chunk of a streamed message is received.
RcbDismissToastEventEmitted when a toast message is dismissed.
RcbLoadChatHistoryEventEmitted when the chat history is loaded.
RcbPostInjectMessageEventEmitted after a message is injected into the chat.
RcbPreInjectMessageEventEmitted before a message is injected into the chat.
RcbRemoveMessageEventEmitted when a message is removed from the chat.
RcbShowToastEventEmitted when a toast message is displayed.
RcbStartStreamMessageEventEmitted when the chatbot starts streaming a message.
RcbStopStreamMessageEventEmitted when the chatbot stops streaming a message.
RcbToggleAudioEventEmitted when the audio is toggled on or off.
RcbToggleChatWindowEventEmitted when the chat window is toggled open or closed.
RcbToggleNotificationsEventEmitted when notifications are toggled on or off.
RcbToggleVoiceEventEmitted when the voice feature is toggled on or off.
RcbUserSubmitTextEventEmitted when a user submits text in the chat.
RcbUserUploadFileEventEmitted when a user uploads a file.
RcbTextAreaChangeValueEventEmitted when the text area value is changed.
RcbPostLoadChatBotEventEmitted after the chatbot is loaded.
RcbPreLoadChatBotEventEmitted before the chatbot is loaded.

Event Details

Events emitted by the chatbot provide the following details accessible via event.details:

NameTypeDescription
botIdstringUniquely identifies the chatbot the event is emitted from.
currPathstringRepresents the current path of the user.
prevPathstringRepresents the previous path of the user.

In addition, all events also contain event-specific data that are accessible via event.data. You may manipulate the data directly which will be reflected in the result of the event (e.g. modifying the content of a RcbPreMessageInjectEvent will modify the message sent).

Below is a detailed description of each event and how to use them.


RcbChangePathEvent

Description

Emitted when the chatbot changes its conversation path.

Note

  • Requires settings.event.rcbChangePath to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
prevPathstringRepresents the previous path of the user.
currPathstringRepresents the current path of the user.
nextPathstringRepresents the next path the user is changing to.

Code Example

import { useEffect } from "react";
import { RcbChangePathEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handlePathChange = (event: RcbChangePathEvent) => {
// handle the path change event
};

window.addEventListener("rcb-change-path", handlePathChange);
return () => {
window.removeEventListener("rcb-change-path", handlePathChange);
};
}, []);

return (
<ExampleComponent/>
)
};

RcbChunkStreamMessageEvent

Description

Emitted when a chunk of a streamed message is received.

Note

  • Requires settings.event.rcbChunkStreamMessage to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
messageMessageThe message chunk sent to the current stream message.

Code Example

import { useEffect } from "react";
import { RcbChunkStreamMessageEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleChunkStreamMessage = (event: RcbChunkStreamMessageEvent) => {
// handle the chunk stream message event
};

window.addEventListener("rcb-chunk-stream-message", handleChunkStreamMessage);
return () => {
window.removeEventListener("rcb-chunk-stream-message", handleChunkStreamMessage);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbDismissToastEvent

Description

Emitted when a toast message is dismissed.

Note

  • Requires settings.event.rcbDismissToast to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
toastToastThe toast being dismissed.

Code Example

import { useEffect } from "react";
import { RcbDismissToastEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleDismissToast = (event: RcbDismissToastEvent) => {
// handle the dismiss toast event
};

window.addEventListener("rcb-dismiss-toast", handleDismissToast);
return () => {
window.removeEventListener("rcb-dismiss-toast", handleDismissToast);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbLoadChatHistoryEvent

Description

Emitted when the chat history is loaded.

Note

  • Requires settings.event.rcbLoadChatHistory to be set to true.
  • Event is preventable with event.preventDefault().

Data

None

Code Example

import { useEffect } from "react";
import { RcbLoadChatHistoryEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleLoadChatHistory = (event: RcbLoadChatHistoryEvent) => {
// handle the load chat history event
};

window.addEventListener("rcb-load-chat-history", handleLoadChatHistory);
return () => {
window.removeEventListener("rcb-load-chat-history", handleLoadChatHistory);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbPostInjectMessageEvent

Description

Emitted after a message is injected into the chat.

Note

  • Requires settings.event.rcbPostInjectMessage to be set to true.

Data

NameTypeDescription
messageMessageThe message already sent into the chat (cannot be cancelled).

Code Example

import { useEffect } from "react";
import { RcbPostInjectMessageEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handlePostInjectMessage = (event: RcbPostInjectMessageEvent) => {
// handle the post inject message event
};

window.addEventListener("rcb-post-inject-message", handlePostInjectMessage);
return () => {
window.removeEventListener("rcb-post-inject-message", handlePostInjectMessage);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbPreInjectMessageEvent

Description

Emitted before a message is injected into the chat.

Note

  • Requires settings.event.rcbPreInjectMessage to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
messageMessageThe message being sent into the chat.

Code Example

import { useEffect } from "react";
import { RcbPreInjectMessageEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handlePreInjectMessage = (event: RcbPreInjectMessageEvent) => {
// handle the pre inject message event
};

window.addEventListener("rcb-pre-inject-message", handlePreInjectMessage);
return () => {
window.removeEventListener("rcb-pre-inject-message", handlePreInjectMessage);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbRemoveMessageEvent

Description

Emitted when a message is removed from the chat.

Note

  • Requires settings.event.rcbRemoveMessage to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
messageMessageThe message being removed from the chat.

Code Example

import { useEffect } from "react";
import { RcbRemoveMessageEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleRemoveMessage = (event: RcbRemoveMessageEvent) => {
// handle the remove message event
};

window.addEventListener("rcb-remove-message", handleRemoveMessage);
return () => {
window.removeEventListener("rcb-remove-message", handleRemoveMessage);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbShowToastEvent

Description

Emitted when a toast message is displayed.

Note

  • Requires settings.event.rcbShowToast to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
toastToastThe toast being displayed.

Code Example

import { useEffect } from "react";
import { RcbShowToastEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleShowToast = (event: RcbShowToastEvent) => {
// handle the show toast event
};

window.addEventListener("rcb-show-toast", handleShowToast);
return () => {
window.removeEventListener("rcb-show-toast", handleShowToast);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbStartStreamMessageEvent

Description

Emitted when the chatbot starts streaming a message.

Note

  • Requires settings.event.rcbStartStreamMessage to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
messageMessageThe initial message chunk triggering the start of a stream.

Code Example

import { useEffect } from "react";
import { RcbStartStreamMessageEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleStartStreamMessage = (event: RcbStartStreamMessageEvent) => {
// handle the start stream message event
};

window.addEventListener("rcb-start-stream-message", handleStartStreamMessage);
return () => {
window.removeEventListener("rcb-start-stream-message", handleStartStreamMessage);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbStopStreamMessageEvent

Description

Emitted when the chatbot stops streaming a message.

Note

  • Requires settings.event.rcbStopStreamMessage to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
messageMessageThe final outcome from the content sent when stream ends.

Code Example

import { useEffect } from "react";
import { RcbStopStreamMessageEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleStopStreamMessage = (event: RcbStopStreamMessageEvent) => {
// handle the stop stream message event
};

window.addEventListener("rcb-stop-stream-message", handleStopStreamMessage);
return () => {
window.removeEventListener("rcb-stop-stream-message", handleStopStreamMessage);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbToggleAudioEvent

Description

Emitted when the audio is toggled on or off.

Note

  • Requires settings.event.rcbToggleAudio to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
currStatebooleanValue is true if audio is currently toggled on, false otherwise.
newStatebooleanThe new state being toggled to, which is the opposite of currState.

Code Example

import { useEffect } from "react";
import { RcbToggleAudioEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleToggleAudio = (event: RcbToggleAudioEvent) => {
// handle the toggle audio event
};

window.addEventListener("rcb-toggle-audio", handleToggleAudio);
return () => {
window.removeEventListener("rcb-toggle-audio", handleToggleAudio);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbToggleChatWindowEvent

Description

Emitted when the chat window is toggled open or closed.

Note

  • Requires settings.event.rcbToggleChatWindow to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
currStatebooleanValue is true if chat window is currently open, false otherwise.
newStatebooleanThe new state being toggled to, which is the opposite of currState.

Code Example

import { useEffect } from "react";
import { RcbToggleChatWindowEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleToggleChatWindow = (event: RcbToggleChatWindowEvent) => {
// handle the toggle chat window event
};

window.addEventListener("rcb-toggle-chat-window", handleToggleChatWindow);
return () => {
window.removeEventListener("rcb-toggle-chat-window", handleToggleChatWindow);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbToggleNotificationsEvent

Description

Emitted when notifications are toggled on or off.

Note

  • Requires settings.event.rcbToggleNotifications to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
currStatebooleanValue is true if notifications is currently toggled on, false otherwise.
newStatebooleanThe new state being toggled to, which is the opposite of currState.

Code Example

import { useEffect } from "react";
import { RcbToggleNotificationsEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleToggleNotifications = (event: RcbToggleNotificationsEvent) => {
// handle the toggle notifications event
};

window.addEventListener("rcb-toggle-notifications", handleToggleNotifications);
return () => {
window.removeEventListener("rcb-toggle-notifications", handleToggleNotifications);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbToggleVoiceEvent

Description

Emitted when the voice feature is toggled on or off.

Note

  • Requires settings.event.rcbToggleVoice to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
currStatebooleanValue is true if voice is currently toggled on, false otherwise.
newStatebooleanThe new state being toggled to, which is the opposite of currState.

Code Example

import { useEffect } from "react";
import { RcbToggleVoiceEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleToggleVoice = (event: RcbToggleVoiceEvent) => {
// handle the toggle voice event
};

window.addEventListener("rcb-toggle-voice", handleToggleVoice);
return () => {
window.removeEventListener("rcb-toggle-voice", handleToggleVoice);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbUserSubmitTextEvent

Description

Emitted when a user submits text in the chat.

Note

  • Requires settings.event.rcbUserSubmitText to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
userInputstringThe text input that user sent.

Code Example

import { useEffect } from "react";
import { RcbUserSubmitTextEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleUserSubmitText = (event: RcbUserSubmitTextEvent) => {
// handle the user submit text event
};

window.addEventListener("rcb-user-submit-text", handleUserSubmitText);
return () => {
window.removeEventListener("rcb-user-submit-text", handleUserSubmitText);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbUserUploadFileEvent

Description

Emitted when a user uploads a file.

Note

  • Requires settings.event.rcbUserUploadFile to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
filesFileListThe list of files uploaded by the user.

Code Example

import { useEffect } from "react";
import { RcbUserUploadFileEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleUserUploadFile = (event: RcbUserUploadFileEvent) => {
// handle the user upload file event
};

window.addEventListener("rcb-user-upload-file", handleUserUploadFile);
return () => {
window.removeEventListener("rcb-user-upload-file", handleUserUploadFile);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbTextAreaChangeValueEvent

Description

Emitted when a user uploads a file.

Note

  • Requires settings.event.rcbTextAreaChangeValue to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
currValuestringThe value in text area being changed to by the user.
prevValuestringThe previous value in text area before being changed by the user.

Code Example

import { useEffect } from "react";
import { RcbTextAreaChangeValueEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handleTextAreaChangeValue = (event: RcbTextAreaChangeValueEvent) => {
// handle the text area change value event
};

window.addEventListener("rcb-text-area-change-value", handleTextAreaChangeValue);
return () => {
window.removeEventListener("rcb-text-area-change-value", handleTextAreaChangeValue);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbPostInjectMessageEvent

Description

Emitted after the chatbot is loaded.

Note

  • Requires settings.event.rcbPostLoadChatBot to be set to true.

Data

NameTypeDescription
flowFlowThe flow passed to the chatbot.
settingsSettingsThe settings passed to the chatbot.
stylesStylesThe styles passed to the chatbot.
themesTheme | Array<Theme>The themes passed to the chatbot.
pluginsArray<Plugins>The plugins passed to the chatbot.

Code Example

import { useEffect } from "react";
import { RcbPostLoadChatBotEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handlePostLoadChatBot = (event: RcbPostLoadChatBotEvent) => {
// handle the post load chatbot event
};

window.addEventListener("rcb-post-load-chatbot", handlePostLoadChatBot);
return () => {
window.removeEventListener("rcb-post-load-chatbot", handlePostLoadChatBot);
};
}, []);

return (
<ExampleComponent/>
);
};

RcbPreInjectMessageEvent

Description

Emitted before the chatbot is loaded.

Note

  • Requires settings.event.rcbPreLoadChatBot to be set to true.
  • Event is preventable with event.preventDefault().

Data

NameTypeDescription
flowFlowThe flow passed to the chatbot.
settingsSettingsThe settings passed to the chatbot.
stylesStylesThe styles passed to the chatbot.
themesTheme | Array<Theme>The themes passed to the chatbot.
pluginsArray<Plugins>The plugins passed to the chatbot.

Code Example

import { useEffect } from "react";
import { RcbPreLoadChatBotEvent } from "react-chatbotify";

const MyComponent = () => {
useEffect(() => {
const handlePreLoadChatBot = (event: RcbPreLoadChatBotEvent) => {
// handle the pre load chatbot event
};

window.addEventListener("rcb-pre-load-chatbot", handlePreLoadChatBot);
return () => {
window.removeEventListener("rcb-pre-load-chatbot", handlePreLoadChatBot);
};
}, []);

return (
<ExampleComponent/>
);
};