TutorialStep-by-Step

How to Embed Widgets in WordPress, Notion & Shopify (Step-by-Step Guide)

A complete tutorial for embedding interactive, fullstack widgets and custom apps on the three most popular content and commerce platforms. Includes code examples, screenshots, and troubleshooting tips.

E
Embeddy Team
12 min read

Table of Contents

  1. 1. Introduction: Why Embed Widgets?
  2. 2. How Embeddy Embedding Works
  3. 3. Embedding Widgets in WordPress
  4. 4. Embedding Widgets in Notion
  5. 5. Embedding Widgets in Shopify
  6. 6. Quick Reference Table
  7. 7. Other Supported Platforms
  8. 8. Frequently Asked Questions

1. Introduction: Why Embed Widgets?

Embedding interactive widgets on your website, documentation, or online store is one of the most effective ways to increase engagement, capture leads, and deliver value directly where your audience already is. Instead of sending visitors to a separate app or tool, you bring the functionality to them.

But historically, embedding anything more complex than a YouTube video or a Google Form has been painful. You needed developers, custom code, server infrastructure, and cross-platform testing. That changes with Embeddy.ai.

If you are new to the concept of embeddable widgets, we recommend reading our primer: What Are Embeddable Widgets? For a guide on creating them without code, see How to Build Embeddable Widgets Without Code.

This tutorial covers the three platforms where we see the most embedding activity: WordPress (powering 43% of the web), Notion (the go-to workspace for teams and creators), and Shopify (the leading e-commerce platform). By the end, you will be able to embed any Embeddy widget on all three.

2. How Embeddy Embedding Works

Before we dive into platform-specific instructions, let us understand how Embeddy generates embed codes. Unlike simple iframe generators, Embeddy creates fullstack applications with real backends, databases, and API integrations -- then packages them into a single embeddable snippet.

The Embeddy Workflow

  1. 1Describe your widget using natural language in the Embeddy dashboard. For example: "A mortgage calculator that shows monthly payments with an amortization chart."
  2. 2Embeddy's AI builds the complete application -- frontend, backend, database, and all.
  3. 3Click "Share" or "Embed" to get your embed code. You will receive an HTML snippet that looks like this:
Embed Code (HTML)Copy this snippet
<iframe
  src="https://embeddy.ai/widget/YOUR_WIDGET_ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-read; clipboard-write"
  style="border: none; border-radius: 8px;"
></iframe>

Some widgets also offer a JavaScript embed option for more advanced control:

JavaScript EmbedAlternative method
<div id="embeddy-widget-YOUR_WIDGET_ID"></div>
<script src="https://embeddy.ai/embed.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-container="embeddy-widget-YOUR_WIDGET_ID">
</script>

Both methods work across all platforms. The iframe method is the most universally compatible; the JavaScript method provides tighter integration with the host page (auto-resizing, theme matching, etc.). Choose whichever your platform supports best.

3. Embedding Widgets in WordPress

Works with WordPress.org (self-hosted) and WordPress.com Business plan and above

Overview

WordPress is the most popular content management system in the world, and it has excellent support for embedding external content. Whether you use the modern Gutenberg block editor or the Classic Editor, you can embed an Embeddy widget in under two minutes. No plugin is required.

Prerequisites

  • A WordPress site with editor access (admin or editor role)
  • Gutenberg block editor (WordPress 5.0+) or Classic Editor with HTML tab
  • Your Embeddy widget embed code (from the Embeddy dashboard)

Step-by-Step Instructions (Gutenberg Editor)

  1. 1
    Open the page or post where you want to embed your widget. Click the + (Add Block) button in the Gutenberg editor.
  2. 2
    Search for "Custom HTML" in the block search bar and select the Custom HTML block. This block allows you to paste raw HTML directly into your page.
    Screenshot: WordPress Gutenberg editor showing the block inserter with "Custom HTML" block highlighted
  3. 3
    Paste your Embeddy embed code into the Custom HTML block. You can use either the iframe or JavaScript snippet.
    Screenshot: Custom HTML block with Embeddy iframe code pasted inside
  4. 4
    Click "Preview" in the Custom HTML block toolbar to verify the widget renders correctly. You should see a live preview of your embedded app directly in the editor.
  5. 5
    Publish or update your page. The embedded widget is now live and fully interactive for your visitors.
    Screenshot: Published WordPress page with a live, interactive Embeddy widget embedded

Classic Editor Method

If you use the Classic Editor, switch to the "Text" tab (not the "Visual" tab) and paste the embed code at the desired location. The Visual tab will strip out script tags, so always use the Text tab for embed codes.

WordPress Tips & Troubleshooting

Common Issues

  • Widget not showing? Make sure you are using the Custom HTML block, not a Paragraph block. Paragraph blocks strip HTML tags.
  • Widget too small? Adjust the height attribute in the iframe code. We recommend at least 500px for most widgets.
  • Security plugin blocking the embed? Some WordPress security plugins (like Wordfence) may block iframe sources. Add embeddy.ai to your allowed domains list.
  • WordPress.com free plan? WordPress.com free and personal plans do not allow Custom HTML blocks. Upgrade to Business plan or use WordPress.org (self-hosted).

