How to Embed a Widget on Hostinger

Hostinger Website Builder is an intuitive drag-and-drop site builder included with Hostinger hosting plans. This guide walks you through embedding an Embeddy widget using the Embed Code element and the custom code injection settings.

Beginner~4 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 Hostinger account with Website Builder access. You need to be able to edit your site using the Hostinger Website Builder (included with most Hostinger hosting plans).

Embed Code Element

Hostinger Website Builder includes a dedicated Embed Code element that lets you add custom HTML, including iframes, directly onto any page. This is the easiest way to add an Embeddy widget.

  1. 1

    Open the Hostinger Website Builder

    Log in to your Hostinger account, navigate to Websites, and click Edit Website to open the builder.

  2. 2

    Navigate to the target page

    In the builder, select the page where you want the widget to appear from the pages menu.

  3. 3

    Add an Embed Code element

    Click Add Element (or the + button) in the left sidebar, then find and select "Embed Code". Drag the element to the desired position on your page.

  4. 4

    Paste your embed code

    Click on the Embed Code element to open its settings. You will see a Custom Code text area. Paste your Embeddy iframe embed code into this area and click Save or Apply.

  5. 5

    Preview and publish

    Use the Preview button to check how the widget looks, then click Publish to make the changes live on your site.

Tip: The Embed Code element may show a placeholder or a simplified preview in the editor. The full widget will render on the published site and in the preview mode.

Custom Code Injection

For site-wide code injection — such as a floating widget that appears on every page — Hostinger Website Builder provides header and footer code injection fields in the site settings.

  1. 1

    Open Website Settings

    In the Hostinger Website Builder, click on Website Settings or the gear icon.

  2. 2

    Find the Custom Code section

    Navigate to the Custom Code or Integrations section. You will see fields for Header Code and Footer Code.

  3. 3

    Paste your embed code in the Footer Code field

    For an iframe embed, paste your Embeddy code into the Footer Code field. This injects the code before the closing body tag on every page.

  4. 4

    Save and publish

    Save the settings and publish your site. The code will appear on every page of your website.

Important: Page-specific vs site-wide

Custom code injection adds code to every page. If you only want the widget on a specific page, use the Embed Code element method described above instead.

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like for Hostinger. 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 Hostinger Embed Code element -->
<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 Embed Code element shows a blank placeholder

This is normal in the Hostinger Website Builder editor. Iframes and custom code often do not render in the editor view. Use the Preview button or publish your site to see the widget on the live page.

The widget shows a blank area on the live site

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 confirm your widget is published (not in draft mode) in Embeddy.

Widget is cut off or too small

Increase the height attribute in your iframe code. A common starting point is height="600". You can also resize the Embed Code element in the Hostinger builder by dragging its edges.

I cannot find the Embed Code element

In the left sidebar, click Add Element and search for "embed" or "code". The element may also be listed under an Other or Advanced category. Ensure you are using the Hostinger Website Builder (not a WordPress installation on Hostinger).

Frequently Asked Questions

Does embedding an Embeddy widget slow down my Hostinger site?

No. Iframes load independently of your main page. The widget loads from Embeddy's servers in a separate browser thread 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.

Is this guide for Hostinger Website Builder or WordPress on Hostinger?

This guide is specifically for the Hostinger Website Builder (the drag-and-drop builder). If you are using WordPress hosted on Hostinger, follow our WordPress embedding guide instead.

Can I embed the same widget on multiple Hostinger pages?

Yes — add an Embed Code element with the same code on as many pages as you like. Each instance is independent. If you update the widget in the Embeddy dashboard, all embedded instances update automatically.

Ready to build your widget?

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

Create your free widget at embeddy.ai