Multi-platform Integrations
Add Chatbots to Framer Websites
Add your AI agent to your Framer site by pasting its embed code into the page's Custom Code settings. No coding needed.
Before you start
- A trained AI agent. New here? Create an account, then train your agent with your data.
- A Framer account that can edit your site.
Step 1: Allowlist your domain
In Chat Data, open Settings > Security. Set Visibility to public, turn on Embedding On Websites, and add your Framer site's domain to Allowed Embedding Domains. Full details: Allowlist your domain.
Step 2: Copy the embed code
In Chat Data, click Embed on site in your AI agent's sidebar, open the Widget Bubble tab and click Copy Code. Which tab should I use? 
Step 3: Add the code in Framer
- Log in to Framer and open the website project for the AI agent.
- In the left sidebar, find the page, click the three-dot menu next to its name and select Settings.
- Scroll down to the Custom Code section.
- Paste the embed code into the Start of <head> tag field.
- Click Save at the top right.
- Click Publish at the top right to update your live site.
Check that it worked
Open the page on your published site. A Chat Data chatbot icon should appear in a bottom corner of the page (left or right, set by Align chat bubble button in Settings > Chat Interface). If the chat window shows "Domain: … is not in the allowlisted domains of this chatbot", add that domain in Step 1. More fixes: Check that it worked.
Next step: match the AI agent to your brand in Settings > Chat Interface. See Customize the Chatbot Interface.
Frequently Asked Questions
How do I add a Chat Data chatbot to a Framer website?
You first prepare the chatbot in Chat Data, then copy its installation code from the website integration guide, and finally paste that code into the Framer page settings under the custom code area.
What should I prepare in Chat Data before installing the chatbot in Framer?
The guide says to log in to Chat Data and build the chatbot before installation. It can be trained from documents, written content, website pages, or question-and-answer data so the bot is ready to answer once it is embedded.
Where do I paste the chatbot code in Framer?
In Framer, you open the target page, go to its `Settings`, scroll to the `Custom Code` section, and paste the Chat Data installation code into the field labeled `Start of <head> tag`. Then you save the page settings.
How do I know the Chat Data chatbot is working on my Framer site?
The guide says that after the code is added successfully, a Chat Data chatbot icon should appear in a bottom corner of the Framer website page. That visible launcher is the confirmation that the embed is active.