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).

General Steps​

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

1. Insert the Script​

Place the appropriate 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 User Interface to appear on your page. Replace <YOUR TOKEN> with the actual token that identifies your Application. You can style the container using CSS to set the desired width and height or specify additional options. The id attribute depends on the User Interface.

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

3. Set the Language Tag​

An Application 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 -->```
</html>

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.

tip

Info: Please go to the user interface in the dashboard and copy & paste the code snippets from there to make sure you use the correct script and container.

Chat Widget​

Both the script and the div should be placed inside the website’s <body> tag.

script​

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

div​

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

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.

    <div
      id="branchly-chat-widget-container"
      data-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"
      data-token="<YOUR TOKEN>"
      style="z-index: 9999999999"
    ></div>

Chat​

script​

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

div​

<div
  id="branchly-chat-embed-container"
  data-token="0cfc9e1e-e93c-44b1-870d-6680f605f41d"
></div>

Search Interface​

script​

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

div​

You can embed the search interface using a <div> element with the data-view-mode attribute. There are two options available:

  1. Search Button: Use the search-button mode to display a button styled as a search input that, when clicked, opens the search interface in a modal. This option is ideal for making the search interface available across the entire site.
  2. Inline Search Interface: Use the inline mode to embed the search interface directly into the page without modal behavior. This is suitable for pages where you would like to display search results directly.
<div
  id="branchly-search-interface-container"
  data-token="<YOUR TOKEN>"
  data-view-mode="search-button"
></div>

Navigator​

script​

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

div​

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