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 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 (this changes depending on the User Interface) 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. 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 -->```

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

Search Interface Additional Option​

By default, the search interface is rendered as a modal component, which can be opened by clicking the search input button (entry point). If you want to embed the search interface directly without the modal behaviour, add the without-modal="true" parameter to the <div> tag.

<div 
id="branchly-search-interface-container" 
token="< YOUR TOKEN >"
without-modal="true">
</div>