Skip to main content

How to Embed a User Interface

Embedding branchly User Interfaces into your website can be accomplished in a few simple steps (5 minutes).

Embedding the User Interfaces​

To embed the Navigator, you need to include a script and a container div element in your HTML. Here's how:

1. Insert the Script​

Place the following script within the <body> tag of your HTML document:

<script
  type="module"
  src="https://embed.branchly.io/assets/index.js"
></script>

2. Add the Container Div Element​

The container div element should be placed where you want the Navigator to appear on your page. Replace <YOUR TOKEN> with the actual token that identifies your Navigator. You can style the container using CSS to set the desired width and height.

<div
  id="branchly-embed-container"
  token="< YOUR TOKEN >"
></div>

3. Set the Language Tag​

branchly's Navigator is designed to support multiple languages and regions. To ensure the correct content is displayed, you must specify a valid locale using the two-letter ISO language and country code format.

Option 1: Use the Site-wide Language Tag

You can use the global lang attribute in your site's <html> tag, like so:

<html lang="en_US"> 
<!-- Example for English/United States -->```

Option 2: Specify the Language Tag in the Container

Alternatively, you can set the lang attribute directly in the container div element, which will override the site-wide setting:

<div
  id="branchly-chat-widget-container"
  token="< YOUR TOKEN >"
  lang="de_DE">
</div>

tip

Tip: Make sure to register your locales and embed locations in the branchly dashboard settings.

Chat Widget Additional Options​

  1. You can control whether the chat bubble opens by default, when a user visits your web site. This is determined by the data-open-default parameter within the Div Element.

    <!-- Example to specify the chat widget to open by default -->
    <div
      id="branchly-chat-widget-container"
      token="< YOUR TOKEN >"
      data-open-default="true"
    >
    </div>

  2. You can adjust styles (as CSS) already when embedding the Container in your website. A common use case is if you need to adjust the z-index so that other elements on your website do not interfere with the chat widget, when it is opened.

    <div
      id="branchly-chat-widget-container"
      token="< YOUR TOKEN >"
      style="z-index: 9999999999"
    ></div>