A Step-by-Step Guide on How to Embed a Notion Page into Your Website

Do not index

Notion is an effective team collaboration, project management, and note-taking tool. Notion for Business takes the standard Notion setup and tailors it for teams and companies. This includes advanced permissions, admin controls, analytics, and more. One of the most valuable aspects of Notion for Business is creating a public-facing Notion page that can be embedded into websites. This is especially helpful for teams sharing internal projects like documentation, roadmaps, or other resources with external stakeholders.

External stakeholders may include clients, vendors, partners, or organizational teams. Embedding a Notion page into a website allows you to control the flow of information, maintain brand consistency, and improve organization and navigation. This guide will provide step-by-step instructions on how to embed a Notion page into a website.

One way to maximize your Notion for Business experience is to use NoteForms's solution, Notion Forms, to automate information shared on your Notion pages.

What is Notion Embedding?

Notion embedding means integrating content from Notion into a website. When you embed a Notion page, your website pulls the content from Notion and displays it in a frame, often called an iFrame. This allows users to interact with the Notion page directly from your site. The content is dynamic and updates automatically whenever the Notion page is updated.

Why Notion Embedding?

Notion embedding creates a better experience for both website visitors and Notion users. For website visitors, it provides a more interactive experience. Instead of downloading a static document or opening a separate page that contains Notion content, they can engage with the Notion page in real time. This is especially useful for project timelines, FAQs, or dashboards. For Notion users, embedding keeps information centralized. By embedding Notion, you maintain a single source of truth for your data. Instead of updating the same content separately in Notion and on your website, you only need to update it once in Notion, and it will reflect on your site automatically.

The Benefits of Embedding Notion Pages into Websites

1. Interactivity

Visitors to your site can interact with the Notion page in real-time, including clicking on links, viewing databases, and interacting with checklists or tables. This is especially useful for project timelines, FAQs, or dashboards.

2. Centralized Information

By embedding Notion, you maintain a single source of truth for your data. Instead of updating the same content separately in Notion and on your website, you only need to update it once in Notion, and it will reflect on your site automatically.

3. Ease of Use

You don’t need to know complex coding or web development to embed a Notion page. With a simple copy-paste of an iFrame or using third-party tools, you can easily integrate Notion into your existing website.

4. Versatility

You can embed various types of content, including task lists, blog posts, project trackers, and even design files. This makes Notion a versatile tool for content management.

5. Professional Look

Embedding Notion pages allows you to keep a consistent, professional look on your website while offering powerful functionalities like real-time updates, content management, and interaction.

Why Notion Embedding is Essential for Productivity

Notion embedding improves productivity for both teams and website visitors. For teams, it reduces the need to manually copy and paste content or recreate data on your website, making content management more efficient. It also makes it easy to share live project updates, timelines, or documentation with clients or stakeholders without needing multiple updates across different platforms.

For website visitors, Notion embedding provides a dynamic, interactive experience that can improve engagement and provide them with up-to-date information at all times.

Notion Import CSV

Notion Automations

Notion Formulas

How to Use Notion Calendar

Notion Recurring Tasks

Notion Plugins

How to Make Notion Aesthetic

Notion Reminders

How Do You Prepare Your Notion Page for Embedding?

Get Your Notion Page for Embedding

Before you embed your Notion page, ensuring the content is well-structured and easy to navigate is crucial. A well-organized page improves user experience and ensures that the information displayed on your website is clear and accessible.

How to Organize

Step 1

Review the content on your Notion page to make sure it is relevant and up to date. Remove any unnecessary or incomplete sections.

Step 2

Structure your content logically using headers, subheaders, bullet points, and tables. This will make it easier for website visitors to navigate the page.

Step 3

Ensure that databases, checklists, or media (images, videos) are properly aligned and formatted. Clean layouts translate better when embedded on external websites.

Expert Tip

In Notion, you can use linked databases or synced blocks to display information from multiple pages on one dashboard, streamlining data organization. This allows you to create a single view of different parts of your Notion workspace.

