# Installation

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

{% hint style="info" %}
First, you need to ensure that you are on a Business plan to use this.
{% endhint %}

### 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 <a href="#how-to-install" id="how-to-install"></a>

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*](https://app.oneroute.io/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 <a href="#how-to-install" id="how-to-install"></a>

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*](https://app.oneroute.io/settings/account-settings) > *API Keys & Webhooks*.

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

<figure><img src="/files/TPVkiEiHtEsdPX8PaUwv" alt=""><figcaption><p>OneRoute Embed</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.oneroute.io/embed/installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.