Embedded places the chat directly inside your page, in an element you choose. There is no chat bubble: the conversation is part of your layout, for example on a help center page or in a support panel of your app. Texts and design come from your Configuration. You can override some of them in code and control the chat with a JavaScript API.

Before you start

1. Save your Conversation SDK configuration.
2. In Automate → Channels, turn on Embedded on the Conversation SDK card.

If Embedded is turned off on the card, the snippet loads nothing.

Install Embedded

1. On the Conversation SDK card, click Snippet next to Embedded.
2. Copy the code and paste it on your page where the chat should appear.

The snippet looks like this. Always copy yours from the card, because the script address depends on your account:

<div id="zowie-embedded" style="width:100%;height:650px;"></div>
<script type="text/javascript">
  (function(cb) {
    var js = document.createElement("script");
    if (js.readyState) {js.onreadystatechange = function() {if (js.readyState === "loaded" || js.readyState === "complete") {js.onreadystatechange = null; cb();}};
    } else {js.onload = function(){cb();};}
    js.type = "module";
    js.defer = true;
    js.src = "https://<your-chat-host>/zowie-embedded-entry.js";
    document.body.appendChild(js);
  })(function() {
    ZowieEmbedded.init("<your-instance-id>", "zowie-embedded", {});
  });
</script>

The snippet has two parts:

• The container: the <div> the chat is placed in. The chat fills the whole container, so set its size to fit your layout. You can change the id, as long as you pass the same value to init.
• The script: it loads Embedded and calls ZowieEmbedded.init with your Instance ID and the id of the container.

Customize Embedded in code

The third argument of ZowieEmbedded.init is a configuration object. Values you pass there take priority over the values from your configuration in Zowie.

ZowieEmbedded.init("<your-instance-id>", "zowie-embedded", {
  headerVisible: false,
  primaryColor: "#2563EB",
  styles: {
    chat: { border: "1px solid #E5E7EB", borderRadius: "12px" },
  },
  onStartChat: (conversationId) => {
    console.log("Conversation started", conversationId);
  },
});

Call init once per page. Later calls are ignored.

Init options

Behavior

Customer data and authentication

Branding

Hello (voice)

Callbacks

Pass these functions in the configuration object to react to what happens in the chat.

Control Embedded

After Embedded has loaded, you can control it through the global ZowieEmbedded object. Calls made before it has loaded are ignored, so call these methods from onLoaded or later. The exception is on(), which you can call at any time.

ZowieEmbedded.init("<your-instance-id>", "zowie-embedded", {
  onLoaded: () => {
    ZowieEmbedded.updateMetadata({
      firstName: "Ada",
      email: "[email protected]",
    });
  },
});

Types

CustomStyles

Every field is optional. Values are CSS values, for example "1px solid #E5E7EB" for a border or "12px" for a radius or padding.