Skip to main content

Custom Events

The following is an example for using custom events, which you can listen and respond to for running your application's custom logic. The full list of events can be found here but for this example, we'll only be using the RcbUserSubmitTextEvent. Specifically, we'll block user submissions when the submitted text input contains the character hello. Give it a try below!

Live Editor
const MyChatBot = () => {
	
	const settings = {
		general: {
			embedded: true
		},
		chatHistory: {
			storageKey: "example_custom_events"
		},
		event: {
			// opt-in to rcb user submit text event
			rcbUserSubmitText: true,
			rcbToggleNotifications: true
		}
	};

	React.useEffect(() => {
		// synchronous function
		const handleUserSubmitText = (event: RcbUserSubmitTextEvent) => {
			if (event.data.inputText.toLowerCase().includes("hello")) {
				event.preventDefault();
			}
		};

		// asynchronous function
		const handleToggleNotifications = async (event: RcbToggleNotificationsEvent) => {
			// simulates an async call with a 1 second delay
			const mockApiCall = new Promise((resolve) => setTimeout(() => {
				resolve("Notifications toggled successfully!");
			}, 1000));

			// collect promises for eventual resolution before chatbot logic proceeds
			event.promises.push(mockApiCall);
		}

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

	// example flow
	const flow = {
		start: {
			message: "Hello there! Try saying hello to me!",
			path: "end"
		},
		end: {
			message: "Keep trying!",
			path: "start"
		}
	}
	return (
		<ChatBot settings={settings} flow={flow}/>
	);
};

render(<MyChatBot/>)
Result
Loading...