Guides / Embedding

Two minutes on any platform

Embedding a widget on your site

Every widget has one embed code: an iframe that draws the widget, and a few lines of script that keep the iframe exactly as tall as the widget and let a video play over the page. Paste both where the widget should appear. The code never changes, so publishing a new look in DreamWidget updates every site that carries it.

The code

  1. Copy it. On the dashboard, every widget has Copy embed. Inside an editor it is under Settings, Embed.
  2. Paste it whole. Both parts, the iframe and the script that follows it. A platform that strips the script still shows the widget, but its height will be a fixed guess and a video will play inside the widget rather than over the page.
<iframe id="gfw-…" src="https://cdn.dreamwidget.com/embed/logos.html?w=…" …></iframe>
<script>…</script>

WordPress

Block editor (Gutenberg): add a block, search Custom HTML, paste the code, and update the page. Preview shows the widget. Classic editor: switch the editor to the Text tab (not Visual), paste, and update. Elementor, Divi, Beaver Builder: each has an HTML widget or module; paste there. WordPress.com: the Custom HTML block is on the Business plan and above; the free plans do not allow scripts.

Or the plugin. Download the DreamWidget plugin and install it from Plugins, Add New, Upload Plugin. It adds a DreamWidget block (paste the widget id, choose Logo or Video) and the shortcode [dreamwidget id="…" type="logos"] or type="video". It is on its way to the plugin directory; until it is listed, this zip is the same file.

Wix

In the editor click Add elements (the plus), then Embed code, then Embed HTML. An element appears; click Enter code, choose Code, paste, and Update. Drag the element's edges to the width you want, and set its height a little taller than the widget: Wix embeds are fixed boxes, and the widget sits inside. Wix Studio: Add, Embed & Social, Embed HTML, the same from there.

Squarespace

Edit the page, click Add block where the widget goes, choose Code, paste, make sure Display source is off, and save. Code blocks with scripts need the Business plan or above; the Personal plan strips scripts.

Webflow

Drag an Embed element (under Components, or type Embed in the add panel) to where the widget goes, paste, save, and publish the site. Webflow's designer canvas shows a placeholder; the widget draws on the published site and in preview.

Shopify

In the theme editor, add a section or block of type Custom Liquid where the widget goes and paste the code into it. For a page rather than the theme, open the page in the admin, click the <> button in the content editor to show HTML, and paste. Save.

Framer

Insert an Embed component, set its type to HTML, paste, and give it the width of your layout. Framer sizes embeds itself; set the height a little taller than the widget.

Carrd

Add an Embed element, set Type to Code, paste, done. Embeds need Carrd's Pro Standard plan or above.

Plain HTML, or anything else

Paste the code into the page's HTML where the widget goes. It works in any HTML page, in a static site generator, in a React or Vue app's markup, and in a CMS with an HTML field. It needs nothing installed.

Checking it worked

  1. The widget draws at the width of its container, and its height fits the content with no scrollbar and no empty band beneath. If there is a fixed 400px box with a scrollbar, the script part was stripped: try the platform's HTML or code block rather than a rich text field.
  2. A video opens over the page and plays at once. If it opens inside the widget's box instead, the script was stripped; the widget still works, smaller.
  3. A change made in DreamWidget and published appears on the site within a minute, with a hard refresh. Nothing on the site needs to change.

Anything else, email us with the page's address and we will look at it on the page itself.