Installation

We support two different ways to install OneRoute Embed on your website. The first is a standard installation and will work for most websites. The second is for a single-page app.

First, you need to ensure that you are on a Business plan to use this.

Standard Installation

If you have a web app with multiple pages where each one triggers a new page refresh then you will most likely need the basic JavaScript method. This means you will not need to create separate actions that trigger when the Embed will appear. The page refresh itself is enough to trigger the action. To set up the basic JavaScript, you will only need to follow these steps.

How to Install

To get the Embed to appear on your web app, you need to set the element you want it to show within.

<div id="onerouteEmbed"></div>

Then, copy and paste the snippet below before the </body> tag.

<script>
  const orEmbedConfig = {
    api_key: "API_KEY",
    firm_id: "FIRM_ID",
    business_name: user.business.name, //User's business name
    business_id: user.business.id, //User's business id
    user_first_name: user.firstname,
    user_last_name: user.lastname,
    user_email: user.email,
    
    // Optional keys
    style: {"primary_color": "#FF33F0"},
  };

  function loadOneRouteEmbed() {
    const orEmbedEl = document.getElementById("onerouteEmbed");
    if (orEmbedEl) {
      orEmbedEl.className = "oneroute_embed";
      orEmbedEl.setAttribute("data-config", JSON.stringify(orEmbedConfig));
    
      const scriptElement = document.createElement("script");
      scriptElement.src = "https://rebrand.ly/or-embed";
      document.body.appendChild(scriptElement);
    }
  }
  loadOneRouteEmbed();
</script>

You can find your API_KEY and FIRM_ID on your OneRoute Dashboard > Settings > Account Settings > API Keys & Webhooks.

Single Page App

If you have a single-page app, then you can get OneRoute Embed installed on your page. So let's waste no time and get you chatting with your customers.

How to Install

To get the Embed to appear on your web app, you need to set the element on the page/component you want it to show within.

<div id="onerouteEmbed"></div>

Then, copy and paste the snippet below into the page on-mount function (useEffect, componentDidMount, ngAfterViewInit, mounted, etc).

const orEmbedConfig = {
  api_key: "API_KEY",
  firm_id: "FIRM_ID",
  business_name: user.business.name, //User's business name
  business_id: user.business.id, //User's business id
  user_first_name: user.firstname,
  user_last_name: user.lastname,
  user_email: user.email,
    
  // Optional keys
  style: {"primary_color": "#FF33F0"},
};

function loadOneRouteEmbed() {
  const orEmbedEl = document.getElementById("onerouteEmbed");
  if (orEmbedEl) {
    orEmbedEl.className = "oneroute_embed";
    orEmbedEl.setAttribute("data-config", JSON.stringify(orEmbedConfig));
    
    const scriptElement = document.createElement("script");
    scriptElement.src = "https://rebrand.ly/or-embed";
    document.body.appendChild(scriptElement);
  }
}
loadOneRouteEmbed();

You can find your API_KEY and FIRM_ID on your OneRoute Dashboard > Settings > Account Settings > API Keys & Webhooks.

This is an example of how it'll look after a successful installation.

OneRoute Embed