How to Embed a Claude Artifact (Notion, Webflow, WordPress)

You can embed a Claude artifact anywhere that accepts an iframe — Notion, Webflow, WordPress, or any custom HTML page. There are two methods: use Claude's built-in embed code, which requires domain allow-listing, or upload the artifact HTML to ShareDuo and use that URL in any iframe with no configuration at all. For most sites, the ShareDuo route is faster and more reliable.

For background on getting a shareable link, see how to get a shareable link for a Claude artifact.

Method 1: Claude's built-in embed code

After publishing an artifact in Claude, you'll see a "Get embed code" button in the share panel. This generates an iframe snippet you can paste into any HTML page. The catch: you need to add your target domain to the artifact's allowed-domains list in the Publish settings first, or the iframe will render blank.

Steps:

1. Open the artifact in Claude and click Publish.
2. In the Publish panel, find the Allowed domains field and add your website domain (e.g. yoursite.com).
3. Click Get embed code and copy the iframe snippet.
4. Paste the snippet into your site's HTML.

This works well for websites where you control the domain configuration. It becomes cumbersome if you're sharing across multiple domains or platforms with restricted HTML access.

Method 2: ShareDuo link in an iframe (easier)

The simpler path: download the artifact HTML from Claude, upload it to ShareDuo, and use the resulting ShareDuo URL as the iframe src. No domain allow-listing, no Publish settings, no configuration.

Steps:

1. In Claude, click the download icon in the artifact panel header to save the HTML file.
2. Go to shareduo.com and upload the HTML file.
3. Copy the ShareDuo URL from the share page.
4. Paste it into an iframe on your site (see the generic code block below).

ShareDuo links are publicly accessible with no domain restrictions, which makes them compatible with every platform listed below.

Embedding in Notion

Notion's /embed block accepts any publicly accessible URL. Type /embed in a Notion page, press Enter, and paste your ShareDuo URL. Notion will render the artifact inline.

Note: Claude's native Publish links often fail in Notion's embed block because of domain restrictions or iframe headers that Notion doesn't accept. ShareDuo links embed correctly in Notion without any extra steps.

Embedding in Webflow

In Webflow's Designer, add an HTML Embed component to your page. Open the embed editor and paste the iframe code with your ShareDuo URL as the src. Publish your Webflow site and the artifact will render in the embed area.

No domain configuration is needed when using ShareDuo. The artifact is served from ShareDuo's domain, not Claude's, so Webflow's iframe handling is straightforward.

Embedding in WordPress

In the WordPress block editor (Gutenberg), add an HTML block (not a Paragraph or Shortcode block). Paste the iframe code directly into the HTML block. Switch to Preview mode to verify it renders correctly before publishing.

If your WordPress theme or security plugin strips iframes from the editor, you may need to use a plugin like "iframe" or edit your theme's functions.php to allow iframe tags in post content.

Generic iframe code

Use this template anywhere that accepts raw HTML:

<iframe 
  src="YOUR_SHAREDUO_URL_HERE" 
  width="100%" 
  height="600" 
  style="border: none; border-radius: 8px;"
  loading="lazy">
</iframe>

Adjust height to match your artifact's layout. The loading="lazy" attribute defers the iframe until it's near the viewport, which avoids slowing down your page load on artifact-heavy pages. For more on what Claude artifacts can do, see the complete guide.