How to Embed a Widget on Dorik

Dorik is a no-code website builder with a drag-and-drop editor and a rich library of elements. This guide shows you how to embed an Embeddy widget on your Dorik site using the Custom Code element and the site-wide custom code 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 Dorik account with an active website. You need editor access to the Dorik project where you want to embed your widget.

Custom Code Element

Dorik provides a dedicated Custom Code element that you can drag and drop onto any page. This element accepts raw HTML, CSS, and JavaScript — including iframes. It is the recommended way to embed an Embeddy widget on a specific page.

  1. 1

    Open the Dorik editor

    Log in to your Dorik account and open the website project you want to edit. Navigate to the page where you want the widget.

  2. 2

    Find the Custom Code element

    In the left sidebar, open the Elements panel. Scroll down or search for "Custom Code". You will find it under the Advanced or Other category.

  3. 3

    Drag and drop it onto your page

    Click and drag the Custom Code element from the panel onto the desired section of your page. A placeholder will appear where the element is placed.

  4. 4

    Paste your embed code

    Click on the Custom Code element to open its settings panel. You will see a code editor area. Paste your Embeddy iframe embed code into this editor.

  5. 5

    Save and publish

    Click Save, then Publish your site. Visit the live page to confirm the widget renders correctly.

Tip: The Custom Code element may show a placeholder in the editor instead of rendering the actual iframe. This is normal — the widget will render correctly on the published site.

Site-Wide Custom Code

If you want to add code that runs on every page — such as a floating chat widget or a tracking script — Dorik lets you inject custom code into the <head> or <body> of your entire site.

  1. 1

    Open Site Settings

    In the Dorik editor, click on Site Settings (gear icon) in the top toolbar or sidebar.

  2. 2

    Navigate to Custom Code

    Find the Custom Code tab in the settings. You will see fields for Header Code and Footer Code.

  3. 3

    Paste your code in the Footer Code field

    For an iframe embed, paste your Embeddy code into the Footer Code field so it is injected before the closing </body> tag.

  4. 4

    Save and publish

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

Important: Use the Custom Code element for page-specific embeds

The site-wide custom code option injects code on every page. If you only want the widget on a specific page, use the Custom Code element method described above instead.

Iframe Embed Code Example

Here is what a complete Embeddy iframe embed looks like for Dorik. 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 Dorik Custom 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 Custom Code element shows a placeholder instead of the widget

This is expected behavior in the Dorik editor. Custom code elements often do not render their content in the editor preview. Publish your site and check the live page to verify the widget works.

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 adjust the Custom Code element's container size in the Dorik editor.

I cannot find the Custom Code element

The Custom Code element is located in the Advanced or Other section of the Elements panel. If you still cannot find it, try searching for "code" or "custom" in the element search bar. Some Dorik plans may restrict access to advanced elements.

Frequently Asked Questions

Does embedding an Embeddy widget slow down my Dorik 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.

Can I use the Custom Code element on Dorik's free plan?

Dorik's free plan includes basic elements. The Custom Code element and site-wide code injection are typically available on paid plans. Check your Dorik subscription to confirm access to advanced elements.

Can I embed the same widget on multiple Dorik pages?

Yes — add a Custom Code element with the same embed 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 Dorik site.

Create your free widget at embeddy.ai