Framer Remix (Babelbeez Voice Agent)

Add your Babelbeez AI Voice Agent to a Framer site using a Remix template that already contains the BabelbeezVoiceAgent code component.

This guide covers requirements, how to start from the Babelbeez dashboard, what to expect in Framer, and basic troubleshooting.

Requirements

• A Babelbeez account and at least one configured voice agent
• Your site’s domain added under Configure Allowed Domains in the Babelbeez dashboard
• A Framer account (free or paid)

The Remix template uses the same production embed loader as any other Babelbeez integration, so behavior on the published Framer site will match what you see elsewhere.

Step 1 – Start from the Babelbeez dashboard

1. Sign in to the Babelbeez dashboard.
2. Select the voice agent you want to use.
3. Go to Go Live!.
4. Complete Step 1 – Configure Allowed Domains if you haven’t already.
5. In Step 2 – Choose Your Platform, click the Framer card.
6. Click Next Step: Get Code to open Step 3 – Add to Your Website.
7. In Step 3, under Framer (Remix template):
   • Click Open in Framer to open the Remix link in a new tab.
   • Optionally copy the Remix URL using Copy Framer Remix link.

Behind the scenes, the Remix link includes your agent’s Public Chatbot ID as a query parameter named publicChatbotId. The current Framer template does not automatically read this value yet, so you still need to paste the ID into the Babelbeez component inside Framer. The query parameter is kept in the URL so we can optionally wire this up in a future version of the template.

Step 2 – Review the Framer project

When you open the Remix link:

1. Framer will prompt you to sign in or create an account if you don’t already have one.
2. Framer creates a copy of the template project in your workspace.
3. Inside the project, you’ll see a preconfigured page containing the Babelbeez Voice Agent button.

Check the Chatbot ID in Framer

The Remix template starts with the Chatbot ID field empty (or with a placeholder). Use your Public Chatbot ID from the Babelbeez dashboard to connect the component:

1. Select the Babelbeez Voice Agent layer on the canvas.
2. In the right-hand properties panel, look for the Chatbot ID field.
3. In the Babelbeez dashboard, go to your agent → Go Live! → Step 3 and copy the Public Chatbot ID.
4. Paste that value into the Chatbot ID field in Framer, then publish.

Step 3 – Publish your Framer site

Once the component is connected to the correct Chatbot ID:

1. In Framer, click Publish.
2. Choose or confirm a site URL.
3. Open the published Framer site in your browser.

On the published site, the Babelbeez embed loader will:

• Read the publicChatbotId from the Framer component configuration.
• Initialize the same floating circular Voice AI button used on other platforms.
• Connect to your Babelbeez voice agent when visitors interact with the button.

If you later change the Public Chatbot ID in the Babelbeez dashboard (for example, to switch which agent is used on that site), update the Chatbot ID field in Framer and republish.

Troubleshooting

The voice button doesn’t appear on the published Framer site

Check the following:

1. Correct project is published

   • Make sure you’re viewing the published URL from Framer, not just a local preview.

2. Babelbeez component still on the page

   • Confirm that the Babelbeez Voice Agent layer is present on the page you’re testing.

3. Public Chatbot ID

   • In the Babelbeez dashboard, go to your agent → Go Live! → Step 3 and copy the Public Chatbot ID.
   • In Framer, select the Babelbeez component and verify the Chatbot ID matches exactly (no extra spaces or characters).

4. Allowed domains

   • In Babelbeez, under Go Live! → Step 1 – Configure Allowed Domains, make sure the domain you publish your Framer site on is listed.

The wrong agent is speaking

If the voice agent’s behavior doesn’t match the one you expect:

1. Double-check the Public Chatbot ID in the Babelbeez dashboard for the agent you want to use.
2. In Framer, update the Chatbot ID on the Babelbeez component to match that ID.
3. Republish the Framer site and reload the page.

Where this appears in the dashboard

In the Babelbeez dashboard:

• Go to your voice agent → Go Live!:
  • Step 1 – Configure Allowed Domains: add your website‘s domains.
  • Step 2 – Choose Your Platform: select Framer.
  • Step 3 – Add to Your Website:
    • Use Open in Framer to open the Remix template.
    • Optionally copy the Framer Remix link.
    • Use the Public Chatbot ID box as a reference for the ID you should see inside the Framer project.