Skip to main content

Sensitive Input

The following is an example showing how you may allow markup syntax (e.g. <br/>, <b>, <hr/>) in user chat bubbles and bot chat bubbles.


Note that since this uses the dangerouslySetInnerHTML attribute, you should perform the necessary validation beforehand on the message strings.

Live Editor
const MyChatBot = () => {
	const flow={
		start: {
			message: "<b>Hey there, I am a bolded sentence!</b> Try typing a bolded message to me!",
			path: "reply"
		reply: {
			message: "Interesting, let's try again?",
			options: ["Try again"],
			chatDisabled: true,
			path: "start"
	return (
		<ChatBot options={{theme: {embedded: true}, chatHistory: {storageKey: "example_markup_message"},
			userBubble: {dangerouslySetInnerHtml: true},
			botBubble: {dangerouslySetInnerHtml: true}}} flow={flow}