# Installing Spara Fullscreen 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. {% hint style="info" %} 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: 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: ```html

``` ### 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-parameters](https://docs.spara.com/developers/spara-api/query-parameters "mention")documentation for more information. The most common use case is to redirect to Spara Fullscreen from a marketing webform. {% hint style="info" %} Contact your Spara customer service representative if you need help with this step. {% endhint %} ### 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. {% hint style="warning" %} Remove all chatbots! Spara will not be usable if they are present. {% endhint %} ### 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](https://docs.spara.com/developers/spara-api/javascript-api "mention"). *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-spara-fullscreen.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.