> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qode.world/llms.txt
> Use this file to discover all available pages before exploring further.

# Iframe Embedding

> Embed the Qode interview experience directly into your application.

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](/api-reference/integration) endpoint.

Use the following HTML snippet to embed the interview:

```html theme={null}
<iframe
  src="https://turing.qode.world/interview/{INTERVIEW_ID}"
  width="100%"
  height="100%"
  frameborder="0"
  allowfullscreen
  allow="display-capture; camera; microphone; fullscreen; window-management"
>
</iframe>
```

## Configuration Details

### Required Permissions

The `allow` attribute is **critical**. You must include `display-capture; camera; microphone; fullscreen; window-management` to ensure the candidate can:

* Use their webcam and microphone for the interview.
* Enter fullscreen mode for a distraction-free environment.
* Fullscreen recroding

### 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.

```html theme={null}
<!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="display-capture; 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>
```