For your Notion page to be viewable by anyone who visits your website, you need to adjust the page’s sharing settings. Users cannot see or interact with the embedded content if these settings are not configured correctly.

Step 1

Navigate to your Notion page and click the “Share” button in the top-right corner.

Step 2

Toggle the "Share to Web" option to make your page publicly accessible.

Step 3

Choose additional options like “Allow Comments” or “Allow Editing” if you want website visitors to interact with the content (such as filling out checklists or leaving comments).

Step 4

Copy the public link generated by Notion, which will be used in the embedding process.

Expert Tip

For security and privacy, remove or hide sensitive or private information from the page before enabling public access. If users need to view certain sections without editing, ensure “Allow Editing” is disabled.

Preview Your Notion Page Before Embedding

You are previewing how the Notion page looks and functions before embedding is crucial. This ensures that your page appears correctly when displayed on your website and that any design or formatting adjustments can be made in advance.

How to Preview

Step 1

Open the Notion page in a new incognito/private browser window to simulate how it will look to a first-time visitor. This will help you see how the public version appears and behaves.

Step 2

Check all interactive elements (tables, buttons, and links) to ensure they function correctly.

Step 3

Adjust the size of your browser window to see how the page adapts to different screen sizes. This will help ensure the page is responsive for mobile users.

Expert Tip

Test the page across different devices (desktop, tablet, and mobile) to ensure the embedded page will display well on all screen sizes. Optimizing for mobile devices is crucial as a significant portion of web traffic comes from mobile users.

Unpacking NoteForms: The Notion Forms Builder That Supercharges Your Workflow

NoteForms's Notion forms builder supercharges Notion by enabling seamless form creation that integrates directly with Notion databases. Our key features include creating forms from existing Notion DBs, storing submissions in Notion DBs, unlimited forms and submissions, full customization (custom domains, design, logic, webhooks), embeddable forms, integrations (email, Zapier, Slack), support for Notion-specific columns (relation, people), writing to page body, and database views as a sub-product.

We cater to Notion power users, SaaS startups, and educators, solving challenges like inefficient data entry, fragmented workflows, and administrative overload. NoteForms streamlines data collection, centralizes management, and simplifies workflows, boosting productivity while cutting costs for Notion enthusiasts. Create a form for free today with our Notion forms builder!

How Do You Embed Your Notion Page Using an iFrame?

What Exactly is an iFrame?

An iFrame is an HTML element that embeds another web page or document into your website. It allows your website visitors to interact with external content (like a Notion page) without leaving your site.

Why Use iFrames for Notion Embeds?

iFrames provides a simple, flexible way to integrate interactive Notion pages directly into your website, allowing users to view real-time updates from your Notion workspace.

Step-by-Step Guide to Embed Your Notion Page Using iFrame

Step 1: Copy the Public Notion Link

After following the steps in Section 1, you should have a public link for your Notion page. This link will be used in the iFrame to display the page on your website. Go to your Notion page and ensure “Share to Web” is enabled, then copy the public link generated by Notion.

Step 2: Access Your Website’s HTML Editor

Open the HTML editor for the webpage where you want to embed the Notion page. This could be done through a content management system (CMS) like WordPress, Wix, or any other platform that allows HTML customization. If you are using a CMS, go to the section where you can add custom HTML code, such as a custom HTML block or widget.

Step 3: Insert the iFrame Code

Paste the following iFrame code into your HTML editor:

```html

<iframe

src="YOUR_NOTION_LINK_HERE"

width="100%"

height="600px"

frameborder="0">

</iframe>

```

Replace YOUR_NOTION_LINK_HERE with the actual public link to your Notion page.

Step 4: Adjust the Dimensions

You can customize the iFrame's dimensions to fit your website's design and layout. Adjust the width and height as needed. Width: You can set this to a specific size (e.g., 800px) or to a percentage of the page width (e.g., 100%). Height: Ensure the height is sufficient to display the full content of the Notion page (e.g., 600px or more).

