Ctrlk

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.

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.

Copy your company's snippet from the 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:

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

Step 2: Remove any JavaScript-loaded elements

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

Remove all chatbots! Spara will not be usable if they are present.

Step 3: (Optional) Tell Spara about your query parameters

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 documentation for more information.

Step 4: Turn on Spara Navigator

Toggle Navigator Deployment to "on" from the 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).

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.

  • Navigator Deployment toggle is turned on. From 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.

Last updated