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

# Embedding Omni in your Notion instance

> Embed Omni dashboards in Notion documents using iframes.

export const categoryIcons = {
  'administration': 'lock',
  'api': 'terminal',
  'connections': 'database',
  'dashboards': 'table-columns',
  'embed': 'code',
  'errors': 'exclamation',
  'modeling': 'wrench',
  'patterns': 'plus',
  'schedules & alerts': 'envelope',
  'visualizations': 'chart-column',
  'workbooks': 'book'
};

export const GuideSidebar = ({category, relatedLinks, updatedDate}) => {
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const sidebar = document.querySelector('.guide-sidebar');
    if (!sidebar) return;
    let container = sidebar.parentElement;
    while (container && !container.querySelector('.guide-header')) {
      container = container.parentElement;
    }
    if (container && !container.classList.contains('guide-page-layout')) {
      container.classList.add('guide-page-layout');
    }
  }, []);
  React.useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const scrollPercent = docHeight > 0 ? scrollTop / docHeight * 100 : 0;
      setProgress(Math.min(100, Math.max(0, scrollPercent)));
    };
    window.addEventListener('scroll', handleScroll, {
      passive: true
    });
    handleScroll();
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  const icon = category ? categoryIcons[category.toLowerCase()] || 'book' : 'book';
  return <aside className="guide-sidebar">
      <div className="guide-sidebar-content">
        <a href="/guides" className="guide-sidebar-back">
          <Icon icon="arrow-left" iconType="solid" size={14} />
          <span>All guides</span>
        </a>

        <div className="guide-sidebar-section">
          <div className="guide-sidebar-label">Progress</div>
          <div className="guide-sidebar-progress">
            <div className="guide-mascot">
              <svg viewBox="0 0 688 690" width="48" height="48">
                <defs>
                  <clipPath id="progressClip">
                    <rect x="0" y={0} width="688" height={progress * 6.9} />
                  </clipPath>
                </defs>

                {}
                <path d="M343.67 1.5C542.684 1.5 685.84 149.351 685.84 344.84C685.84 540.328 542.685 688.18 343.67 688.18C144.655 688.18 1.5 540.318 1.5 344.84C1.50007 149.361 144.655 1.50005 343.67 1.5Z" fill="#FCFCF7" stroke="#FF5FA2" strokeWidth="3" />

                {}
                <path d="M343.67 0C143.81 0 0 148.55 0 344.84C0 541.13 143.81 689.68 343.67 689.68C543.53 689.68 687.34 541.14 687.34 344.84C687.34 148.54 543.53 0 343.67 0Z" fill="#FF5FA2" clipPath="url(#progressClip)" />

                {}
                <path d="M337.89 319.29C337.89 336.75 322.49 350.14 302.81 349.83C286.18 349.57 273.89 337.29 274.37 321.45C274.88 304.82 290.91 290.88 309.98 290.44C325.69 290.09 337.88 302.69 337.88 319.29H337.89Z" fill="#4D122C" />
                <path d="M566.17 319.29C566.17 336.75 550.77 350.14 531.09 349.83C514.46 349.57 502.17 337.29 502.65 321.45C503.16 304.82 519.19 290.88 538.26 290.44C553.97 290.09 566.16 302.69 566.16 319.29H566.17Z" fill="#4D122C" />
                <path d="M367.74 342.07C360.22 346.32 359.4 354.9 370.62 366.4C381.85 377.9 399.76 389.56 420.81 389.18C441.88 389.1 460.67 377.72 472.47 363.53C473.83 361.93 478.84 356.88 478.51 351.07C478.32 348.35 476.17 341.19 467.83 341.38C463.46 341.44 461.21 343.68 456.69 347.36C445.2 356.14 432.7 361.21 420.56 361.27C408.43 361.43 395.68 356.17 385.39 347.22C380.32 342.81 375.25 337.82 367.74 342.07Z" fill="#4D122C" />
              </svg>
            </div>
            <span className="guide-sidebar-progress-text">{Math.round(progress)}%</span>
          </div>
        </div>

        {category && <div className="guide-sidebar-section">
            <div className="guide-sidebar-label">Category</div>
            <div className="guide-sidebar-category">
              <Icon icon={icon} iconType="solid" size={14} />
              <span>{category}</span>
            </div>
          </div>}

        {updatedDate && <div className="guide-sidebar-section">
            <div className="guide-sidebar-label">Last updated</div>
            <div className="guide-sidebar-date">{updatedDate}</div>
          </div>}

        {relatedLinks && relatedLinks.length > 0 && <div className="guide-sidebar-section">
            <div className="guide-sidebar-label">Related</div>
            <ul className="guide-sidebar-links">
              {relatedLinks.map((link, index) => <li key={index}>
                  <a href={link.href}>{link.title}</a>
                </li>)}
            </ul>
          </div>}
      </div>
    </aside>;
};

