Embed Web Pages & Maps
Learn how to add and format different types of content blocks in Notion, including text, headings, and lists.
Learn how to embed live web pages, maps, and external content directly into your Notion pages. This guide covers embedding regular websites and Google Maps to create rich, interactive content that stays updated automatically.
When to Use Web Embeds vs Links
Embeds display live, interactive content directly within your Notion page, while regular links simply redirect users to external sites. Use embeds when you want users to interact with content without leaving your page, such as viewing maps, accessing tools, or displaying real-time data.
- **Embeds: **Interactive content displayed directly in the page (maps, tools, dashboards)
- **Bookmarks: **Preview cards with metadata that link to external content
- **Regular links: **Simple text links that redirect users to external pages
Supported Content Types
Notion supports embedding most publicly accessible web content, including:
- Google Maps and other mapping services
- Public websites and web applications
- Online tools and dashboards
- Social media posts and feeds
- Media players and interactive content
Some websites may block embedding for security reasons. If an embed doesn't work, try creating a bookmark instead, which will still provide a preview.
Embedding External Websites
Position your cursor where you want to add the embed and type /embed to open the block menu. You can also click the + Add Block button and search for embed options.
Choose Embed from the menu options. This is the general embed block that works with most external websites and web applications.
In the URL input field, enter the complete website address you want to embed (e.g., https://www.google.com/). Make sure to include the full URL including https://
Click Embed link to create the embed. Notion will attempt to load the website content directly in your page. If successful, you'll see the live website displayed within your Notion page.
The embedded website will appear as an interactive frame within your Notion page. You can interact with the embedded content directly, including clicking links, filling forms, or using any website features.
Embedding Google Maps
Google Maps requires a specific embed URL format. Follow these steps to embed interactive maps into your Notion pages:
Position your cursor where you want the map and create another embed block using /embed command or the block menu.
Enter the Google Maps URL (e.g., https://www.google.com/maps). You can use the general Maps URL or a specific location URL copied from Google Maps.
Click Embed link to embed Google Maps. The interactive map will load, allowing users to zoom, search locations, and get directions without leaving your Notion page.
The embedded Google Maps will be fully interactive. Users can search for locations, get directions, switch between map views (satellite, street, terrain), and use all standard Google Maps features.
Advanced Map Embedding
For specific locations or customized maps, you can use more detailed Google Maps URLs:
- **Specific location: **Search for a location in Google Maps, then copy the URL from the address bar
- **Custom embed code: **Use Google's embed code generator for more control over map appearance
- **Directions link: **Embed a map with pre-loaded directions between two points
Managing Embedded Content
Once embedded, you can customize and manage your content:
- **Resize: **Drag the corners of embedded content to adjust size
- **Replace URL: **Click the embed and select "Replace link" to change the URL
- **Caption: **Add descriptive text below the embed using the caption option
Best Practices & Troubleshooting
Always test embedded content on different devices. Some websites may have different mobile versions or may not display properly in embedded frames.
- **Security: **Some websites block embedding for security reasons. If an embed fails, try creating a bookmark instead
- **Performance: **Multiple embeds on one page may slow loading times. Use strategically
- **Permissions: **Embedded content inherits your page's sharing permissions. Private embeds won't be accessible to page viewers without appropriate permissions
Some websites have security policies that prevent embedding. This is called "X-Frame-Options" protection. Try creating a bookmark instead, which will still show a preview of the site.
Password-protected or login-required websites typically won't work as embeds since visitors would need to authenticate within the embed frame. Consider using bookmarks for these sites instead.
Search for the location in Google Maps, then copy the URL from the address bar. This URL will include the specific location and zoom level, which will be preserved in the embed.
Common Use Cases
- **Project documentation: **Embed design tools, prototypes, or live applications
- **Event planning: **Include maps showing event locations and directions
- **Travel planning: **Embed maps with destinations, booking sites, or travel tools
- **Research: **Display live data sources, calculators, or reference tools
Next Steps
Now that you can embed external web content, explore related features to enhance your pages: