How embedding works

TalentSprout interviews can be embedded as an iframe on any website — your careers page, job listing, or internal portal. Candidates complete the interview directly on your site without navigating away.

Getting the embed code

Open the interview you want to embed.
Click the Share button in the header.
In the Share modal, find the Embed on your website section (Option 3).
Click Copy code to copy the iframe snippet.

The embed snippet looks like this:

<iframe
  src="https://www.talentsprout.ai/embed/interview/{INTERVIEW_ID}"
  allow="camera; microphone; autoplay; fullscreen; display-capture"
  width="100%"
  height="700"
  style="border: none; border-radius: 12px;"
></iframe>

Responsive sizing

For a responsive embed that adapts to screen size, wrap the iframe in a container:

<div style="position: relative; width: 100%; max-width: 800px; min-height: 700px;">
  <iframe
    src="https://www.talentsprout.ai/embed/interview/{INTERVIEW_ID}"
    allow="camera; microphone; autoplay; fullscreen; display-capture"
    width="100%" height="100%"
    style="border: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
  ></iframe>
</div>

⚠️

Important: The allow attribute is required for camera and microphone access. Without it, the interview will fail at the device check step.

Pre-filling candidate data

You can pre-fill candidate information by adding URL parameters to the embed src:

firstName — Candidate's first name
lastName — Candidate's last name
email — Candidate's email address
phone — Candidate's phone number (also accepts phoneNumber; automatically normalized to E.164 format)
candidateId — Your internal candidate ID
externalUserId — An additional external identifier

Example:

<iframe
  src="https://www.talentsprout.ai/embed/interview/{ID}?firstName=Jane&lastName=Smith&[email protected]"
  ...
></iframe>

Pre-filled fields appear as read-only with a lock icon in the candidate info form.

Listening for postMessage events

The embedded interview widget communicates with the parent page using postMessage. You can listen for these events to trigger actions in your application:

talentsprout:ready — Widget loaded and ready
talentsprout:started — Candidate started the interview
talentsprout:ended — Interview conversation ended
talentsprout:completed — Evaluation finished, includes score data
talentsprout:abandoned — Candidate abandoned the interview
talentsprout:interrupted — Interview was interrupted (e.g., connection lost)
talentsprout:evaluation_timeout — Evaluation took too long
talentsprout:request_close — Candidate clicked "Done" — close or redirect

Example event listener:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://www.talentsprout.ai') return;
  const { type, data } = event.data;
  // Handle event types as needed
});

💡

Tip: Always validate event.origin when listening for postMessage events to ensure the message came from TalentSprout.

Platform-specific guides

iOS (WKWebView)

Enable allowsInlineMediaPlayback.
Set mediaTypesRequiringUserActionForPlayback to [] for audio autoplay.
Ensure camera and microphone permissions are declared in your app's Info.plist.

Android (WebView)

Override onPermissionRequest in your WebChromeClient to grant camera and microphone permissions.
Enable JavaScript and DOM storage.
Set mixed content mode to allow secure origins.

React Native

Use react-native-webview with mediaPlaybackRequiresUserAction set to false.
Set allowsInlineMediaPlayback to true.
Handle permission requests on both platforms.

Security considerations

The embed URL is specific to a single interview and does not expose other data.
Always validate the event.origin when listening for postMessage events.
Pre-filled data is passed via URL parameters, so avoid including sensitive information beyond what's needed for candidate identification.

Embedding Interviews on Your Website