Back to Questa
Documentation

Install Questa

Questa is a tiny JavaScript SDK that turns videos, podcasts, webinars, courses, and lessons into interactive website experiences. It listens to playback, watches timestamps, and triggers the right CTA action on your page — highlighting a button, opening a popup, pinning a link, or scrolling to a section.

1. Add the snippet

Paste this just before the closing </body> tag on the page where your content plays. Replace SITE_KEY and EXPERIENCE_IDwith the values shown on the experience's Install tab.

<script
  async
  src="https://goquesta.com/questa.js"
  data-site-key="SITE_KEY"
  data-experience-id="EXPERIENCE_ID">
</script>
  • async — loads in the background; never blocks page render.
  • data-site-key — your publishable site key (starts with pk_live_). Create one in Site → Publishable site keys.
  • data-experience-id — the UUID of the experience to play on this page.
  • Add data-debug to print verbose logs to the browser console.

2. What goes where

Site Key

Identifies your site. Origin-locked to your verified domains, so it's safe to ship in client-side HTML. Rotate or revoke it any time from the site settings page.

Experience ID

Identifies which experience to load. One page typically loads exactly one experience. To run different experiences on different pages, change the data-experience-id per page.

3. Example HTML page

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My landing page</title>
  </head>
  <body>
    <h1>Watch the demo</h1>

    <video controls width="720" src="/my-demo.mp4"></video>

    <!-- The element your CTA action targets -->
    <button id="download-button">
      Download Worksheet
    </button>

    <!-- Questa SDK -->
    <script
      async
      src="https://goquesta.com/questa.js"
      data-site-key="pk_live_xxxxxxxx"
      data-experience-id="00000000-0000-0000-0000-000000000000">
    </script>
  </body>
</html>

4. Map a CTA action to a selector

In Questa, each CTA moment gets one or more actions. Each action targets a CSS selector on your page. For the button above:

Selector:  #download-button
Action:    pulse_button (or highlight_element, show_tooltip, …)

Selectors can be IDs (#download-button), classes (.cta-primary), or any valid CSS selector. If a selector doesn't match anything on the page, Questa logs a warning and continues — it never crashes your site.

5. Installation steps

  1. Create a Site in Questa and add your domain.
  2. Verify the domain (one-time meta tag check).
  3. Create an Experience and add a content source (video or audio URL, upload, or pasted transcript).
  4. Review the detected CTA moments and map each to an action + selector.
  5. Copy the snippet from the Install tab and paste it into your site's HTML.
  6. Reload the page and watch the events arrive on the Install panel.

6. Verification

The Install tab shows four health checks:

  • Site key — at least one active key exists.
  • Experience — experience is published.
  • Domain — a verified domain matches the script's origin.
  • Last event — the SDK has phoned home within the last 7 days.

Once all four are green, you're done. Continue to Testing & Troubleshooting if something looks off.