Spara Documentation
  • Overview
    • What is Spara?
    • How can Spara help?
  • Channels
    • AI Chat: Smartbar, Navigator & Fullscreen
      • Spara Smartbar
      • Spara Navigator
      • Spara Fullscreen
    • AI Email
    • AI Phone Calls
  • Platform
    • Leads
    • Journeys
    • Analytics
    • Library & AI Training
    • Testing
  • Installation Guide
    • Installing Spara Chat
      • Installing Spara Smartbar
      • Installing Spara Navigator
      • Installing Spara Fullscreen
      • Installing Spara on Webflow
    • Query Parameters
    • JavaScript Events
  • Installation FAQ
  • Integrations
    • Salesforce
    • Hubspot
    • Marketo
    • Slack
    • Chili Piper
    • Calendly
    • Outreach
  • Other
    • Security & Compliance
Powered by GitBook
On this page
  • Step 1: Add Spara's script to your website
  • Step 2: Identify where to load Smartbar
  1. Installation Guide
  2. Installing Spara Chat

Installing Spara Smartbar

How to deploy Spara's Smartbar interface.

Last updated 3 months ago

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.

Step 1: Add Spara's script to your website

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.

Paste your company's JavaScript snippet inside the <head> tags of your new, blank webpage.

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>

Copy your JavaScript snippet from the . You will need a Spara account with the "Manager" role.

Organization Settings page
Tiny embeds Spara Smartbar on their marketing pages to engage vistors.