Skip to main content

​
Step 1: Sign Into Your Chatbase Account and Copy Your Embed Code

1. Log into your Chatbase account and navigate to your dashboard. 2. On the list of available agents, click on the one you want to integrate into your Framer website. 3. Click Channels in the left sidebar, then click Manage on the Chat bubble card (or Setup, if you haven’t configured it yet). 4. Click on Deploy and select the Website widget embed type. Scroll down and Click Copy to copy the provided script.
Deploy

​
Step 2: Sign Into Your Framer Website and Embed Your AI agent

1. Sign in to your Framer website and head to your project dashboard 2. Click on the website project you wish to embed your Chatbase agent
image
3. After clicking through to open the website project, locate the page you wish to embed your agent on the left side of the editor and click the three-dot icon next to the name of the page.
image
4. Click Settings to open the settings for that page. 5. On the Settings page, scroll down to find the section labeled “Custom Code.” 6. Right under the Custom Code section, paste your Chatbase agent embed code in the first box labeled “Start of <head> tag” and click Save on the top right corner of the panel.
image
7. If everything was done well, you should now see a floating Chatbase agent icon on the bottom left corner of your Framer website (on the page you added it to)
image
Congratulations! Your Chatbase agent is now ready to use on your website.
You can customize the appearance and colors of your agent on your Chatbase dashboard. To do this, go to your dashboard, choose an agent, click Channels in the left sidebar, click Manage on the Chat bubble card, then open the Display tab to edit Content, Capabilities, Colors, Floating bubble, and Localization.