Framer
Embed your Zetra agent on a Framer site with the website widget code.
Overview
Adding your agent to a Framer site takes the website widget code from your Zetra dashboard and the Custom Code section of your Framer settings. Once added, a floating chat bubble appears on the page.
What you can do
Put your agent in front of every visitor to your Framer site, answering questions without them leaving the page.
Before you start
- A Zetra account with an agent. If you haven't built one yet, create a free account and follow the Quick start.
- A Framer project you can edit.
How to embed your agent
Copy your embed code
- Go to your Zetra dashboard and open the agent you want to add.
- Click Channels in the left sidebar, then Manage on the Chat bubble card.
- Under Embed code, choose Website widget and click Copy.
The website widget is one script tag. It adds a floating chat bubble to the corner of the page. You can also copy it from the Deploy button at the top right of any agent page.
Open your Framer project
Sign in to Framer and open the website project you want to add your agent to.
Open the settings
For one page: find the page in the left panel, click the ⋯ next to its name and choose Settings. For every page: open the site Settings (gear icon, top right) and go to General.
Paste the code
Scroll to Custom Code and paste your code into End of <body> tag. Click Save and publish.
Check it works
Open the published site. The floating chat bubble appears on the page(s) you added it to. Framer only runs custom code on the published site.
Troubleshooting
The chat doesn't appear
Possible cause: the code was pasted into the wrong place, the page wasn't republished, or your agent is switched off.
<script or <iframe), publish the site again, and open it in a private window. In Zetra, open Channels → Chat bubble and make sure Visibility is on. If you listed allowed domains under Settings → Security, your site's exact address (with https:// and www if you use it) must be on the list.Make it look like your brand
The chat's look and wording come from your Zetra dashboard, not the site builder. Open your agent, click Playground, then the Display tab to change the theme, colours, bubble icon and position, welcome message and suggested questions. Changes show up on your site straight away, with no need to paste the code again.