Installing Spara Fullscreen
How to deploy Spara's Fullscreen interface.
Last updated
How to deploy Spara's Fullscreen interface.
Last updated
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.
Copy your JS snippet from the Organization Settings page. You will need a Spara account with the "Manager" role. The JS snippet will look like this:
Implement the following steps to deploy Spara Fullscreen:
Insert your company's JS snippet inside the <head> tags of your page. This can be copied from the Organization > General page in Spara.
Add an empty div element with id="spara-iframe-root" to the html body.
Include the height of your website's navbar as an inline padding-top style for the element. For example, <div id="spara-iframe-root" style="padding-top: 4rem;"></div>.
Ensure that your website's <nav> CSS is position: fixed;
Why? Spara's interface takes up the entire page height and width, exclusive of the navigation bar. <nav style="position: fixed;"> is the only CSS method that guarantees exact screen heights on mobile browsers.
This page must not include any other HTML elements, such as a footer.
Failure to follow these guidelines may result in an unusuable experience on mobile devices.
Here is a full example of effective HTML/CSS to deploy Spara:
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 Query Parameters documentation for more information.
Contact your Spara customer service representative if you need help with this step.
This page should not contain any other JS-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.
Should you wish to track Spara events using a third party analytics tools, refer to JavaScript Events
