Projects

How to Set Up the SDK

One copy-paste <script> tag and you're collecting feedback. Works on any site — WordPress, Webflow, plain HTML, Rails, Django, Next.js, you name it.

Prerequisites

A ProdExam account

A project with an API key (grab it from your project page)

Add the ProdExam script tag

Paste this anywhere in your HTML — ideally just before the closing </body> tag on every page you want to test. No build step, no npm install, no provider wrapper.

<script
  src="https://testflow-fr0h.onrender.com/sdk/sdk.js"
  data-prodexam-key="YOUR_API_KEY"
  defer
></script>

Swap YOUR_API_KEY for the key on your project page. The dashboard's Quick Setup panel shows this exact snippet with your key already inserted.

Verify the connection

Load the page where you installed the SDK.
Return to your ProdExam project page.
On the project's Builder page (Settings → Builder), the SDK Status chip flips from Waiting for connection to Connected once a heartbeat lands. Click the refresh icon next to the chip to re-check immediately.

Connected? You can jump straight to creating a test from the Builder side panel.

What participants will see

Once you publish a test, every visitor to your site sees the ProdExam side panel as soon as the page loads:

1. The side panel opens on the left edge with a Welcome screen.

2. Participant enters their name (email is optional) and clicks Start Test.

3. The panel collapses to a waiting state. Questions fire as the participant takes the actions you set as triggers (button clicks, page navigations, scroll depth, etc.).

4. Pinned-comment zones stay available throughout — participants click the Comments tab to attach feedback to any element.

5. After the last question, the panel shows a Thank You screen.

The side panel is always present while a test is active. If you want the panel to skip the Welcome screen on subsequent navigations (so a participant who already started doesn't re-greet themselves), turn on session persistence below.

Optional: persist sessions across page navigations

By default, the SDK creates a fresh session every time the page reloads, which means tests with url_match triggers (the question fires when the user navigates to a specific URL) lose their context. Add data-prodexam-persist-session="true" to opt in to session persistence — the SDK then stores the active session in localStorage and resumes from where the participant left off.

<script
  src="https://testflow-fr0h.onrender.com/sdk/sdk.js"
  data-prodexam-key="YOUR_API_KEY"
  data-prodexam-persist-session="true"
  defer
></script>

Sessions expire after 24 hours of inactivity. The participant's test resumes on subsequent page loads within that window; after 24h it starts fresh.

Troubleshooting

Still showing "Waiting for connection"

Double-check the API key in your script tag matches the one on your project page. Click the refresh icon on the chip after pasting the script. Open the browser console on the target site — the SDK logs "[ProdExam SDK] Runner mode detected" on startup if it picked up the key.

CORS errors in console

The SDK works from any domain. CORS errors almost always mean an invalid or revoked API key — regenerate from your project page.

Using Next.js, Vite, or another framework?

Drop the script tag in your root layout (Next.js App Router: app/layout.js, Pages Router: pages/_document.js). The SDK runs independently of your React tree — no provider needed.

Next Steps

How to create a test

How to use the test builder

How to find your API key