Tutorials
  • Tutorials
  • Set up your Agent
    • Set Up Your Agent Step by Step.
    • Create your Knowledge Base Step by Step.
    • Connect your RSS or Newsletter
  • Writing Clear and Effective Instructions
  • Integrations
    • Web
    • WhatsApp
    • Email
    • Telegram
    • Wordpress
    • Framer
    • API
    • Shopify
    • Slack
    • Webhook
    • Google Chat
  • Campaings
    • WhatsApp Campaigns
  • Alerts
    • Create an Alert
  • Tools
    • Create a Tool
  • Widgets
    • Web Widgets Documentation
  • Human Intervetion
    • How it works?
  • faq
    • How do I make my subscription payment and manage my invoices?
Powered by GitBook
On this page
  • Introduction
  • 1. Preliminary Step: Customizing the Agent's Appearance
  • 2. Configuration and Integration
  1. Integrations

Web

How to integrate in your Web.

PreviousWriting Clear and Effective InstructionsNextWhatsApp

Last updated 11 months ago

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.

  1. 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.

  1. 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.

Integrations
Web integration
Customize Bot
Code