# Widgets

{% columns %}
{% column width="58.333333333333336%" %}
Widgets are no-code UI components you add to apps and websites to engage users through announcements, promotions, and gamified flows.

* Deliver tailored content.
* Engage with coupon reveals, pop-ups, and banners.
* Launch quickly with precise targeting.
* Reflect your brand with dynamic content.
* Measure user engagement in real-time.

Widgets turn every interaction into an opportunity to convert and retain users.
{% endcolumn %}

{% column width="41.666666666666664%" %}

<figure><img src="https://1642824329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX6uilbEAw42gqsudlclY%2Fuploads%2FXihq6icIm30UdxHzZmBW%2Fimage.png?alt=media&#x26;token=f405fccc-a53a-4caf-95d5-607f4d3c62df" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}

### Choose a widget type

<table data-view="cards"><thead><tr><th>Widget type</th><th data-card-target data-type="content-ref">Open</th></tr></thead><tbody><tr><td>Mobile In-App widgets (inside your mobile app)</td><td><a href="widgets/mobile-in-app">mobile-in-app</a></td></tr><tr><td>Web Pop-up widgets (on your website)</td><td><a href="widgets/web-pop-up">web-pop-up</a></td></tr><tr><td>Spin to Win (works on both mobile + web)</td><td><a href="widgets/spin-to-win">spin-to-win</a></td></tr></tbody></table>

### Quickstart: build and publish a widget

{% stepper %}
{% step %}

#### 1) Pick channel and format

Mobile widgets are published via **Mobile Widget** automation.

Web widgets are published via **Web Tools → Widget** rules.
{% endstep %}

{% step %}

#### 2) Design the widget

Start from a template or create a blank widget.
{% endstep %}

{% step %}

#### 3) Configure click actions

Decide what happens on tap/click (deeplink, URL, close, etc.).
{% endstep %}

{% step %}

#### 4) Set targeting + eligibility and publish

Use segments/tags and show limits to avoid overexposure.
{% endstep %}

{% step %}

#### 5) Measure and iterate

Track “shown” and “action” events in Event Insight.
{% endstep %}
{% endstepper %}

### Mobile widgets: design → publish → analyze

<table data-view="cards"><thead><tr><th>Mobile widget flow</th><th data-card-target data-type="content-ref">Open</th></tr></thead><tbody><tr><td>Design / create a mobile widget</td><td><a href="widgets/mobile-in-app/create">create</a></td></tr><tr><td>Assign click actions (buttons, images, components)</td><td><a href="widgets/mobile-in-app/create/assign-click-actions">assign-click-actions</a></td></tr><tr><td>Publish mobile widget (automation + audience + testing)</td><td><a href="widgets/mobile-in-app/publish">publish</a></td></tr><tr><td>Analyze widget performance (shown/action events)</td><td><a href="widgets/mobile-in-app/analyze">analyze</a></td></tr></tbody></table>

### Web widgets: design → publish → analyze

<table data-view="cards"><thead><tr><th>Web widget flow</th><th data-card-target data-type="content-ref">Open</th></tr></thead><tbody><tr><td>Design / create a web widget</td><td><a href="widgets/web-pop-up/create">create</a></td></tr><tr><td>Assign click actions (buttons, images, components)</td><td><a href="widgets/web-pop-up/create/assign-click-actions">assign-click-actions</a></td></tr><tr><td>Publish web widget (triggers, filters, placement)</td><td><a href="widgets/web-pop-up/publish">publish</a></td></tr><tr><td>Analyze widget performance (shown/action events)</td><td><a href="widgets/web-pop-up/analyze">analyze</a></td></tr></tbody></table>

### Spin to Win: configure → publish → analyze

<table data-view="cards"><thead><tr><th>Spin to Win workflow</th><th data-card-target data-type="content-ref">Open</th></tr></thead><tbody><tr><td>Configure slices, rewards, weights, and coupon logic</td><td><a href="widgets/spin-to-win">spin-to-win</a></td></tr><tr><td>Deliver coupon codes via SMS and push</td><td><a href="widgets/spin-to-win/send-coupon-codes-with-sms-and-push-messages">send-coupon-codes-with-sms-and-push-messages</a></td></tr><tr><td>Publish on mobile (automation + audience + testing)</td><td><a href="widgets/mobile-in-app/publish">publish</a></td></tr><tr><td>Publish on web (triggers, filters, placement)</td><td><a href="widgets/web-pop-up/publish">publish</a></td></tr><tr><td>Analyze Spin to Win events in Event Insight</td><td><a href="../customer-data/events/event-insight">event-insight</a></td></tr></tbody></table>

### How-to videos

{% embed url="<https://youtu.be/7XIZGV0rj1I?si=8Mzh1IBLQBoseYrz>" %}