Step 5: Save and Preview Your Changes

After inserting the iFrame code, save your changes and preview the webpage to ensure the Notion page is displayed correctly. Ensure the content is visible, interactive, and formatted correctly for different screen sizes.

Customizing the iFrame Display

Adjusting Responsiveness

Responsive Design

If your website is viewed on desktop and mobile devices, your iFrame must be responsive. To adapt to different screen sizes, ensure the iFrame's width is 100%. This ensures that the Notion page is accessible and visually appealing on all devices.

Scrollbars and Borders

By default, the iFrame will have no borders (thanks to the frameborder="0" setting). You can keep this or add a border by modifying the code. If the Notion page is larger than the iFrame, consider adding scrollbars:

```html

<iframe

src="YOUR_NOTION_LINK_HERE"

width="100%"

height="600px"

frameborder="0"

scrolling="yes">

</iframe>

```

This will allow visitors to scroll through the content if it overflows beyond the set height of the iFrame.

Expert Tip: Use Responsive Tools for Smooth Integration

Why It Matters

Mobile and tablet traffic accounts for a significant portion of website visitors. Ensuring that your iFrame adjusts to different screen sizes is crucial for maintaining a good user experience.

How to Ensure Responsiveness

Test the page on different devices and screen sizes. Use browser tools like Google Chrome DevTools to simulate how the page will appear on mobile, tablet, and desktop screens. You can also add custom CSS to make the embedded Notion page more responsive:

```css

iframe {

width: 100%;

height: auto;

}

```

Unpacking NoteForms: The Notion Forms Builder That Supercharges Your Workflow

How Do You Use Third-Party Embedding Tools for Notion Pages?

What Are Third-Party Embedding Tools?

Third-party embedding tools allow you to integrate external content, such as Notion pages, into your website with advanced display, customization, and functionality options.

Why Use Third-Party Embedding Tools for Notion Pages?

These tools simplify the embedding process by providing pre-built templates, visual editors, and customization options beyond the standard iFrame approach. They are ideal for users who want to customize their Notion pages' look, feel, and interactivity without writing complex code.

Popular Embedding Tools for Notion

Embedly

Embedly is a widely used embedding tool that allows you to turn any URL, including Notion public pages, into responsive embedded content with a few clicks. Compared to iFrames, it provides more customization options, such as adjusting the visual design, adding interactive elements, and creating responsive embeds.

How to Use Embedly

Step 1: Go to Embedly.com and create a free account.

Step 2: Copy the public link to your Notion page (generated earlier) and paste it into Embedly’s URL input box.

Step 3: Customize the size, layout, and interactivity of the Notion page directly within Embedly.

Step 4: Copy the embed code generated by Embedly and paste it into your website’s HTML editor, just like an iFrame.

Why Use Embedly

Embedly allows you to have greater control over how your Notion page is displayed on your website. You can adjust the style and dimensions and optimize the embed for mobile responsiveness, ensuring a professional and seamless integration.

Elfsight

Elfsight offers a range of widgets, including website embedding tools, that help enhance the functionality and aesthetics of your website embeds. It provides a more visual, drag-and-drop approach to embedding content like Notion pages.

How to Use Elfsight

Step 1: Sign up on Elfsight.com and select your desired type (e.g., an HTML widget for embedding Notion).

Step 2: Customize the embedded page's display settings, size, and behavior using the widget’s visual editor.

Step 3: Once your widget is set up, paste the embed code into your website’s HTML editor.

Why Use Elfsight

Elfsight is user-friendly and allows non-technical users to customize embeds without coding experience. The visual editor makes it easier to control how Notion pages integrate into your website, with options to adjust the style, add animation effects, and create mobile-responsive designs.

Step-by-Step Guide to Using Embedly for Embedding Notion Pages

Step 1: Generate Your Notion Page Link

Follow the steps from Section 1 to make your Notion page public and copy the public link.

