Custom Button

The following is an example for adding a custom button to the chatbot header that opens up an alert.

Live Editor

const MyChatBot = () => {
	const flow={
		start: {
			message: "Click on the custom button in the header!"
		}
	}
	
	const settings = {
		general: {
			embedded: true
		},
		chatHistory: {
			storageKey: "example_custom_button"
		},
		header: {
			// note: if features are disabled, their buttons will not show up even if specified here
			buttons: [<button onClick={() => alert("You clicked the custom button!")}>Click me!</button>, Button.NOTIFICATION_BUTTON]
		}
		
	}
	return (
		<ChatBot settings={settings} flow={flow}/>
	);
};

render(<MyChatBot/>)

Result

Loading...