# Installing Spara Navigator

Spara Navigator is a bottom right corner chat interface built specifically to power MQL to SQL conversion on your marketing website.

{% hint style="info" %}
Do not add more than one Spara Javascript snippet to a page! If you have already installed a Spara product on this page skip to Step 2.
{% endhint %}

Copy your company's snippet from the [Chat > Configuration](https://app.spara.co/settings/chat/configuration) page. Paste your company's snippet inside the `<head>` tag for all pages of your marketing website.

Here is a full example of how to deploy Spara:

```html
<head>
<script type="text/javascript" src="https://app.spara.co/embed-<app_id>.js"></script>
</head>
```

#### Step 2: Remove any JavaScript-loaded elements <a href="#step-2-remove-any-javascript-loaded-elements" id="step-2-remove-any-javascript-loaded-elements"></a>

Pages with Spara Navigator should not contain any other JavaScript-loaded elements, such as chatbots like Intercom, Drift, or Qualified.

{% hint style="info" %}
Remove all chatbots! Spara will not be usable if they are present.
{% endhint %}

#### Step 3: (Optional) Tell Spara about your query parameters <a href="#step-3-optional-tell-spara-about-your-query-parameters" id="step-3-optional-tell-spara-about-your-query-parameters"></a>

You can tell Spara information you already have about the lead via query parameters. By supplying Spara with this information you ensure that Spara will not attempt to recapture this data, and will use this information to have a better conversation. See [https://docs.spara.com/developers/spara-api/query-parameters](https://docs.spara.com/developers/spara-api/query-parameters "mention") documentation for more information.

#### Step 4: Turn on Spara Navigator <a href="#step-4-turn-on-spara-navigator" id="step-4-turn-on-spara-navigator"></a>

Toggle Navigator Deployment to "on" from the [Chat > Configuration](https://app.spara.co/settings/chat/configuration) page. Once turned on, Spara Navigator will start loading on your webpages.

You may also optionally blacklist Spara Navigator from loading on specific webpages by adding urls, including urls with wildcards, to the Navigator Blacklist.

You may also optionally specify an HTML element that sometimes "blocks" Spara Navigator from being seen by your website visitors. This is usually a cookie settings banner. Specifying this element will ensure that Spara Navigator is displayed immediately above the obstructing HTML element, and then moves back to its usual position once the obstructing HTML disappears (ex. your webpage visitor accept your cookie policy).

<figure><img src="/files/4sgw2jiPDQKHdC1a0XOK" alt=""><figcaption></figcaption></figure>

## Go-live checklist

Before announcing Navigator to your team, run through this checklist to confirm Spara is loading correctly across your site.

* **Spara's JavaScript is embedded on every page where Navigator should appear.** Check that the embed script is present in the `<head>` of every relevant template, not just the homepage. If your site uses a tag manager, confirm the tag fires on all the right pages and is not scoped to a single route.
* **Whitelisting or blacklisting is configured.** If Navigator should load on most pages but skip a few (e.g., `/login`, `/checkout`), add those URLs to the Navigator Blacklist. If Navigator should only load on a specific section of the site (e.g., `/pricing/*`), use a whitelist pattern. Both lists support wildcards — see [https://docs.spara.com/guides/using-wildcard-url-patterns](https://docs.spara.com/guides/using-wildcard-url-patterns "mention").
* **Navigator Deployment toggle is turned on.** From [**Chat > Configuration**](https://app.spara.co/settings/chat/configuration), confirm the Navigator Deployment toggle is enabled. Navigator will not load on any page until this toggle is on, regardless of whether the embed script is present.
* **Visit a few live pages and confirm Navigator loads.** Open production pages in an incognito window and verify the Navigator avatar appears (or the configured Preview Mode renders). If you've configured cookie-banner offsets, accept and dismiss the cookie banner to confirm Navigator repositions correctly.

**FAQ for installing Spara AI Chat**

*Why is the Spara Javascript snippet inserted into the `<head>` tag?*

Spara's JS snippet can be inserted anywhere in your HTML. There's no hard requirement for it to be in the `<head>` tag. But `<head>` is common place for adding 3rd party scripts and it generally makes instructions simpler for our customers to follow.

*Why doesn't the Spara Javascript snippet come with `async`, `defer`, etc?*

Spara's Javascript snippet is actually just a bootloader script. It is extremely small (less than 1KB) and its main job is to append a larger script to the site after the page fully loads. Spara's embed system forces an `async` tag on the larger script, removing the possibility for the implementer to potentially make a mistake and hurt your site's performance. You can absolutely `async/defer` the embed script, but since Spara's subsequently loaded larger script already has `async`, you will see minimal performance impact.


---

# 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.spara.com/guides/installation-guides/readme/installing-spara-navigator.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.
