ZZetra

Bubble

Embed your Zetra agent in a Bubble app with the website widget code.

Overview

Adding your agent to a Bubble app takes the website widget code from your Zetra dashboard and an HTML element on your Bubble page. Once pasted, a floating chat bubble appears in your app.

What you can do

Put your agent in front of every user of your Bubble app, answering questions without them leaving the page.

Before you start

How to embed your agent

  1. Copy your embed code

    1. Go to your Zetra dashboard and open the agent you want to add.
    2. Click Channels in the left sidebar, then Manage on the Chat bubble card.
    3. 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.

  2. Open the Bubble editor

    Sign in to Bubble, pick your app and click Launch Editor.

  3. Add an HTML element

    From the Visual elements on the left, drag an HTML element onto the page. It can be small; the bubble floats in the corner wherever the element sits.

  4. Paste the code

    Double-click the HTML element and paste your Zetra code into its content box. Preview your app.

Check it works

Preview the app. The chat bubble appears in the corner and your agent answers.

On every page

To show the bubble across the whole app, paste the code under Settings → SEO / metatags → Script/meta tags in header instead.

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.

Solution: Check that the whole code was pasted (it starts with <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.

Next steps

Customize the chat →Match the widget to your brand colours, position and wording.Channels →Every other place your agent can talk to customers.
← FramerVercel →