# Spara Navigator

Spara Navigator is a chatbot for marketing websites. It is built specifically to power MQL to SQL conversion by answering questions and proactively asking qualifying questions. Spara Navigator "floats" on the page so that it is viewable and accessible at all times.

Onboarding & installation instructions can be found here: [https://docs.spara.com/guides/onboarding-guides/chat-agent-onboarding/installing-spara-navigator](https://docs.spara.com/guides/onboarding-guides/chat-agent-onboarding/installing-spara-navigator "mention").

Spara Navigator's initial behavior can be customized based on a multitude of factors:

* What URL Spara is loaded on
* Any [https://docs.spara.com/developers/spara-api/query-parameters](https://docs.spara.com/developers/spara-api/query-parameters "mention") in the URL, including `utm` marketing parameters
* Any "wait" time before Spara should load

Once a buyer is engaging with Spara Navigator, how Spara Navigator moves the lead through your sales funnel is fully configurable in [Agent Overview](/agents/agent-overview.md).

Spara Navigator's UI and color scheme are highly configurable. Below is an explanation of UI Modes; Navigator may have different UI Modes for desktop versus mobile users.

## Previews

In addition to all the features outlined in [https://github.com/spara-ai/spara-app/blob/gitbook/gitbook/documentation/agents/agent-overview/agent-editor.md](https://github.com/spara-ai/spara-app/blob/gitbook/gitbook/documentation/agents/agent-overview/agent-editor.md "mention"), Previews lets you define how Spara Navigator looks to website visitors *before* they engage with it. Here's how it works:

* Each Chat agent has its own set of one or more Previews.
  * This makes [A/B Testing](/agents/agent-overview/a-b-testing.md) different Previews easy to optimize engagement.
* Each Preview\...
  * Is entirely configurable for Desktop vs. Mobile visitors.
  * Starting criteria determines which website visitors see it. The "default" Preview is a catch-all for any website visitors that don't fit the starting criteria of other Previews.
  * Starting delay sets how many seconds to delay before showing Navigator website visitors.
  * Preview mode is what Navigator looks like. Different Preview modes require different inputs.
* Each Preview is rendered for you to "preview" in the bottom right of the screen so you can see exactly how each input works.

<figure><img src="/files/k3Ffg1yWKICZ9O8o4hFj" alt=""><figcaption></figcaption></figure>

### Preview Mode: Central

The "Central" preview mode is a contemporary design that drives higher engagement that a traditional bottom right chatbot - you'll notice leading AI companies like [OpenAI](https://openai.com) using this design on their own marketing websites. We recommend using this mode.

Note that this mode may not be compatible with large cookie policy banners and is only supported on desktop - you must choose a different mode for mobile devices.

<div align="center" data-full-width="true"><figure><img src="/files/iM71tkcONSsIbigAzjmy" alt=""><figcaption><p>Spara Navigator's modern, centrally-placed UI.</p></figcaption></figure></div>

### Preview Mode: Traditional

Traditional Mode places the chatbot in the bottom right corner of screens - where chatbots are traditional seen. There are three options within this mode:

* Traditional: Message - shows a message and/or suggested responses
* Traditional: Input - shows an input bar
* Traditional: Closed - shows just the bottom-right avatar

<figure><img src="/files/UOUtXpDH4YnRcGPzAcT5" alt=""><figcaption><p>Traditional: Message mode can show with a preview message and/or suggested responses.</p></figcaption></figure>

<figure><img src="/files/nmwApGtNZd5SQ1f8zT1D" alt=""><figcaption><p>Traditional: Closed mode only shows the bottom-right avatar.</p></figcaption></figure>

### Preview Mode: Opened

This mode loads Spara Navigator in its "opened" state.

### Preview Mode: Hidden

Does not show Spara Navigator at all. Useful for A/B testing having a chatbot on your webpages.


---

# 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/agents/chat-agents/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.