How to Embed a Widget on Readymag

Readymag is a browser-based design tool for creating visually rich web projects without writing code. This guide shows you how to embed an Embeddy widget on your Readymag project using the built-in Code widget or project-level custom code injection.

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>
  • A Readymag account with a project. You need at least a Creator plan or higher to use the Code widget. Free-plan projects do not support custom code embedding.

Code Widget

The Code widget is the most straightforward way to embed an iframe on a Readymag page. It lets you add arbitrary HTML, CSS, and JavaScript directly to your layout, and the content renders inline within your project.

  1. 1

    Open your Readymag project

    Log in to Readymag and open the project you want to edit. Navigate to the specific page where you want the widget to appear.

  2. 2

    Add a Code widget

    Click the + button in the left toolbar to open the widget picker. Select "Code" from the list of available widgets. A new code widget will be placed on your canvas.

  3. 3

    Paste your embed code

    Double-click the Code widget to open the code editor. Paste your Embeddy iframe code into the HTML tab. You do not need to add anything to the CSS or JS tabs unless you want custom styling.

  4. 4

    Resize and position the widget

    Close the code editor and drag the widget to your desired position. Resize the Code widget frame on the canvas to match the dimensions you want for your embedded widget. The iframe will fill the Code widget container.

  5. 5

    Preview and publish

    Click the Preview icon (eye) in the top toolbar to verify the widget loads correctly. Then click Publish to make your project live.

Tip: The Code widget in Readymag renders inside a sandboxed iframe. If your Embeddy widget requires interaction (clicks, scrolling), make sure the Code widget frame is large enough so users do not need to scroll within a double-nested iframe.

Important: Plan requirement

The Code widget is only available on Readymag Creator, Professional, and Team plans. If you are on the free plan, you will not see the Code option in the widget picker. Upgrade your Readymag plan to access custom code embedding.

Project-Level Code Injection

Readymag also lets you inject custom code at the project level through Project Settings. This method is useful if you want your widget to appear on every page of your project, or if you need to load external scripts globally.

  1. 1

    Open Project Settings

    In your Readymag editor, click the gear icon or navigate to Project Settings from the project menu.

  2. 2

    Find the Custom Code section

    Scroll down to the Custom Code section. You will see fields for Head and Body code injection.

  3. 3

    Paste your embed code

    Paste your Embeddy iframe code into the Body code field. The iframe will be injected before the closing </body> tag on every page of your project.

  4. 4

    Save and publish

    Save your project settings and publish your project. The widget will appear on the published site.

Warning: Project-level code injection adds the embed to every page. If you only want the widget on a specific page, use the Code widget method instead. You may also need to add CSS positioning to control where the injected iframe appears on the page.

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like for Readymag. 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 Readymag Code widget HTML tab -->
<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 within the Code widget frame.

Troubleshooting

The Code widget option is missing

The Code widget is only available on paid Readymag plans (Creator, Professional, Team). If you are on the free plan, upgrade your account to access the Code widget. Check your plan status in your Readymag account settings.

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 check that the Code widget frame on the Readymag canvas has sufficient width and height to display your widget content.

Widget works in preview but not on the published site

Make sure you have published your project after adding the Code widget. Readymag separates the editor preview from the published version. Click Publish to push your latest changes live.

Widget is cut off or too small

Resize the Code widget frame on the Readymag canvas to be larger. Also increase the height attribute in your iframe code. A common starting point is height="600".

Interactive elements do not respond to clicks

Readymag's Code widget renders inside a sandboxed iframe. Ensure the Code widget is not overlapped by other Readymag widgets on the canvas. Bring the Code widget to the front using the layer ordering controls if necessary.

Frequently Asked Questions

Does embedding an Embeddy widget slow down my Readymag project?

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 Readymag project's rendering. Using loading="lazy" in the iframe tag further defers loading until the widget is visible in the viewport.

Can I style the Code widget to match my Readymag design?

Yes. The Code widget has a CSS tab where you can add custom styles. You can also use the style attribute on the iframe to control borders, border-radius, and background color to match your project's visual design.

Will the widget be responsive on mobile?

Readymag has separate desktop and mobile layouts. You will need to add and position the Code widget on both layouts. Use width="100%" in your iframe so it adapts to the Code widget container size on each layout.

Ready to build your widget?

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

Create your free widget at embeddy.ai