Installing Smartbar

Step-by-step guide to installing the Spara Smartbar on your marketing website.

Spara Smartbar is a customer-facing interface embedded directly on your marketing website. It lets customers ask questions - like having mini ChatGPT about your company easily accessible to your marketing leads.

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: Identify where to load Smartbar

Add an empty div element with id="spara-smartbar-root" to the html body. Spara Smartbar will load inside this div as a full section of your marketing website.
- You may have multiple Spara Smartbar elements on the same page.
- You may have both Spara Smartbar and Spara Navigator on the same page. Your website visitors will experience this as a single conversation.

Here is a full example of effective code to deploy Spara Smartbar:

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

Using Single Page Applications (SPAs)

If your site is a Single Page Application, the target div may not be present in the Document Object Model (DOM) when the Spara script auto-initializes. This can prevent the Smartbar from appearing, so here are two options to resolve this behavior:

Option 1: Manually call window.SparaActions.initSmartbar() after the target div is rendered

Once your app has rendered the target div <div id = "spara-smartbar-root">, manually trigger Smartbar initialization by calling the window.SparaActions.initSmartbar() function

Example code in React:

const onRootLoad = React.useCallback((el) => {
  if (el) {
    window.SparaActions.initSmartbar()
  }
}, [])

...

<div id="spara-smartbar-root" ref={onRootLoad} />

Option 2: Ensure spara-smartbar-root target div is rendered before the script loads

If you can control when the Spara embed script is added to the page, make sure the target div <div id = "spara-smartbar-root"> is already in the DOM before the script runs.
This allows the script's automatic initialization to detect the div immediately, so the Smartbar appears without delay

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 1 month ago