Step 1: Sign Into Your Frontline Account and Set Up Your AI Agent / Chatbot
Create a Frontline account if you haven't registered yet.
Access your Frontline dashboard and go to the AI Assistant setup area.
Add training material for your AI Assistant by importing sources such as text excerpts, documents, website information, or Q&A sets.
Refine and evaluate your bot's performance within Frontline until it delivers accurate responses.
Not familiar with creating a Frontline AI agents? Here is a step-by-step guide on how to create an AI assistant.
Step 2: Copy Your Chatbot Embed Code
After setting up and testing your Frontline Agent, you’ll need the embed code to display the AI Assistant widget on your website. To obtain this:
1. Head to your Frontline dashboard.
2. Locate the list of chatbots, then select the one you want to integrate into your Webflow website. This will bring you to the bot’s preview page.
3. On the chatbot preview page, click on the Channel tab.
4. Click on Copy to clipboard to copy the provided HTML code.
Step 3: Set Up a Container to Display Your Chatbot Widget
Before adding the embed code to your Webflow site, you will need to create a container to display the widget. This will ensure that the widget is displayed in the correct place on your website and doesn't extend the entire width of the page.
Log into your Webflow account and go to your dashboard
2. Go to settings on the site you want to add your Frontline AI Assistant.
On your Webflow dashboard, you’ll find a list of all your website projects, hover on the website you want to add the chatbot to and click on “...” and go to Settings
3. Go to custom code.
On your Webflow dashboard, you’ll find a list of all your website projects, hover on the website you want to add the chatbot to and click on “...” and go to Settings
4. Paste your in the Head Code section at the end of the <head> Tag.
5. If all goes well, you should see a preview of the Frontline AI assistant on the live preview of your Webflow website right inside the designer.
After completing these steps, your chatbot should be ready to serve your website visitors!
If you are having difficulties with managing the dimension of your Embed and chatbot element, it is a common problem. Webflow components take a bit of getting used to. You can follow this official Webflow documentation on the Embed element to learn more about embedding a third-party tool like Frontline chatbot on a Webflow website.
Tip: You can personalize the appearance and colors of your bot from the Frontline dashboard. Navigate to your assistant's Settings and select Chat Customization to adjust the customization options.