Skip to main content
Qode allows you to embed the entire interview interface within your own application using an HTML iframe. This provides a seamless experience for candidates, letting them complete assessments without ever leaving your platform.

​
Quick Start

To embed an interview, you simply need the unique Interview URL returned by the Create Interview endpoint. Use the following HTML snippet to embed the interview: 
<iframe
  src="https://turing.qode.world/interview/{INTERVIEW_ID}"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
  allow="camera; microphone; fullscreen; window-management"
>
</iframe>

​
Configuration Details

​
Required Permissions

The allow attribute is critical. You must include camera; microphone; fullscreen to ensure the candidate can:
  • Use their webcam and microphone for the interview.
  • Enter fullscreen mode for a distraction-free environment.

​
Responsive Sizing

For the best results, we recommend setting the iframe’s width and height to 100% of its parent container. Ensure the parent container has a defined height (e.g., 100vh or a specific pixel value) so the iframe renders correctly.

​
Full Page Example

Here is a complete HTML example showing how to make the iframe responsive and fill the entire browser window. 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Qode Interview</title>
    <style>
      /* Reset margins and padding for full-screen layout */
      body,
      html {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden; /* Prevent scrollbars on the body */
      }

      /* Container to hold the iframe */
      .interview-container {
        width: 100%;
        height: 100vh; /* 100% of the viewport height */
      }
    </style>
  </head>
  <body>
    <div class="interview-container">
      <!-- Replace the src URL with your actual interview link -->
      <iframe
        src="https://turing.qode.world/interview/n4EVX"
        width="100%"
        height="100%"
        frameborder="0"
        allowfullscreen
        allow="camera; microphone; fullscreen; window-management"
      >
      </iframe>
    </div>
    <script>
        (() => {
            window.addEventListener("message", (event) => {
                console.log(event);
                if (event.data?.type === "candidate_end_interview") {
                    alert("received `candidate_end_interview`")
                }
				if (event.data?.type === "tracy_end_interview") {
                    alert("received `tracy_end_interview`")
                }
            });
        })();
    </script>
  </body>
</html>