Step 2: Access Embedly’s Embedding Platform.

Step 3: Customize the Embed.

In the customization panel, you can adjust settings such as width and height and whether or not you want the Notion page to have scroll bars. You can also preview how the Notion page will appear on your website.

Step 4: Copy and Paste the Embed Code

Once you’re satisfied with your customizations, copy the embed code generated by Embedly and place it into your website’s HTML editor, just like an iFrame.

Step 5: Test and Optimize

After embedding the page, view your website to ensure the Notion page displays correctly. Test on desktop and mobile devices to ensure the embedded Notion page is responsive.

Benefits of Using Third-Party Tools Over iFrames

More Customization Options

Tools like Embedly and Elfsight provide far more customization options than basic iFrames. You can adjust the visual presentation, add interactivity, and track analytics on how users engage with the embedded content.

Ease of Use

Third-party tools simplify the embedding process, particularly for non-technical users who want to avoid working with HTML code. They offer drag-and-drop interfaces and visual editors that make customization easy.

Mobile Responsiveness

These tools automatically optimize the embedded content for mobile devices, ensuring a smooth, responsive experience for users on any device.

Enhanced Functionality

You can integrate additional features, such as animations and scroll effects, or even combine with other tools like Google Analytics to track user engagement with the embedded Notion page.

Notion Lock Database

Notion Knowledge Base

Notion Export

Notion Graphs

Notion Synced Blocks

Notion Embeds

How to Create a Database in Notion

How to Share Notion Page

Notion Analytics

Notion Webhooks

Using Notion as a CRM

Best Notion Integrations

Common Challenges Users May Face When Embedding Notion Pages into a Website and How to Overcome Them

Not Loading? Here’s How to Fix Your Notion Page Embedding Issues

Sometimes, embedded Notion pages fail to load correctly. You might see a blank frame or an incomplete version of your page. To fix it, first check that the “Share to Web” option in Notion is toggled on. If this setting is not enabled, the embedded page won’t be accessible to anyone logged into your Notion account. Next, if you’re using iFrame, check the code to ensure the Notion URL is correct and there are no syntax errors.

Pro Tip

Test the public Notion link in a private or incognito browser to ensure it’s accessible without login credentials. This simulates how your website visitors will experience the page.

Notion Page Not Responsive? Here’s the Fix!

One of the most common issues with embedded Notion pages is that they don’t display well on mobile devices. Visitors using mobile may see a misaligned or partially displayed page. To fix this, use responsive settings in your iFrame code. Specifically, use width="100%" in the code so the embedded Notion page adapts to the screen size. Setting a fixed pixel width can cause display issues on mobile devices.

You can also utilize third-party tools like Embedly and Elfsight. These automatically optimize embedded content for mobile devices, so consider using them for better responsiveness.

Pro Tip

Always test the embedded Notion page on multiple devices—desktop, tablet, and smartphone—to ensure it displays correctly. Adjust the height in the iFrame code as necessary to avoid scrolling issues.

Slow Loading Times? Here’s How to Speed Up Your Notion Page

Embedding Notion pages can lead to slow load times, mainly if the page contains heavy content like images, tables, or databases. To improve this, first, optimize the content in Notion. Compress large images and remove unnecessary elements like oversized tables or non-essential sections. If your Notion page contains several databases, consider simplifying or paginating them to reduce load time.

Next, leverage a CDN (Content Delivery Network). If your website or Notion content is global, a CDN can help improve load speeds by serving content from servers closer to the visitor’s location.

Pro Tip

Try embedding more straightforward pages and gradually adding content to avoid overwhelming your website’s load time. If needed, break larger Notion pages into smaller, more specific pages.

Scrollbars in Embedded Notion Pages? Here’s the Quick Fix

Scrollbars can sometimes appear within the embedded Notion page. This disrupts the visual flow of your website and creates a less user-friendly experience. To fix it, increase the iFrame height. If scrollbars appear due to insufficient height, increase the height parameter in the iFrame code (e.g., from 600px to 800px). This ensures more content is visible at once without the need to scroll.

