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.

caution

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}
		/>
	);
};

render(<MyChatBot/>)

Result