Custom Widgets

A widget is a small, self-contained mini app that you place on a page with the Advanced Layout Builder. It is written in HTML, CSS, and JavaScript, and it can be a prize spin wheel, a scratch card, a countdown, a feedback form, a photo picker, or anything else you need. Widgets are ideal for gamification and custom workflows.

1. 1

   Open the layout builder

   Open the page you want in the Advanced Layout Builder.

2. 2

   Add a widget

   Click Add element and choose Widget. Only the event owner can add widgets.

3. 3

   Choose its code

   Pick one of the built-in examples, one of My saved widgets, or paste your own code.

4. 4

   Place it

   Move and resize the widget on the canvas like any other element.

5. 5

   Apply the layout

   Click Apply layout to save it with the event.

Start from a ready-made widget and change its settings, or use it as a base for your own:

The builder reads your widget code and turns its main settings into a simple form, so you can change them without touching the code. Changing a field rewrites that line in the code for you.

Widgets run in an isolated frame, so they cannot access the app, your login, or cookies. They talk to the event through a small set of calls on EPD:

Beyond the three basic calls, EPD includes helpers for images and webhooks. The Widget API box under the code field in the builder always lists every call available to your widget.

A typical widget follows four steps:

1. 1

   Read the context

   Call EPD.getContext() to greet the guest or react to earlier answers.

2. 2

   Show your interface

   Build the screen with normal HTML, CSS, and JavaScript. Widgets cannot reach the app, your login, or cookies.

3. 3

   Save the outcome

   Call EPD.submitResult({ ... }) for values and EPD.submitImage for pictures. They are stored with the guest session.

4. 4

   Continue the flow

   Call EPD.next() when the guest is done, optionally after a short delay.

Here is a minimal widget that puts these steps together:

<h2 id="hello"></h2>
<button id="yes">Count me in!</button>
<script>
  EPD.getContext().then(function (ctx) {
    document.getElementById('hello').textContent = 'Welcome to ' + ctx.eventName;
  });
  document.getElementById('yes').onclick = function () {
    EPD.submitResult({ joined: 'yes' });
    setTimeout(function () { EPD.next(); }, 800);
  };
</script>

Values saved with EPD.submitResult are stored with the guest session. They show up with the survey responses (see Manage Responses), can be sent to your systems with a webhook, and an image link saved by a widget can be used as the background of a camera question, see Live Background Removal.

A widget can appear on the page right away, or only when a guest taps a button.

1. 1

   Add a button

   Add a button element to the page.

2. 2

   Set its action to Launch widget

   In the button settings, choose the action Launch widget.

3. 3

   Pick the widget

   Choose the widget the button opens from the list of widgets on the page.

4. 4

   Look for the rocket

   A widget that is linked to a button is marked with an orange rocket icon. Hover over it to see what it means.

Every widget can send what it saves to your own system, such as a CRM or a spreadsheet, whatever the widget code does.

1. 1

   Select the widget

   Select the widget on the canvas to open its settings.

2. 2

   Add a webhook URL

   Enter a full https:// address. If the field is empty, nothing is sent.

3. 3

   Turn the webhook on

   Use the toggle to turn sending on or off without deleting the URL.

Turn on Run Widget above the canvas to run the widget with sample data. A preview log lists the EPD.submitResult and EPD.next calls and any errors, and nothing in the log is saved. Webhooks are shown in the log, but they are not sent during a preview.

Click Save this widget to keep it in My saved widgets, then pick it again on other pages and events. Deleting a saved widget does not affect layouts that already use it, because they keep their own copy.