You can also add CSS customization. Use CSS to control the scroll behavior. If you want to disable scrollbars within the iFrame, set the scrolling attribute to "no."

Pro Tip

Scrollbars are often an indicator that the iFrame’s height is too short. If possible, dynamically adjust the iFrame size or use responsive design tools to fix the height based on the device viewing the page.

Accidentally Embedding a Private Notion Page? Here’s the Solution

Accidentally embedding private Notion pages can cause errors when visitors try to access the content. To fix this, ensure your Notion page is shared publicly before embedding it on your website. Check the sharing settings and test the link in an incognito browser to confirm accessibility.

Be cautious about what content you share publicly. Double-check the information on your Notion page to ensure no sensitive data is exposed to the public.

Pro Tip

If you need to limit access to specific groups or individuals, use password-protected pages or restricted sharing links. Notion does not have native password protection for pages, but you can combine it with third-party solutions for added security.

Using NoteForms to Enhance Your Workflow with Notion

Using NoteForms to Automate Data Collection in Notion

How It Works

Instead of manually collecting data (e.g., client feedback, project updates, or customer information), NoteForms allows you to automate the process by embedding forms into your website or Notion pages. All data submitted through the forms is automatically synced with your Notion databases.

Example Use Case

A project manager can embed a project update form on the team's Notion dashboard. Team members can submit their updates directly through the form, and the information will instantly populate the relevant Notion database, providing real-time progress tracking.

Expert Tip

Use NoteForms to automate workflows that require frequent data input, such as onboarding new clients, collecting customer feedback, or tracking project milestones. This ensures data accuracy and eliminates the need for manual data entry.

Simplifying Task and Project Management with NoteForms

How It Works

Integrating NoteForms with Notion allows you to create custom task or project forms for internal or external stakeholders. Submissions to these forms can automatically generate new tasks or update existing ones within your Notion workspace.

Example Use Case

A marketing team can create a campaign planning form using NoteForms. As team members submit their campaign ideas or strategies, the information is automatically added to a Notion database, which can be reviewed and assigned to team members.

Pro Tip

Leverage NoteForms’ customization options to create specific fields that capture important details such as project due dates, priorities, or assigned personnel, making it easier to manage and track tasks in Notion.

Enhancing Collaboration and Workflow with NoteForms Integrations

How It Works

NoteForms supports integrations with third-party tools like Zapier, Slack, and email notifications. This allows for better team collaboration and real-time updates. For example, NoteForms can trigger an email notification or Slack message to the relevant team members once a form is submitted.

Example Use Case

A team leader uses NoteForms to create a form for weekly progress reports. When a team member submits their report, NoteForms automatically updates the Notion database and sends a Slack message notifying the team leader of the submission. This keeps everyone informed and reduces the need for follow-ups.

Pro Tip

Automate notifications and alerts to ensure necessary updates, like task completions or new submissions, don’t go unnoticed. This can significantly boost productivity by keeping the workflow uninterrupted and reducing manual follow-ups.

Customization Options in NoteForms for Enhanced Productivity

How It Works

NoteForms provides full customization options, including custom domains, branding, form logic, and webhooks, to tailor forms for your business needs. This ensures that your forms capture the correct data and align with your branding and workflow requirements.

Example Use Case

A business can customize NoteForms to gather customer inquiries via their website. The form is embedded in the Notion page and fully customized with the company’s branding, ensuring a seamless user experience. All inquiries are automatically stored in a Notion database, where the team can follow up with customers efficiently.

Expert Tip

Use form logic to create conditional questions, ensuring users only see relevant fields based on previous responses. This enhances the user experience and collects accurate data.

Best Use Cases for Embedding Notion Pages

Boost Your Blogging with Notion

Notion can act as a content management system CMS for bloggers or writers. By embedding a Notion page directly into a website, users can showcase blog posts or write portfolios that are easy to update and maintain. The embedded page functions just like a standard blog but with the added flexibility and interactivity of Notion's features.

