Ctrlk

Installing Spara Fullscreen

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

Spara's Fullscreen interface is exactly what it sounds like: a full screen chat interface powered by Spara's AI. This interface is deployed onto a single URL of your company's marketing website. It's most often used for post-web form submission flows.

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: Add Spara Fullscreen div

Add a div with id="spara-iframe-root". This is the HTML element that Spara Fullscreen will load in. It should be the only HTML element in the webpage body.

Here is a full example:

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

Step 3: Redirect to Spara Fullscreen with Query Parameters

When loading or redirecting the Spara Fullscreen interface page include any lead enrichment data as query parameters to the iframe URL. By supplying Spara with this information you ensure that Spara will a) not attempt to recapture this data, and b) may modify its behavior to better suit each conversation. See https://docs.spara.com/developers/spara-api/query-parametersdocumentation for more information.

The most common use case is to redirect to Spara Fullscreen from a marketing webform.

Contact your Spara customer service representative if you need help with this step.

Step 4: Remove any JavaScript-loaded elements

This page should not contain any other JavaScript -loaded elements, such as chatbots like Intercom, Drift, or Qualified. Most platforms provide an easy mechanism to "blacklist" specific URLs, meaning that the chatbot will not load for a specific URL.

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

Step 5 (Optional): Javascript Events

Should you wish to track Spara events using a third party analytics tools, refer to https://docs.spara.com/developers/spara-api/javascript-api.

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 Javscript 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