Embedding GuideMedium

How to Embed a Widget in Medium

Medium uses Embed.ly to handle embeds from approved providers. Direct custom HTML and iframes are not supported in Medium articles — it is a hard platform restriction. However, Embeddy widgets can still be displayed in your articles using a direct URL embed (if Embed.ly detects your widget URL) or the reliable CodePen workaround, since CodePen is a fully supported Embed.ly provider.

Important limitation

Medium does not allow pasting custom HTML or arbitrary iframe code into article content. The editor will strip any HTML tags you attempt to paste. This is a deliberate security restriction by Medium — it applies to all third-party embeds, not just Embeddy.

1. Prerequisites

1An active Embeddy account with at least one published widget.
2A Medium account with a draft or published article ready to edit.
3For the CodePen method: a free CodePen account.

2. How Medium Embeds Work

Medium's editor supports embedding content from approved providers through its integration with Embed.ly (and Iframely). The process works like this:

1You paste a URL on its own empty line in the Medium editor and press Enter.
2Medium sends the URL to Embed.ly to check if it is a supported provider.
3If supported, Embed.ly returns an embed card which renders inside a sandboxed iframe in the Medium article.
4If not supported, the URL stays as plain text or a hyperlink — no visual embed appears.

Embed.ly supports over 700 providers including YouTube, GitHub Gist, CodePen, Twitter, Vimeo, SoundCloud, and Spotify. embeddy.ai widget URLs may or may not be in Embed.ly's whitelist depending on when you are reading this. The CodePen method below works regardless, since CodePen is always supported.

3. Method 1: Direct URL Embed

Try pasting your Embeddy widget's direct URL into Medium first. If Embed.ly or Iframely has indexed embeddy.ai, it will auto-render as an embedded card.

1
Copy your widget's direct URL.
From your Embeddy dashboard, copy the direct URL for your widget:
https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID
2
Open your Medium article in the editor.
Navigate to the article where you want to place the widget.
3
Place your cursor on a new empty line.
The embed URL must be on its own line with no other text around it.
4
Paste the URL and press Enter.
Medium will attempt to resolve it via Embed.ly. If successful, a visual embed card appears. If it stays as plain text, proceed to Method 2.

This may not work for all widgets

Whether the direct URL auto-embeds depends on whether Embed.ly has indexed embeddy.ai as a provider. If pasting the URL leaves it as plain text, use the CodePen workaround in Method 2 — it is more reliable.

4. Method 2: CodePen Workaround (Reliable)

CodePen is a fully supported Embed.ly provider, meaning any public CodePen URL will auto-embed in Medium. By creating a CodePen pen that contains your Embeddy iframe and embedding the CodePen URL in Medium, your widget becomes visible inside the article.

Why this works

CodePen renders your HTML, CSS, and JS in a sandboxed preview. When you embed a CodePen URL in Medium, Embed.ly fetches CodePen's oEmbed response and renders the pen preview inline — which includes your Embeddy iframe inside it.

1
Go to codepen.io and create a new pen.
Log in or create a free account, then click New Pen.
2
Paste your Embeddy iframe code in the HTML tab.
In the HTML panel of the CodePen editor, paste the following code, replacing the placeholder IDs with your own:
```
<div style="width:100%;height:500px;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="100%"
    frameborder="0"
    style="border:none;border-radius:8px;">
  </iframe>
</div>
```
Replace WIDGET_ID and PROPS_ID with your actual values from the Embeddy dashboard. Adjust the height to match your widget.
3
Set the pen to public and save it.
Click Save (or Ctrl+S). Ensure the pen visibility is set to Public — private pens cannot be embedded by Embed.ly.
4
Copy the CodePen URL.
Copy the URL from your browser. It will look like:https://codepen.io/yourusername/pen/abcXYZ
5
Paste the CodePen URL in your Medium article on a new empty line.
In the Medium editor, place the cursor on its own empty line, paste the CodePen URL, and pressEnter. Medium will auto-embed the CodePen — with your Embeddy widget visible inside the pen's preview.

Linking to your widget if neither method works

If you prefer a simpler approach, select text in the Medium editor (e.g., "Try the interactive widget"), click the link icon in the formatting toolbar, and paste your Embeddy widget URL. Readers click the link to open the widget in a new tab. This is less visually prominent but always works.

5. Limitations

No custom HTML or iframes in Medium

Medium's editor does not accept pasted HTML. Any tags you type or paste are stripped. This is a permanent platform decision by Medium for security and reading experience consistency.

No guarantee of direct URL embedding

Whether embeddy.ai URLs auto-embed in Medium depends on Embed.ly's provider list. The CodePen workaround is the reliable option.

CodePen embeds show the code editor UI

When embedding a CodePen in Medium, the rendered result includes CodePen's own UI chrome (tabs, run button). You can minimise this by using CodePen's minimal embed options if available, but some UI is always present.

6. FAQ

Will my Embeddy widget work in Medium's mobile app?

Embeds via Embed.ly (including CodePen) are rendered in Medium's mobile app, but the experience can vary. Some embeds show as tap-to-load cards on mobile. Test on the Medium app after publishing to verify your widget renders correctly for mobile readers.

Can I update the widget in the CodePen without editing the Medium article?

Yes. If you update the HTML content in your CodePen pen (e.g., change the widget URL), the Medium article will reflect the update since it embeds the live CodePen. You do not need to re-paste the URL in Medium. However, if you change the CodePen URL itself (e.g., create a new pen), you will need to update the Medium article.

Is there a way to make the widget fill the full article width in Medium?

Medium constrains embedded content to its article column width (roughly 700px on desktop). There is no way to make an embed break out of Medium's content column. Set your CodePen pen towidth: 100% and your widget will fill the available article width.

Ready to share your widget on Medium?

Build and publish your widget in minutes with embeddy.ai — then share it anywhere.

Open Dashboard Browse All Docs