Embedding GuideTumblr

How to Embed a Widget in Tumblr

Tumblr supports custom HTML in posts through its HTML editor and also allows full HTML/CSS/JS customization in custom theme pages. You can paste your Embeddy iframe code directly into a Tumblr text post using the HTML editor, or embed it on a dedicated custom page within your blog's theme.

HTML and iframe support

Tumblr allows iframes and custom HTML in text posts via the HTML editor. Custom theme pages give you even more control with full HTML, CSS, and JavaScript access.

1. Prerequisites

1An active Embeddy account with at least one published widget.
2A Tumblr account with a blog at tumblr.com.
3Your Embeddy iframe embed code, available from your dashboard.

2. How Tumblr Handles HTML

Tumblr's post editor supports multiple post types (text, photo, quote, link, chat, audio, video). The text post type includes an HTML editing mode that accepts raw HTML including iframes.

Additionally, Tumblr allows you to create custom pages for your blog via the theme customization panel. These pages accept full HTML, CSS, and JavaScript, giving you complete control over the page layout and any embedded content.

Tumblr may sanitize some attributes

Tumblr's HTML sanitizer may strip certain attributes like onload or inline JavaScript event handlers. Standard iframe attributes like src,width, height, and style are preserved.

3. Method 1: Embed in a Text Post (HTML Editor)

The quickest way to embed your Embeddy widget on Tumblr is inside a text post.

1
Log in to Tumblr and create a new text post.
Click the compose (pencil) icon on your dashboard and select Text as the post type.
2
Switch to the HTML editor.
In the post editor, click the settings gear icon (or the HTML toggle in the editor toolbar) to switch from the rich text editor to raw HTML mode.

Paste your Embeddy iframe code.

Place the cursor where you want the widget to appear and paste:

<div style="width:100%;max-width:700px;margin:20px auto;">
  <iframe
    src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
    width="100%"
    height="500"
    frameborder="0"
    style="border:none;border-radius:8px;"
    allowfullscreen>
  </iframe>
</div>

Replace WIDGET_ID and PROPS_ID with your actual values from the Embeddy dashboard.

4
Publish the post.
Click Post (or schedule it). Visit your blog to verify the widget renders correctly.

4. Method 2: Custom Theme Page

For a dedicated widget page on your Tumblr blog, use a custom page. This gives you full HTML control and is ideal for standalone interactive experiences.

1
Go to your blog's Customize panel.
Navigate to your blog, click the palette icon or go totumblr.com/settings/blog/yourblog and click Edit theme.
2
Add a new custom page.
In the customization sidebar, scroll down and click Add a page. Choose Custom Layout (not "Standard Layout") to get full HTML control.

Paste your full HTML page with the Embeddy iframe.

In the custom page editor, write your full HTML. For example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Interactive Widget</title>
  <style>
    body { margin: 0; padding: 20px; font-family: sans-serif; }
    .widget-container { max-width: 800px; margin: 0 auto; }
  </style>
</head>
<body>
  <div class="widget-container">
    <h1>Try Our Interactive Widget</h1>
    <iframe
      src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
      width="100%"
      height="600"
      frameborder="0"
      style="border:none;border-radius:8px;">
    </iframe>
  </div>
</body>
</html>

4
Set the page URL and save.
Give the page a URL slug (e.g., /widget) and click Save. Your page will be available at yourblog.tumblr.com/widget.

Direct URL alternative

You can always share your Embeddy widget's direct URL as a link in any Tumblr post:https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID. This works regardless of HTML support and opens the widget in a new tab for your readers.

5. Troubleshooting

Iframe stripped after publishing

Make sure you are editing in HTML mode, not the rich text editor. If you switch back to rich text mode after pasting HTML, Tumblr may strip the iframe tags. Stay in HTML mode when saving.

Widget not loading on mobile Tumblr app

The Tumblr mobile app may render iframes differently than the web version. Ensure your iframe has explicit width and height attributes. Test on the mobile web version of your blog for the most reliable experience.

Custom page shows blank content

When using Custom Layout pages, ensure your HTML is well-formed with proper<html>,<head>, and<body> tags. Also check that your widget URL is correct and the widget is published.

6. FAQ

Does Tumblr allow iframes in posts?

Yes. Tumblr's text post HTML editor supports iframes. You can paste your Embeddy iframe code directly in the HTML view and it will render when the post is published.

Can I embed the widget in my Tumblr theme's sidebar?

Yes, if you edit your theme's HTML directly. Go to Edit theme and click Edit HTML to access the raw theme code. You can add your iframe code in any section of the theme, such as the sidebar or footer area.

Will my widget appear on the Tumblr dashboard feed?

Tumblr's dashboard feed may not render iframes inline for all followers. The widget will always render correctly when readers visit your blog directly. In the dashboard feed, readers may see a simplified version and need to click through to your blog for the full experience.

Ready to embed your widget on Tumblr?

Build and publish your widget in minutes with embeddy.ai -- then share it on your Tumblr blog.

Open Dashboard Browse All Docs