Formulario interactivo con ChatBotKit Widget API
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!