Why This Is So Effective

Real-Time Updates

When the Notion page is updated with new blog content, it immediately reflects on the website without requiring further action. This eliminates the need to reformat or re-upload content to the website.

Interactive Elements

Writers can include interactive checklists, tables, or databases in their blog posts, which provides more engaging content for readers.

A Practical Example

A freelance writer can embed their portfolio of writing samples and articles in their website, ensuring it stays updated with their latest work. The Notion page can include additional interactive elements, such as a writing schedule or a list of upcoming publications.

A Pro Tip

Use Notion's database views to filter and sort blog content by category, date, or tags. This allows for more dynamic and organized content presentation on your website.

Notion Project Roadmaps Don’t Just Look Good; They Work Like a Dream

Notion pages can be used to create detailed project roadmaps, which include timelines, key milestones, and deliverables. By embedding this roadmap into a client-facing website or an internal dashboard, stakeholders can easily monitor the project's progress in real time.

Why This Is So Effective

Transparency and Real-Time Tracking

Clients and team members can view project updates, track milestones, and understand project timelines without asking for constant updates.

Collaboration

Project managers can use Notion's collaborative features to assign tasks, update deliverables, and modify timelines. The changes are reflected immediately on the embedded page.

A Practical Example

A software development firm can embed a project timeline for a client, showing upcoming features, deadlines, and progress. The client can log in anytime to track the project's current status without waiting for updates.

A Pro Tip

Use Notion's database filters to create a Gantt chart or calendar view that helps visualize project milestones and deadlines. This makes the roadmap more intuitive for stakeholders.

Build a Digital Resume or Portfolio with Notion

Individuals can use Notion to create dynamic, interactive resumes or portfolios. By embedding the Notion page into a personal website or LinkedIn profile, users can showcase their work, qualifications, and achievements in a visually appealing format that's easy to update.

Why This Is So Effective

Always Up-to-Date

Changes to your resume or portfolio in Notion are instantly reflected on your embedded page, ensuring potential employers or clients always see your most recent work.

Interactive Features

You can include embedded links, media, and databases to show the depth of your work, from articles you've written to projects you've completed, all in a single place.

A Practical Example

A graphic designer can embed their portfolio into their website. As they complete new projects, they can update their portfolio on Notion, and the changes will be reflected on their site without additional uploads.

A Pro Tip

Use different Notion views (gallery, list, or table) to display various sections of your portfolio in a clean, organized way. This allows employers or clients to navigate through your work easily.

Use Notion to Create a Knowledge Base or Help Center

Businesses can use Notion to create comprehensive knowledge bases or help centers. By embedding these pages on their websites, customers or employees can access FAQs, tutorials, and documentation directly from the site.

Why This Is So Effective

Centralized Information

Notion allows you to organize and structure the knowledge base in a way that is easily searchable and intuitive for users. This reduces the need for support requests, as users can quickly find the necessary information.

Regular Updates

When new questions arise, or new features are released, businesses can quickly update their knowledge base within Notion, and the changes will be reflected on their website immediately.\

A Practical Example

A SaaS company embeds its Notion-based help center into its website. Customers can search for troubleshooting tips, how-to guides, or product documentation without leaving the main site.

A Pro Tip

Use Notion's database features to create filters and categories within your knowledge base, making it easier for users to find the exact information they need. You can also embed videos or other media for more in-depth tutorials.

Unpacking NoteForms: The Notion Forms Builder That Supercharges Your Workflow

NoteForms' Notion forms builder supercharges Notion by enabling seamless form creation that integrates directly with Notion databases. Our key features include creating forms from existing Notion DBs, storing submissions in Notion DBs, unlimited forms and submissions, full customization (custom domains, design, logic, webhooks), embeddable forms, integrations (email, Zapier, Slack), support for Notion-specific columns (relation, people), writing to page body, and database views as a sub-product.