Web
How to integrate in your Web.
Introduction
Once you've finished instructing your AI Agent, it's time to deploy it using one of our Integrations. In this tutorial, we'll show you step-by-step how to integrate your AI Agent into a webpage and customize its appearance to your liking beforehand. Once integrated, it can be deployed as a chatbot or as a floating bubble in the bottom right, depending on your preference.
1. Preliminary Step: Customizing the Agent's Appearance
Once integrated, you won't be able to make style changes unless you repeat the web integration process. Therefore, we recommend defining your AI Agent's style first.
In the Dashboard, go to the Integrations section and select the Basic option.
Here you can choose between different Basic Integrations: Web, Telegram, and WhatsApp. In this tutorial, we'll focus on the Web, but you can refer to different tutorials for integrating them into Telegram or WhatsApp.
Click on "Edit Style" in the top right corner of the Web channel.
Here you'll find various options to customize your Agent's appearance: logo, name, color codes, etc. You can adapt it to your Website's identity and preview it in the chatbox on the right.
Don't forget to click "Save changes" before exiting.
2. Configuration and Integration
Finally, once the customization changes are saved, go back and click on "Settings".
Next, you will need to choose between Base Agente or Floating Bubble.
Base Agent Code: your Agent will be deployed as a chatbox.
Floating Bubble Variant: your Agent will be deployed as a bubble that expands and collapses a chatbox.
Important: If you haven't finished instructing your AI Agent, you won't be able to click on "Integrate".
Copy the code displayed on the screen and paste it at the end of <BODY> in your Website's code.
With this, you've completed the Basic Integration on your Website.
Last updated