Embed Bethemesh Widgets

Quick start

Add a container, set the tool slug, then load the versioned runtime once.

Recommended integration

<div
  class="bethemesh-widget"
  data-tool="password-generator"
  data-lang="en"
  data-theme="auto"
  data-min-height="560"
></div>
<script src="https://bethemesh.com/widgets/v1/bethemesh.js" async></script>

Direct iframe

Use the direct iframe generated by the configurator.

HTML

<iframe
  src="https://bethemesh.com/en/embed/password-generator?theme=auto"
  title="Bethemesh widget"
  width="100%"
  height="560"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
  style="border:0;display:block;width:100%"
></iframe>

Available options

Attribute	Purpose	Default
data-tool	Localized widget slug (required).	—
data-lang	Embedded route locale.	en
data-theme	auto, light or dark theme.	auto
data-title	Custom title, limited to 100 characters.	Tool title
data-subtitle	Custom subtitle, limited to 180 characters.	—
data-min-height	Initial height before automatic resize.	560
data-loading	lazy or eager iframe loading.	lazy

Events and automatic resize

The runtime creates the iframe, listens to signed Bethemesh messages and automatically adjusts its height. The public API can also initialize dynamically added widgets.

window.BethemeshWidgets.initialize()

CMS compatibility

WordPress / Elementor

Use a Custom HTML block.

Webflow / Wix

Paste the code into an Embed component.

Shopify

Add a Custom Liquid or HTML section.

HTML / Astro / React

Insert the container and load the script once.

Security

Permissions and sandbox tokens are generated from each tool’s declared capabilities. Do not manually broaden them without a real need.

Troubleshooting

Multiple widgets

Load bethemesh.js only once, even when the page contains several containers.

Dynamic content

Widgets added after page load are detected automatically. You may also call BethemeshWidgets.initialize().

External scripts blocked