ZZetra

Webflow

Embed your Zetra agent on a Webflow site, inside a container you control.

Overview

Adding your agent to a Webflow site takes the iFrame embed code from your Zetra dashboard and a container on your page. The container matters: without one, the chat window stretches the full width of the page.

What you can do

Put your agent in front of every visitor to your Webflow site, sized and placed exactly where you want it.

Prefer a floating bubble?

Use the Website widget code instead and paste it under Site settings → Custom code → Footer code. The bubble then appears on every page, and you can skip the container steps below.

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 iFrame and click Copy.

    The iFrame shows the chat window inline, inside a box on your page, without a floating bubble. You can also copy it from the Deploy button at the top right of any agent page.

  2. Open your site in the Webflow Designer

    Sign in to Webflow. Hover over the site you want to add the agent to and click Open Designer. Click the Pages icon in the top-left corner and choose the page for the chat.

  3. Build a container for the chat

    A container keeps the chat window from spanning the whole page.

    1. Click Add elements (the plus button, top left).
    2. Drag a Section to where you want the agent.
    3. Drag a Container onto the Section.
    4. Drag a Div Block onto the Container and give it a size, for example 400 px wide and 700 px high.

  4. Add the Embed element and paste your code

    Drag the Code Embed element onto the Div you just added. Double-click it, paste your Zetra code and click Save & Close. Publish your site.

Check it works

The chat window appears inside the Div on the published site. Send it a question and check it answers from your data sources.

Troubleshooting

The chat window is the wrong size

Possible cause: the Code Embed element takes its size from the Div around it.

Solution: Change the width and height of the Div Block that wraps the embed. Webflow's Code Embed guide covers the element in more detail.
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.

Only want it on your own site?

Under Settings → Security you can list the domains allowed to show your agent. Add your site's address (for example https://www.example.com) and the chat refuses to load anywhere else.

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.
← Integrations overviewWordPress →