Embed RevealAI iFrame

Written By revealai

Last updated 6 months ago

iFraming your interview is optional, but if you'd like to embed it in another website or application, you can configure the iFrame settings. Once your interview is ready for testing, click the iFrame button (screenshot below) at the top of the Design tab. This will open the iFrame modal where you can configure your settings:

  • Reveal Tracking ID (rtid): Attach a unique ID to an interview so it can be matched with external data. rtid=RTIDGOESHERE

  • Interview Theme: Set to the participant's system default, light mode, or dark mode. Defaults to system default. colorMode=light/dark

  • Show Progress Bar: Display participant progress at the top of the interview. showProgress=true

  • Show Splash: Show the chatbot's description splash screen. showSplash=true

  • Show Title: Show the chatbot's title. showTitle=true

For these options to work correctly, you must use the iframe=true query parameter, which is included in the URL you copy from the embed modal. Here's example iFrame code with everything enabled:

Example
<iframe src="https://interview.dev.getreveal.ai/i/revealai-demo?iframe=true&rtid=RTIDGOESHERE&showProgress=true&showSplash=true&showTitle=true&colorMode=dark" />

Attaching a tracking ID with rtid

To attach a tracking ID, use the rtid query parameter: https://interview.getreveal.ai/i/revealai-demo?rtid=ABC123 (where ABC123 is your tracking ID). This is typically used when embedding an interview to match responses with your external system IDs. These tracking IDs will appear in your Reveal dashboard and data exports.

Testing your tracking ID:

  1. Complete an interview in preview mode with your rtid parameter

  2. Go to the Collect Dashboard and turn on "Show Preview Interviews"

  3. Scroll to the "Transcripts" section to find your test interview

  4. Verify the Tracking ID appears correctly

If the tracking ID doesn't appear or looks incorrect, contact the RevealAI team.

Communicating with the iFrame

The interview uses window.postMessage to communicate to / from the parent page.

The interview emits a javascript event to notify the parent page when the interview is complete. The payload looks like:

Example
{
  type: “reveal-ai-emit-end-interview”, 
  data: {session_id: “sessionIdGoeshere”}
}

And can be handled with code in the parent page like so:

Example
window.addEventListener("message", (event) => {
  if (event.data.type === "reveal-ai-emit-end-interview") {
    // do whatever you need to do 
  }
});