Multi-platform Integrations
Add Chatbots to Framer Websites
Discover how to integrate a chatbot widget into your Framer Website with ease.
Step 1: Configure Your Chat Data Chatbot
Begin by accessing your Chat Data account. If you're new, you can register for a free account here. Once logged in, begin building your chatbot by incorporating your knowledge base. Your bot can learn from multiple sources such as documents, written content, website pages, or question-and-answer sets.
For assistance with setting up your Chat Data chatbot, explore our detailed configuration guide.
Step 2: Retrieve Your Chatbot's Installation Code
Check our Website Integration Guide to get your personalized Chat Data chatbot installation code. 
After obtaining your installation code, you're prepared to implement it on your Framer site.
Step 3: Access Your Framer Website and Install Your Chatbot
- Log into your Framer website and navigate to your project control panel
- Select the website project where you want to implement your Chat Data chatbot
- Upon opening the website project, find your target page in the left sidebar, click the three-dot menu icon beside the page name, and select the Settings option.
- Select Settings to view the page configuration.
- Within the Settings page, navigate down to the Custom Code section.
- In the Custom Code area, insert your Chat Data chatbot installation code into the field marked Start of <head> tag and confirm by clicking Save in the top right.
- Upon successful implementation, a Chat Data chatbot icon should appear in the bottom left of your Framer website page
Well done! Your Chat Data bot is now operational on your website.
Hint: Interested in customizing your chatbot's appearance? Access your Chat Data dashboard, choose your bot, navigate to Settings, and explore Chat Interface in the left menu for all available customization features.
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 the bottom-left corner of the Framer website page. That visible launcher is the confirmation that the embed is active.