Custom Icon

The following is an example for performing user input validation. It leverages on the Input Validator Plugin, which is maintained separately on the React ChatBotify Plugins organization. If you require support with the plugin, please reach out to support on the plugins discord instead.

Live Editor

const MyChatBot = () => {
	// loads input validator plugin to be passed into chatbot
	const plugins = [InputValidator()];

	// example flow for testing validation that age must be a number
	const flow: Flow = {
		start: {
			message: "Hey there, please enter your age!",
			path: "try_again",
			validateInput: (userInput: string) => {
				if (typeof userInput === "string" && !Number.isNaN(Number(userInput))) {
					return {success: true};
				}
				return {success: false, promptContent: "Age must be a number!", promptDuration: 3000, promptType: "error", highlightTextArea: true};
			}
		} as InputValidatorBlock,
		try_again : {
			message: "Nice, you passed the input validation!",
			path: "start",
		}
	}
	
	const settings = {
		general: {
			embedded: true
		},
		chatHistory: {
			storageKey: "example_input_validation"
		}
	}

	return (
		<ChatBot plugins={plugins} settings={settings} flow={flow}/>
	);
};

render(<MyChatBot/>)

Result