Product

Integration Tutorial

Embed a metsa.app widget on your website in five minutes

In this tutorial you will embed an interactive demo widget on a plain HTML page. By the end you will understand how the loader script works, how to configure widgets with data attributes, and how theming applies automatically.

No account needed

The demo widget runs entirely in your browser — no API key or dashboard signup required.

What you will need

  • A text editor
  • A web browser
  • A few minutes

Step 1: Create an HTML page

Create a file called demo.html and paste the following:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Widget Demo</title>
</head>
<body>
  <h1>My Event Page</h1>

  <!-- The widget will appear here -->

</body>
</html>

Open it in your browser. You should see the heading and nothing else.

Step 2: Add the widget

Add a single <script> tag where you want the widget to appear:

<body>
  <h1>My Event Page</h1>

  <script
    src="https://widgets.metsa.app/loader.js"
    data-widget="demo-color-picker"
  ></script>

</body>

Refresh the page. A color picker card appears. Try picking a colour — every part of the widget updates instantly.

It works!

The loader script found itself, read the data-widget attribute, fetched the widget module, and injected it into an isolated Shadow DOM container — all from one line of code.

Step 3: Try dark theme

Add a data-theme attribute to switch the widget to dark mode:

<script
  src="https://widgets.metsa.app/loader.js"
  data-widget="demo-color-picker"
  data-theme="dark"
></script>

Refresh and the widget renders with a dark palette. Remove the attribute and it follows the visitor’s system preference instead.

Step 5: See it on a real WordPress site

Want to see how the widget looks when embedded on an actual WordPress site? We have set up a live demo — a standard WordPress installation with a metsa.app widget integrated using the same one-line embed you just learned.

Open WordPress demo →

Step 4: How theming works

When you pick a colour in the demo widget, it calls deriveTheme() internally — the same function all metsa.app widgets use. From a single primary colour and background, the system derives an entire palette: hover states, text colours, borders, success/error tones, and more.

Production widgets (like the newsletter widget) receive their theme from the dashboard, but the mechanics are identical. What you see in the demo is exactly how theming behaves in production.

Next steps

Ready to embed a real widget?

  1. Sign up at dash.metsa.app and create a widget
  2. Copy the embed code from your dashboard — it looks the same, just with data-widget="email-collect" and your data-api-key
  3. Paste it on your event website

The pattern is always the same: one <script> tag, a data-widget type, and optional attributes for customisation.

See our products · Contact us