> For the complete documentation index, see [llms.txt](https://docs.spara.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.spara.com/guides/installation-guides/readme/installing-spara-navigator.md).

# Installing Spara Navigator

Step-by-step guide to installing the Spara Navigator chat interface on your website.

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 the [Developer: Query Parameters](https://docs.spara.com/developers/spara-api/query-parameters) 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="https://3142139997-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGQgHUAQvtgVvwxqzOx4k%2Fuploads%2Fgit-blob-020a53d3b841c85430f417c99407373ae71d8851%2Fimage.png?alt=media" 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 [Using Wildcard URL Patterns](/guides/platform-guides/using-wildcard-url-patterns.md).
* **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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.spara.com/guides/installation-guides/readme/installing-spara-navigator.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.