How to Embed a Widget on Mobirise

Mobirise is a free offline website builder that generates clean, responsive HTML sites. It runs as a desktop application on Windows and Mac, with a drag-and-drop block-based interface. This guide covers two methods for embedding an Embeddy widget: the Code Editor and the dedicated HTML/Code block.

Beginner~5 min readUpdated 2026

On this page

Prerequisites

Before you embed your widget, you need two things:

  • Your Embeddy embed code. Log in to your dashboard at https://embeddy.ai/dashboard, open your widget, and copy the iframe embed code. It looks like this:
<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0"
></iframe>
  • Mobirise desktop application. Download and install Mobirise from mobirise.com. The Code Editor feature requires the Mobirise Code Editor extension (free with most themes, or available as a paid add-on).

Code Editor Method

The Code Editor lets you edit the raw HTML of any block in Mobirise. This is the most flexible method because you can insert your iframe code into any existing block on your page — headers, content sections, footers, or anywhere else.

  1. 1

    Open your Mobirise project

    Launch the Mobirise application and open the project where you want to embed the widget. Navigate to the page you want to edit.

  2. 2

    Open the Code Editor

    Hover over the block where you want the widget. Click the </> (Code Editor) icon that appears in the block's toolbar, or right-click on the block and select "Code Editor". The editor opens as a panel showing the block's HTML.

  3. 3

    Paste your embed code

    Find the spot in the HTML where you want the widget to appear. Paste your Embeddy iframe code there. A common approach is to place it inside a <div> container within the block.

  4. 4

    Save and close the Code Editor

    Click Save or close the Code Editor panel. The block will update with your changes.

  5. 5

    Preview and publish

    Click Preview in the top toolbar to test the embed in a browser. When satisfied, click Publish to upload your site to your hosting provider or export it as local HTML files.

Tip: Changes made in the Code Editor persist even when you switch themes or update blocks. However, if you replace the entire block with a new one from the block library, your custom code will be lost. Always back up your embed code before making major changes.

Important: Code Editor extension

The Code Editor is an extension in Mobirise. If you do not see the </> icon on blocks, you may need to install or activate the Code Editor extension from the Mobirise extensions marketplace. Some free themes include it; others require a separate purchase.

HTML Block Method

Many Mobirise themes include a dedicated HTML or Code block that you can drag onto your page. This block is designed specifically for pasting custom HTML code, including iframes.

  1. 1

    Open the blocks panel

    In your Mobirise project, click the red + button on the right side of the page to open the blocks panel.

  2. 2

    Find and add the Code/HTML block

    Scroll through the available blocks or search for "Code" or "HTML". Drag the block onto your page at the desired position. The exact name varies by theme (e.g., "Custom HTML", "Code Block").

  3. 3

    Paste your embed code

    Click on the block and open its settings or code editor. Paste your Embeddy iframe code into the HTML code area.

  4. 4

    Publish your site

    Click Publish to upload your site. You can publish to a local folder, FTP server, GitHub Pages, or other hosting options supported by Mobirise.

Note: Not all Mobirise themes include an HTML/Code block. If your theme does not have one, use the Code Editor method above instead. You can also switch to a theme that includes this block type.

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like for Mobirise. Copy your specific code from the Embeddy dashboard — the WIDGET_ID and PROPS_ID values will be filled in automatically.

<!-- Embeddy widget embed — paste into Mobirise Code Editor or HTML block -->
<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;"
  loading="lazy"
  title="My Embeddy Widget"
></iframe>

You can adjust height to match your widget's content. Use width="100%" to make the embed responsive across all screen sizes.

Troubleshooting

The Code Editor icon is not visible

The Code Editor is a Mobirise extension that may need to be installed separately. Go to the Mobirise extensions/add-ons marketplace and look for the Code Editor extension. Install it, restart Mobirise, and the </> icon will appear on each block's toolbar.

The widget shows a blank area

Verify that your Widget ID and Props ID in the embed URL are correct. Open the Embeddy dashboard and copy the embed code fresh. Also ensure your widget is published (not in draft mode) in Embeddy.

Widget does not appear in the Mobirise editor

Mobirise does not render iframes inside the visual editor. This is expected behavior. Use the Preview button to see your widget in a browser, or publish your site and view it on the live URL.

Widget is cut off or too small

Increase the height attribute in your iframe code. A common starting point is height="600". Also check that the Mobirise block container does not have a fixed height that clips the iframe content.

Code changes are lost after updating a block

If you replace a block from the block library or update the theme, Code Editor changes may be overwritten. Always keep a copy of your embed code. After updating, re-paste the embed code into the block's Code Editor.

Frequently Asked Questions

Does embedding an Embeddy widget slow down my Mobirise site?

No. Iframes load independently of your main page. The widget loads from Embeddy's servers in a separate browser context and does not block your page's rendering. Using loading="lazy" in the iframe tag further defers loading until the widget is visible in the viewport.

Can I use the embed on sites published to GitHub Pages?

Yes. Mobirise exports clean static HTML files. When you publish to GitHub Pages or any static hosting provider, the iframe code is included in the HTML output and the widget will load from Embeddy's servers as expected.

Will the widget be responsive on mobile?

Using width="100%" makes the iframe responsive within its container. Mobirise generates responsive HTML, so the block containing your widget will adapt to mobile screen sizes. The iframe will scale proportionally.

Ready to build your widget?

Create a free Embeddy widget — no code required. Get your embed code in minutes and drop it into your Mobirise site.

Create your free widget at embeddy.ai