←back to tutorials

Interactive Form with ChatBotKit Widget API

Learn how to build an interactive form with ChatBotKit Widget API. This tutorial covers embedding the widget, implementing a form, and submitting data to the widget.

This tutorial will cover building a form to gather user data and submitting the data to the ChatBotKit Widget API.

Let's start by setting up the chat widgets according to the procedure outlined in the widget documentation.

Embedding the ChatBotKit Widget

First, we'll integrate the ChatBotKit widget on our website. This is achieved by embedding two lines of JavaScript code on your site. The specific code will be provided in your ChatBotKit account and it'll look like the sample below:

<script src="https://static.chatbotkit.com/integrations/widget/v2.js" data-widget="{YOUR_WIDGET_ID}"></script>

Please replace {YOUR_WIDGET_ID} with your actual widget ID that is generated by the ChatBotKit platform.

Implementing a Form

First, let's create an HTML form to collect data from our users. In this example, we'll create boundaries for Name and Email.

<html>
<head>
    <title>ChatBotKit Form</title>
    <script src="https://static.chatbotkit.com/integrations/widget/v2.js" data-widget="{YOUR_WIDGET_ID}"></script>
</head>
<body>
    <form id="userForm">
        <label for="userName">Name:</label><br>
        <input type="text" id="userName" name="userName"><br>
        <label for="userEmail">Email:</label><br>
        <input type="text" id="userEmail" name="userEmail">
        <input type="submit">
    </form>
</body>
</html>

Submitting the Form to ChatBotKit Widget

To submit the form to the ChatBotKit widget we need to add an event listener to our form. When the form is submitted we will prevent the default submit action, gather the information from our form and use ChatBotKit's sendMessage API to send our data.

First, we need to obtain a reference to our widget. We will use a method of the JavaScript Document object, getElementById, which will get the widget using its unique {YOUR_WIDGET_ID}.

Here's the completed JavaScript code:

This script will take the user's input from the form and submit it to the chatbot as a message.

That's it! You've successfully integrated a user form with ChatBotKit widget. Here is the final code:

<html>
<head>
    <title>ChatBotKit Form</title>
    <script src="https://static.chatbotkit.com/integrations/widget/v2.js" data-widget="{YOUR_WIDGET_ID}"></script>
</head>
<body>
    <form id="userForm">
        <label for="userName">Name:</label><br>
        <input type="text" id="userName" name="userName"><br>
        <label for="userEmail">Email:</label><br>
        <input type="text" id="userEmail" name="userEmail">
        <input type="submit">
    </form>
		<script>
		    // Acquire reference to our form
				const form = document.getElementById("userForm");
				
		    // Add an event listener to the form
		    form.addEventListener('submit', function(event) {
		        event.preventDefault();
						
				    // Acquire reference to ChatBotKit widget
				    const widget = document.getElementById("chatbotkit-widget-{YOUR_WIDGET_ID}");
						
		        const userName = document.getElementById("userName").value;
		        const userEmail = document.getElementById("userEmail").value;
						
		        // Send data obtained from the form to the widget using the sendMessage method
		        widget.sendMessage(`Name: ${userName}, Email: ${userEmail}`);
		    });
		</script>
</body>
</html>

Remember to replace {YOUR_WIDGET_ID} with your actual widget ID. Please note that you also have to ensure that the form and the widgets exist on the webpage before the script runs. Either place the script at the end of the <body> tag or use the DOMContentLoaded event.

This tutorial covers the basics. You will likely want to provide a more interactive and complex experience for the users depending on the context and the bot's capabilities. Happy coding!

ChatBotKitchat widgetAPIJavaScriptclient-sideform