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 mode

The demo widget carries its own Light / Dark buttons. Click Dark, and the whole palette is re-derived for a dark background: hover states, borders, text colours, and the success and error tones.

Note that there is no theme attribute on the script tag. The loader forwards only what a widget needs to reach the api (data-api-key, data-api-url, data-event-id, data-lang, and a couple more), and a production widget takes its appearance from its configuration in your dashboard rather than from the embed.

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.

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 →

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 the attributes that widget needs, your data-api-key plus, for an event widget, its data-event-id.

See our products · Contact us