Pro Tip

For full-width widgets, wrap the embed code in a Group block set to "Full Width" alignment. This lets the widget span the entire content area without sidebar constraints.

4. Embedding Widgets in Notion

Works with all Notion plans including Free

Overview

Notion is one of the most popular platforms for embedding external content. Teams use Notion embeds for dashboards, calculators, forms, project trackers, and more. Notion supports embedding via URL or the /embed command, and any HTTPS URL that serves embeddable content will work.

Since Embeddy widgets are served over HTTPS with proper embed headers, they work seamlessly in Notion without any configuration.

Prerequisites

  • A Notion workspace with edit access
  • Your Embeddy widget URL (e.g., https://embeddy.ai/widget/YOUR_WIDGET_ID)

Step-by-Step Instructions

  1. 1
    Open the Notion page where you want to embed the widget. Click on an empty line or press Enter to create a new block.
  2. 2
    Type /embed and select the Embed option from the dropdown menu.
    Screenshot: Notion slash command menu showing the /embed option highlighted
  3. 3
    Paste your Embeddy widget URL into the URL field. Use the direct widget URL, not the full iframe code:
    https://embeddy.ai/widget/YOUR_WIDGET_ID
  4. 4
    Click "Embed link" to confirm. Notion will create an embed block and load your widget inside it.
    Screenshot: Notion page with an embedded Embeddy widget displayed in an embed block
  5. 5
    Resize the embed by dragging the edges of the embed block. Notion allows both width and height adjustments. We recommend a height of at least 500px for most widgets.

Alternative: Paste URL Directly

You can also simply paste the widget URL directly onto an empty line in Notion. Notion will detect it as an embeddable link and offer you a menu with options to "Create embed," "Create bookmark," or "Dismiss." Select "Create embed" to render it inline.

Notion Tips & Troubleshooting

Common Issues

  • Embed shows "Unable to load"? Make sure the URL uses https:// (not http://). All Embeddy URLs use HTTPS by default.
  • Embed block too short? Drag the bottom edge of the embed block downward to increase its height. Notion defaults to a fairly compact height.
  • Embed not interactive? Click once on the embed to select it, then click again inside the widget area. Notion requires two clicks for embedded content interaction.
  • Notion API / database embeds? Embeddy widgets work in both regular Notion pages and published Notion sites. Database properties do not support embeds, only page content blocks.

Pro Tip

When sharing a Notion page publicly, embedded widgets are visible to anyone with the page link. This makes Notion + Embeddy a powerful combination for creating interactive documentation, client portals, or public knowledge bases without building a custom website.

5. Embedding Widgets in Shopify

Works with all Shopify plans

Overview

Shopify merchants use embedded widgets for product configurators, size guides, ROI calculators, FAQ bots, custom quote builders, and much more. Embedding an Embeddy widget in Shopify lets you add powerful, interactive functionality to your store without hiring a developer or installing bulky apps.

There are two main methods: using the Shopify Theme Editor (no code, visual editing) or editing Liquid templates directly (more control). We cover both below.

Prerequisites

  • A Shopify store with admin access
  • Your Embeddy widget embed code (iframe or JavaScript snippet)
  • Basic familiarity with the Shopify admin panel

Method 1: Shopify Theme Editor (Recommended)

  1. 1
    Go to your Shopify admin and navigate to Online Store → Themes → Customize on your active theme.
  2. 2
    Navigate to the page where you want to add the widget. Use the page selector dropdown at the top of the editor (e.g., "Home page," "Product pages," "Pages").
  3. 3
    Click "Add section" and select "Custom Liquid" (or "Custom HTML" depending on your theme). This section allows you to paste raw HTML and Liquid code.
    Screenshot: Shopify theme editor showing the "Add section" panel with "Custom Liquid" option
  4. 4
    Paste your Embeddy embed code into the Custom Liquid content area:
    Custom Liquid Section Content
    <div style="max-width: 800px; margin: 0 auto; padding: 20px 0;">
  <iframe
    src="https://embeddy.ai/widget/YOUR_WIDGET_ID"
    width="100%"
    height="600"
    frameborder="0"
    allow="clipboard-read; clipboard-write"
    style="border: none; border-radius: 8px;"
  ></iframe>
</div>
  5. 5
    Position the section by dragging it to your desired location in the page layout. Use the drag handles on the left side of the section panel.
  6. 6
    Click "Save" in the top right corner. The widget is now live on your Shopify store.
    Screenshot: Shopify store page with an interactive Embeddy widget embedded via Custom Liquid section

Method 2: Editing Liquid Templates Directly

For more precise control, you can edit Liquid template files directly. This is useful when you want to embed a widget in a specific location within a product template, collection page, or cart page.

  1. 1Go to Online Store → Themes → Actions → Edit code.
  2. 2Open the template file where you want the widget (e.g., sections/main-product.liquid for product pages).
  3. 3Paste the embed code at your desired location in the template.
  4. 4Click Save. The widget will appear on all pages that use that template.

Shopify Tips & Troubleshooting

Common Issues

  • Widget looks different in the theme editor vs. live store? The Shopify theme editor renders in a preview frame that may constrain dimensions. Always check the live store preview for accurate rendering.
  • Content Security Policy errors? Some Shopify themes have strict CSP headers. If you see console errors, contact your theme developer about allowing the embeddy.ai domain in the CSP whitelist.
  • Widget not showing on mobile? Ensure the iframe has width="100%" for responsive behavior. Avoid fixed pixel widths.
  • Blog post embeds? For Shopify blog posts, go to Online Store → Blog Posts, edit a post, and switch to the HTML editor (click the </> icon) to paste the embed code.

Pro Tip

Use Embeddy widgets to add functionality that would normally require a paid Shopify app: size guides, custom product configurators, delivery date estimators, or interactive FAQ sections. A single Embeddy widget can replace multiple Shopify apps, saving you monthly subscription costs. Check our pricing page for details.

6. Quick Reference

Here is a side-by-side summary of the embedding process for all three platforms:

PlatformEmbed MethodWhat to PasteTime Required
WordPressCustom HTML blockFull iframe or JS embed code~2 minutes
Notion/embed command or paste URLWidget URL only~1 minute
ShopifyCustom Liquid section or template editFull iframe or JS embed code~3 minutes

7. Other Supported Platforms

WordPress, Notion, and Shopify are just three of the 50+ platforms where Embeddy widgets work out of the box. The same embed code you generated above can also be used on:

Wix
Squarespace
Webflow
Medium
Substack
Ghost
HubSpot
Canva
Figma
Slack
Discord
Microsoft Teams
Google Sites
Confluence
iOS Widgets
Android Widgets
Carrd
Framer

Each platform has slight differences in how you access the embed or custom code area, but the process is always the same: find the HTML or embed block, paste your code, and save. For a full list of supported platforms and platform-specific guides, visit our Features page.

8. Frequently Asked Questions

Can I embed interactive widgets in WordPress without a plugin?

Yes. WordPress's built-in Custom HTML block supports iframes and JavaScript embed codes natively. No plugin is needed. Simply paste your Embeddy embed code into a Custom HTML block in the Gutenberg editor and publish. The widget will be fully interactive for your visitors.

Does Notion support embedding custom apps and widgets?

Yes. Notion supports embedding any HTTPS URL via the /embed command. Since Embeddy widgets are served over HTTPS with proper embed headers, they work seamlessly. Just paste your widget URL and Notion will render it as an interactive embed block.

How do I add custom embedded widgets to my Shopify store?

Use the Custom Liquid section in the Shopify theme editor. Go to Online Store → Themes → Customize, add a "Custom Liquid" section, and paste your embed code. Alternatively, edit Liquid template files directly for more precise placement. Both methods work with Embeddy embed codes.

Are Embeddy widgets just simple iframes?

No. While Embeddy uses iframes as a delivery mechanism for universal compatibility, the widgets themselves are fullstack applications with real backends, databases, API integrations, user authentication, payment processing, and more. They are production-grade software that happens to be embeddable -- not static content frames. Learn more about what Embeddy can build on our Features page.

What other platforms support Embeddy widget embedding?

Embeddy widgets work on 50+ platforms including Wix, Squarespace, Webflow, Medium, Substack, Ghost, HubSpot, Canva, Figma, Slack, Discord, Microsoft Teams, iOS Widgets, Android Widgets, Google Sites, Confluence, and many more. Anywhere that supports iframes or custom HTML can embed an Embeddy widget.

Do embedded widgets affect my site's page speed or SEO?

Embeddy widgets are loaded asynchronously in an iframe, so they do not block your main page from rendering. Your page's HTML, CSS, and primary content load first, and the widget loads independently. This means your Core Web Vitals (LCP, FID, CLS) are not negatively impacted. Search engines can also see the iframe reference in your page source.

Can I customize the appearance of the embedded widget?

Yes. Embeddy widgets can be customized in the Embeddy dashboard before embedding. You can adjust colors, fonts, layout, and behavior. Additionally, the iframe embed code supports standard CSS styling (border-radius, box-shadow, max-width) for further visual integration with your host page.

Ready to Embed Your First Widget?

Describe what you want to build. Embeddy's AI will create a fullstack app you can embed on WordPress, Notion, Shopify, and 50+ other platforms in minutes.

Start Building for FreeExplore Features

Related Articles

What Are Embeddable Widgets?

A complete guide to understanding embeddable widgets, how they work, and why they matter for your business.

Build Embeddable Widgets Without Code

Learn how to create powerful, interactive widgets using Embeddy's AI without writing a single line of code.