Embedding GuideBrevo

How to Embed a Widget on Brevo (Sendinblue)

Brevo (formerly Sendinblue) includes a drag-and-drop landing page builder with an HTML block that accepts raw HTML, iframes, and scripts. This guide covers how to embed an Embeddy widget using the HTML block for precise placement and page-level code injection for scripts.

ℹ

Brevo Landing Pages require a paid plan

Landing pages are available on Brevo's Business plan and above. If you are on the free or Starter plan, you will need to upgrade to access the landing page builder.

1. Prerequisites

  • •An active Embeddy account with at least one published widget.
  • •A Brevo account on a Business plan or above (required for landing pages).
  • •Your Embeddy iframe embed code -- copy it from your widget's Embed tab in the dashboard.
  • •An existing landing page in Brevo, or create a new one from Contacts > Landing Pages.

Your Embeddy iframe code:

<iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0">
</iframe>

2. Method 1 -- HTML Block (Recommended)

Brevo's landing page editor includes an HTML block (also called "Code" block) that renders raw HTML exactly as written. This is the best way to place an Embeddy widget at a specific location on your page.

Use this method when you want to embed a widget at a precise position on a Brevo landing page. Takes about two minutes.

  1. 1

    Open the Brevo landing page editor

    In Brevo, navigate to Contacts > Landing Pages (or Campaigns > Landing Pages depending on your dashboard version). Click on the landing page you want to edit and select Edit.

  2. 2

    Find the HTML block in the elements panel

    In the left sidebar elements panel, look for the HTML block (or Code block). It is typically located under the "Content" or "Advanced" section of the element list.

  3. 3

    Drag the HTML block onto the page

    Drag the HTML block from the sidebar onto the page canvas. Position it where you want the Embeddy widget to appear.

  4. 4

    Paste your Embeddy iframe code

    Click the HTML block on the canvas to open its code editor. Paste your Embeddy embed code and click Save or Apply:

    <iframe
  src="https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID"
  width="100%"
  height="500"
  frameborder="0">
</iframe>
  5. 5

    Adjust the block dimensions

    After saving, you can resize the HTML block container on the canvas. Ensure it is wide enough and tall enough to display the widget without scrollbars.

  6. 6

    Save and publish

    Click Save & Publish (or Save & Close then Publish) in the top toolbar. Your landing page is now live with the embedded widget.

Tip: Brevo's editor may not fully render iframe content. Use the Preview feature or visit the published URL to verify the widget displays correctly.

3. Method 2 -- Page Settings Code Injection

Brevo landing pages have a settings panel where you can inject custom code into the page head or body. This is useful for analytics scripts, tracking pixels, or appending an iframe at the end of the page.

Note: Head code injection is for scripts, not visible content. For placing the widget visually within the page layout, use Method 1.

  1. 1

    Open page settings

    In the landing page editor, click the Settings tab or gear icon to access the page configuration panel.

  2. 2

    Find the Custom Code / Tracking section

    Look for Header Code, Footer Code, or Custom Scripts in the settings. Brevo provides fields for injecting code into the page head and before the closing body tag.

  3. 3

    Paste your code

    For tracking scripts, use the Header Code field. For an iframe at the bottom of the page, use the Footer Code field:

    <!-- Footer Code -->
<div style="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">
  </iframe>
</div>
  4. 4

    Save and publish

    Click Save, then Publish the landing page.

4. Troubleshooting

Widget shows a blank placeholder in the editor

Brevo's editor may not render HTML block content in real time. Click Preview or publish the page and visit the live URL to confirm the widget loads correctly.

Widget not visible on the published page

Verify your widget is published in the Embeddy dashboard. Also check the iframe src URL for typos in the WIDGET_ID or PROPS_ID values.

HTML block not available in the elements panel

The HTML block may be located under Advanced or More Elements in the sidebar. If you still cannot find it, check your Brevo plan -- landing pages with custom HTML require the Business plan or above.

Widget is cut off or overflows the container

Adjust the height attribute in your iframe code. Also resize the HTML block container in the editor to give the widget enough space. Check for padding or margin constraints on the parent section.

Widget not responsive on mobile

Use width="100%" in your iframe and avoid fixed pixel widths. Brevo landing pages are responsive, and a percentage-width iframe will adapt to mobile screens. Check the mobile preview in Brevo's editor to verify.

5. FAQ

Can I embed a widget inside a Brevo email?

No. Email clients do not support iframes or custom scripts. Include a link in your Brevo email campaign that directs subscribers to a landing page where the widget is embedded.

Does the HTML block support JavaScript?

Yes. Brevo's HTML block on landing pages supports full HTML, CSS, and JavaScript. Scripts will execute on the published page.

Is this the same as Sendinblue?

Yes. Brevo is the rebranded name for Sendinblue. The landing page builder and HTML block work identically under both names. All steps in this guide apply to both Brevo and legacy Sendinblue accounts.

Can I use the widget with a custom domain on Brevo?

Yes. Brevo allows you to connect a custom domain to your landing pages. The Embeddy widget works regardless of whether you use a Brevo subdomain or a custom domain.

Do I need a developer to embed the widget?

No. The HTML block requires only pasting the iframe code -- no programming knowledge is needed. The entire process takes about two minutes.

Ready to embed on Brevo?

Create your widget in Embeddy's no-code builder and drop it into your Brevo landing page with the HTML block in minutes.

Start for Free
PreviousSysteme.ioNextAll Guides