Notion Embed HTML Code: Complete Reference Guide

Basic Embed Code

Simple Iframe

<iframe 
  src="https://your-workspace.notion.site/Page-Name-abc123"
  width="100%"
  height="600"
  frameborder="0"
>
</iframe>

With Styling

<iframe 
  src="https://your-workspace.notion.site/Page-Name-abc123"
  style="width: 100%; height: 600px; border: none; border-radius: 8px;"
>
</iframe>

Responsive Embeds

Aspect Ratio Container

<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;
  <iframe 
    src="https://your-workspace.notion.site/Page-Name-abc123"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

Full Height

<style>
  .notion-embed-container {
    width: 100%;
    height: 100vh;
  }
  .notion-embed-container iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
</style>
<div class="notion-embed-container
  <iframe src="https://your-workspace.notion.site/Page-Name-abc123"></iframe>
</div>

Mobile Responsive

<style>
  .notion-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }
  .notion-wrapper iframe {
    width: 100%;
    min-height: 600px;
    border: none;
  }
  @media (max-width: 768px) {
    .notion-wrapper iframe {
      min-height: 400px;
    }
  }
</style>
<div class="notion-wrapper
  <iframe src="https://your-workspace.notion.site/Page-Name-abc123"></iframe>
</div>

Advanced Options

With Loading State

<div class="notion-container" style="position: relative; min-height: 600px;
  <div class="loading-spinner" id="loader" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    Loading...
  </div>
  <iframe 
    src="https://your-workspace.notion.site/Page-Name-abc123"
    style="width: 100%; height: 600px; border: none;"
    onload="document.getElementById('loader').style.display='none'"
  ></iframe>
</div>

Lazy Loading

<iframe 
  src="https://your-workspace.notion.site/Page-Name-abc123"
  style="width: 100%; height: 600px; border: none;"
  loading="lazy"
></iframe>

Using Notion Embed Service

Better HTML with Notion Embed:

<!-- Optimized embed from Notion Embed -->
<iframe 
  src="https://notionembed.com/embed/your-embed-id"
  style="width: 100%; min-height: 800px; border: none;"
  loading="lazy"
  title="Your Page Title"
></iframe>

Benefits:

Framework Examples

React

function NotionEmbed({ pageUrl }) {
  return (
    <iframe
      src={pageUrl}
      style={{
        width: '100%',
        minHeight: '600px',
        border: 'none'
      }}
      loading="lazy"
    />
  );
}
// Usage
<NotionEmbed pageUrl="https://notion.site/..." />

Vue

<template>
  <iframe
    :src="pageUrl"
    class="notion-embed"
    loading="lazy"
  />
</template>
<script>
export default {
  props: ['pageUrl']
}
</script>
<style scoped>
.notion-embed {
  width: 100%;
  min-height: 600px;
  border: none;
}
</style>

Next.js

export default function NotionPage({ embedUrl }) {
  return (
    <main>
      <iframe
        src={embedUrl}
        className="w-full min-h-screen border-none"
        loading="lazy"
      />
    </main>
  );
}

FAQ

What URL format should I use?

Use the public page URL: https://workspace.notion.site/Page-Name-id

Can I customize the embedded content?

Not with standard iframes. Use Notion Embed for customization.

Is the iframe secure?

Yes, iframes are sandboxed by browsers. The embedded content can't access your site.

Why doesn't my embed show?

Check that the page is public and the URL is correct.

Conclusion

Notion embed HTML is straightforward:

Get optimized embed code →

---

Related: Embed in Website | Use Notion as Website