WebDYI
WebDYI
No-code widgets
Embedding

Embed your widget anywhere

After creating a widget link in the app, copy the embed code and paste it into your website, CMS, or blog.

Basic iframe snippet

<iframe src="https://cdn.webdyi.com/w/{instanceId}"
  title="WebDYI widget"
  loading="lazy"
  style="width:100%;height:400px;border:0;border-radius:8px"></iframe>

Responsive auto-resize snippet (recommended)

Use this when your widget height changes based on content. The helper script keeps the iframe height in sync automatically. 

<iframe src="https://cdn.webdyi.com/w/{instanceId}"
          title="WebDYI widget"
          data-webdyi-widget
          loading="lazy"
          style="width:100%;height:400px;border:0;border-radius:8px"></iframe>
        <script async src="https://cdn.webdyi.com/embed.js"></script>

Responsive container snippet

<div style="position:relative;width:100%;padding-bottom:56.25%;overflow:hidden;border-radius:8px">
  <iframe src="https://cdn.webdyi.com/w/{instanceId}"
    title="WebDYI widget"
    loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

JavaScript SDK — webdyi.createPlayground()

Use the JS SDK to embed an interactive editor playground directly in your page. Include the UMD script once, then call webdyi.createPlayground(selector, options). 

<div id="my-widget"></div>
<script src="https://cdn.webdyi.com/sdk/livecodes.umd.js"></script>
<script>
  webdyi.createPlayground('#my-widget', {
    appUrl: 'https://app.webdyi.com/',
    title:  'My widget',
    import: 'id/YOUR_PROJECT_ID',
  });
</script>

Available options

Option Type Required Description
appUrl string Yes Base URL of the WebDYI app. Use https://app.webdyi.com/.
title string No Display title shown in the playground toolbar and used as the iframe title attribute for accessibility.
import string No Project to load. Use id/PROJECT_ID for a saved cloud project. You can also pass a URL or GitHub path.
config object No Inline LiveCodes config object. Overrides loaded project settings. Accepts all standard config keys (markup, style, script, theme, etc.).
loading "eager" | "lazy" | "click" No Controls when the playground boots. eager starts immediately, lazy waits until visible, click waits for user interaction. Defaults to lazy in embed mode.
view "split" | "editor" | "result" No Initial panel layout. split shows editor and result side-by-side, editor shows only code, result shows only the rendered output.
mode string No App mode: full, editor, result, simple, lite, or codeblock.
readonly boolean No When true, all editors are read-only. Useful for display or documentation embeds.
theme "light" | "dark" No Forces a specific UI theme. Defaults to the user's system preference.
height number No Height of the playground iframe in pixels. Defaults to 300.

Example — embed with result-only view

webdyi.createPlayground('#my-widget', {
          appUrl: 'https://app.webdyi.com/',
          title:  'Testimonial carousel',
          import: 'id/YOUR_PROJECT_ID',
          view:   'result',
          loading: 'lazy',
        });

Where to get the link

  1. Open https://app.webdyi.com/.
  2. Create your widget and save it.
  3. Open the Widgets menu and copy your widget link or embed code.
  4. Paste into your site editor.

Customize and embed in Canva (Iframely)

Use this flow when you want to customize first, then embed your widget inside Canva.

  1. Open https://app.webdyi.com/ and log in.
  2. Customize your widget (text, colors, media, and settings).
  3. Click Save.
  4. Click Share and copy the widget URL.
  5. In Canva, open your design and launch the Embed app by Iframely.
  6. Paste the widget URL and confirm.
  7. You should see the embedded widget preview in Canva.
  • Use the widget URL, not an editor URL.
  • If Canva does not refresh immediately, reload the embed panel.

Notes

  • Use the auto-resize script snippet when widget content height can change.
  • Use full-width containers so widgets look good on mobile and desktop.
  • Keep `loading="lazy"` for better page performance.
  • If your platform blocks iframes, use a custom HTML/embed block.