Integrating with Webflow

Adding an AI agent chat to your Webflow site can significantly enhance visitor engagement and support. This guide walks you through the process of embedding your FlowGent chatbot into your Webflow website.

Step 1: Create and Train Your FlowGent AI Agent

First, sign up or log in to your FlowGent account.

When you sign up for FlowGent AI, you will be guided through an onboarding flow that helps you create your first AI agent.

Step 2: Get Your Chat AI Agent Embed Code

1. Go to Agents → Overview

2. Click "Edit" next to the AI agent you want to integrate

3. Navigate to Triggers and select "Chatbot"

4. Design your chat AI agent appearance and click "Add to Website"

5. Copy the provided HTML embed code

Step 3: Add the Chat AI Agent to Your Webflow Site

1. Log in to your Webflow dashboard

2. Open the website project you want to modify

3. Click "Open Designer"

4. Create a container structure:

   • Add a Section element (using the + button)
   • Add a Container element inside the section
   • Add a Div element inside the container

5. Add an Embed element inside the div

It should look like something this in your Webflow designer:

7. Double-click the Embed element to open the HTML editor
8. Paste your FlowGent Chat Agent embed code and click "Save & Close"

Important: you will NOT see a preview in your Webdesigner Editor, but it will show on the published website!

Customizing Your Chatbot After Deployment

You can always customize your chatbot's appearance later:

1. Go to your FlowGent AI agent editor

2. Select your bot

3. Click the Trigger tab and click on your Chatbot trigger edit button

4. Make your design changes and save your configuration

Your FlowGent AI agent is now ready to assist visitors on your Webflow website!