export const GuideTitle = ({title}) => {
  return <div className="guide-header">
      <h1 className="guide-title">{title}</h1>
    </div>;
};

<GuideSidebar
  categoryIcons={categoryIcons}
  category="embed"
  updatedDate="April 2026"
  relatedLinks={[
{ title: "Embedding docs", href: "/embed" },
{ title: "Embedding in internal apps", href: "/guides/embed/omni-in-internal-app" },
{ title: "Embedding in Salesforce", href: "/guides/embed/omni-in-salesforce" }
]}
/>

<GuideTitle title="Embedding Omni in your Notion instance" />

If your team runs on Notion - wikis, project docs, team pages - embedding Omni dashboards lets you incorporate live data right alongside the context that explains it. Instead of linking out to a separate BI tool, readers can see the numbers inline as they scroll through a planning doc, team update, or KPI page.

This guide walks through embedding an Omni dashboard in a Notion document using an iframe.

## Limitations

While not required, viewing the Omni iframe in Notion works best on the **web** version of Notion.

## Requirements

To follow this guide, you'll need:

* Permissions in Omni that allow you to access the dashboard you want to embed
* Permissions in Notion that allow you to create and edit documents

Additionally, users who view the Omni iframe in Notion must have permissions in Omni that allow them to view the dashboard being embedded. Viewers of the content will be prompted to log in using the iframe and if they have sufficient permissions, the content will display.

<Steps titleSize="h2">
  <Step title="Retrieve the dashboard's embed URL" id="retrieve-embed-url">
    1. In a [published](/content/develop/drafts#publishing-drafts) Omni workbook or dashboard, click the **Share** button to open the share modal. You can also navigate to **File > Document settings**.

    2. Click **Embed**.

    3. If desired, use the options in this tab to customize what content is embedded and how it displays for users. For example, you could embed a dashboard and only display it in dark mode. See [Customize embedded content](/share#customize-embed-content) for more information.

           <img src="https://mintcdn.com/omni-e7402367/VVbO0N3HRZOXstEa/share/images/dashboard-share-modal.png?fit=max&auto=format&n=VVbO0N3HRZOXstEa&q=85&s=6fb6fc99d3c9453f3bffcbae00974aa0" alt="Omni share modal with embed options" width="786" height="428" data-path="share/images/dashboard-share-modal.png" />

    4. Click the **Copy** button to copy the iframe URL. The example iframe URL below is for an Omni instance named `blobsrus` and includes settings for **Light/dark mode** (`prefersDark`) and **Theme** (`theme`):

       ```html wrap theme={null}
       <iframe src="https://blobsrus.omniapp.co/dashboards/a0554a7e?prefersDark=true&theme=dawn"></iframe>
       ```

    5) In a text editor, only copy the Omni URL. For example, if you copied a string like the following:

       ```html wrap theme={null}
       <iframe src="https://blobsrus.omniapp.co/dashboards/a0554a7e"></iframe>
       ```

       You will only want the URL:

       ```txt wrap theme={null}
       https://blobsrus.omniapp.co/dashboards/a0554a7e
       ```
  </Step>

  <Step title="Create an embed component in Notion" id="notion-component">
    1. In a Notion document, use the `/embed` command to create an embed component.
    2. Paste the Omni URL into the field:
           <img src="https://mintcdn.com/omni-e7402367/TQmDiBS3ovG-NUT5/guides/embed/images/notion-embed-link.png?fit=max&auto=format&n=TQmDiBS3ovG-NUT5&q=85&s=0abb3088284eb1cb622124f04f460c6e" alt="Notion embed component with the Omni dashboard URL pasted into the link field" width="594" height="275" data-path="guides/embed/images/notion-embed-link.png" />
    3. Click **Embed link**.
  </Step>

  <Step title="Test the iframe" id="test-iframe">
    Your Omni dashboard should now be embedded in Notion! 🎉

    Before you share the Notion document with other users, use the iframe to log into Omni. This allows you to check that the workbook or dashboard displays correctly after authentication.

    <img src="https://mintcdn.com/omni-e7402367/TQmDiBS3ovG-NUT5/guides/embed/images/notion-dashboard.png?fit=max&auto=format&n=TQmDiBS3ovG-NUT5&q=85&s=a305e76d4a368c825bf4240435fd031a" alt="An Omni dashboard embedded and rendered inside a Notion document" width="2674" height="1250" data-path="guides/embed/images/notion-dashboard.png" />
  </Step>

  <Step title="Share the Notion document" id="share-document">
    Share the Notion document with other users in your Notion instance. **Note**: Users will have to log into Omni with the iframe before they can view the workbook or dashboard content.
  </Step>
</Steps>