Embedding GuideBlogger

How to Embed a Widget in Blogger

Google Blogger fully supports custom HTML and iframes in both posts and sidebar gadgets. This makes it one of the easiest blogging platforms to embed your Embeddy widgets on. You can paste your iframe code directly into the HTML editor of any post, or add a reusable HTML/JavaScript gadget to your blog's layout for site-wide widget placement.

Full HTML support

Blogger allows custom HTML, JavaScript, and iframes in posts and layout gadgets. No workarounds are needed -- you can paste your Embeddy iframe code directly.

1. Prerequisites

1An active Embeddy account with at least one published widget.
2A Google/Blogger account with an existing blog at blogger.com.
3Your Embeddy iframe embed code, available from your dashboard.

2. How Blogger Handles HTML

Blogger's post editor has two views: Compose view (WYSIWYG) and HTML view. The HTML view lets you write or paste raw HTML, including iframes, script tags, and custom markup.

In addition to posts, Blogger's Layout editor offers an "HTML/JavaScript" gadget that lets you add arbitrary HTML to your blog's sidebar, header, footer, or any widget area defined by your theme. This is ideal for embedding a widget that should appear on every page.

Compose view may strip code

If you paste iframe code while in Compose view, Blogger may strip or alter the HTML tags. Always switch to HTML view before pasting embed code. Avoid toggling back to Compose view after pasting, as this can also strip your iframe.

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

Use this method to embed your Embeddy widget inside a specific blog post.

1
Go to blogger.com and open your blog.
Select the blog where you want to embed the widget.
2
Create a new post or edit an existing one.
Click the orange pencil icon or go to Posts and select a draft.
3
Switch to HTML view.
In the editor toolbar, click the HTML view toggle (the pencil icon with angle brackets, or the button labeled "HTML" depending on your editor version). This switches from the visual editor to the raw HTML editor.

Paste your Embeddy iframe code.

Place your cursor where you want the widget to appear, then paste:

<div style="width:100%;max-width:800px;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.

5
Preview and publish.
Click Preview to verify your widget loads correctly. Once confirmed, click Publish or Update.

4. Method 2: HTML/JavaScript Gadget (Site-Wide)

Use this method to place an Embeddy widget in your blog's sidebar, footer, or any layout area so it appears on every page.

1
Go to Layout in your Blogger dashboard.
In the left sidebar, click Layout.
2
Click "Add a Gadget" in your desired section.
Choose the sidebar, footer, or other area where you want the widget.
3
Select "HTML/JavaScript" from the gadget list.
This gadget accepts any raw HTML, CSS, or JavaScript.

Paste your iframe code and save.

Add an optional title (e.g., "Interactive Widget"), paste your Embeddy iframe code in the Content field, and click Save.

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border:none;border-radius:8px;">
</iframe>

5
Save your layout arrangement.
Click Save arrangement at the top of the Layout page. Your widget will now appear on every page of your blog.

5. Troubleshooting

Widget disappears after saving

If your iframe code disappears after saving, you likely toggled back to Compose view before saving. The Compose view can strip iframe tags. Always stay in HTML view when pasting and saving embed code.

Widget shows a blank area

Make sure your Embeddy widget is published and the URL is correct. Check the browser console for mixed-content warnings -- Blogger serves pages over HTTPS, and your iframe source must also be HTTPS (which embeddy.ai URLs are by default).

Gadget does not appear on some pages

Some Blogger themes conditionally show gadgets. Check your theme settings or switch to a standard Blogger theme to confirm the gadget section is visible on all pages.

6. FAQ

Does Blogger support iframes in posts?

Yes. Blogger's HTML view in the post editor fully supports iframes. You can paste your Embeddy iframe code directly. Just make sure to paste it in HTML view, not Compose view.

Can I make the widget responsive on Blogger?

Yes. Set width="100%" on your iframe and wrap it in a div with max-width set to your desired maximum. The widget will scale with the blog content column.

Will the widget work on Blogger's custom domain?

Yes. Whether your blog is on yourblog.blogspot.com or a custom domain, iframe embeds work identically. Embeddy widgets do not restrict which domains can embed them.

Ready to embed your widget on Blogger?

Build and publish your widget in minutes with embeddy.ai -- then paste it into any Blogger post.

Open Dashboard Browse All Docs