# Installing Smartbar 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. {% hint style="warning" %} 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 `` tag for all pages of your marketing website. Here is a full example of how to deploy Spara: ```html ``` ### 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: ```html
...
...
``` #### 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 `
`, manually trigger Smartbar initialization by calling the **`window.SparaActions.initSmartbar()`** function Example code in React: ```html const onRootLoad = React.useCallback((el) => { if (el) { window.SparaActions.initSmartbar() } }, []) ...
``` \ **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 `
` 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 `` tag?* Spara's JS snippet can be inserted anywhere in your HTML. There's no hard requirement for it to be in the `` tag. But `` 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. --- # 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/guides/installation-guides/readme/installing-smartbar.md?ask= ``` 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.