Welcome Pack Popup

📋 Setup

Setting up the campaign in Optimove

Follow these steps inside Optimove to configure the campaign. You'll need access to the Campaigns and Triggers sections.

Campaign 1 — show the popup to new players

Create a campaign that targets new players on their first visit. This campaign's only job is to display the welcome pack popup. In the campaign's popup step, open the popup code editor and paste the popup HTML from the bottom of this page — or use a custom popup you've built (see the guidance in the Popup Code section below).

This campaign has no connection to the triggers below. It just shows the popup — the player's selection fires the events that the second campaign picks up.

Create three real-time triggers — one per offer

In Optimove, go to Triggers → Real-Time. Create three separate triggers, one for each offer. All three use the same event (promo_award_selected) and the same promo_id — which identifies this specific popup campaign and must match whatever value is set in the popup script. Each trigger then also filters on a different award_id so it only fires for its specific offer.

Trigger 1: promo_award_selected · promo_id = welcome_pack_v1 · award_id = a8822f1a-...

Trigger 2: promo_award_selected · promo_id = welcome_pack_v1 · award_id = 0a1ed776-...

Trigger 3: promo_award_selected · promo_id = welcome_pack_v1 · award_id = d1fde953-...

Building a different popup campaign? Change promo_id to a new unique value in both the popup script and all three triggers. This keeps campaigns isolated so they don't accidentally fire each other's bonuses.

Campaign 2 — apply the bonus

Create a second campaign that is triggered by Campaign 1. Attach it to the three triggers above. Each trigger fires this campaign with a different award_id, so the campaign knows which bonus to apply. Set the audience to new players who haven't received a welcome bonus yet.

Trigger 1 fires → apply 100% Deposit Bonus

Trigger 2 fires → apply 50 Free Spins

Trigger 3 fires → apply 200% VIP Bonus

Test before going live

Use Optimove's test mode to trigger the popup for a test player. Confirm the popup looks right and that selecting each offer fires the correct trigger. Check the Optimove event stream to verify the right award_id came through for each offer.

🛠 Developer Notes

Known quirks in Optimove's popup editor

If a developer is modifying the popup HTML, these are the limitations to watch for. The popup code below is already written to work around all of them.

No `//` single-line comments inside scripts

Optimove's editor strips newlines from script blocks. A // comment would comment out all remaining code on that line. Use /* */ block comments instead, or no comments at all.

No `?.` optional chaining

The editor inserts a space turning ?. into ? ., which breaks JavaScript syntax and silently kills the entire script. Use && guards instead.

No inline `onclick` attributes

The site's security policy blocks inline event handlers. Use addEventListener inside the <script> block — it works because the script tag itself receives the security nonce.

Use event delegation, not per-element listeners

Attach click handlers to document and use e.target.closest(). Optimove may re-render the popup DOM after images load, which destroys listeners attached directly to elements.

📄 Popup Code

Popup HTML

The block below is an example popup for the welcome pack. You can build your own — the design and layout can be anything. The only requirement is that the script fires the right event when a player makes a selection.

Building your own popup script

Every popup that connects to this campaign system needs to do one thing: call optimoveSDK.API.reportEvent() when the player makes a selection. The call must include three values that match what your Optimove triggers are configured to listen for:

1️⃣

Event name — the name of the Optimove event, e.g. promo_award_selected. Must match the event your triggers listen for.

2️⃣

promo_id — identifies this popup campaign. Pick any unique string per campaign (e.g. welcome_pack_v1). The value in the popup script must exactly match the value in your Optimove triggers — if they differ, the triggers won't fire. Change it for every new popup campaign.

3️⃣

award_id — the Award ID of the offer the player selected (see the Award ID reference above). This is how Optimove knows which trigger to fire.

Also read the Developer Notes section above before writing any popup script. Optimove's editor has quirks that will silently break your code if you're not aware of them.

Example popup

The highlighted lines in teal are the parts that connect to Optimove — the rest is just design.

          Paste into Optimove popup code editor
          HTML
        

<!DOCTYPE html>
<html>
	<head>
		<title>Optimove Welcome Pack</title>
	</head>
	<body>
		<div class="bee-popup-container">
			<style>
				.bee-popup-container h1,
				.bee-popup-container h2,
				.bee-popup-container p {
					margin: 0;
					padding: 0;
				}
				.bee-popup-container {
					color: #ffffff;
					font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
					background-color: #000000;
				}
				.bee-popup-container * {
					box-sizing: border-box;
				}
				.bee-popup-row {
					position: relative;
				}
				.bee-popup-row-content {
					max-width: 700px;
					position: relative;
					margin: 0 auto;
					display: flex;
				}
				.bee-popup-col-w4 {
					flex: 4;
				}
				.bee-popup-col-w12 {
					flex: 12;
				}
				.bee-popup-row-1 .bee-popup-row-content {
					flex-direction: column;
					align-items: center;
					padding: 32px 24px 16px;
					gap: 8px;
				}
				.bee-popup-eyebrow {
					font-size: 11px;
					font-weight: 700;
					letter-spacing: 0.18em;
					text-transform: uppercase;
					color: #13e3ba;
					opacity: 0.8;
				}
				.bee-popup-heading h1 {
					color: #ffffff;
					font-size: 30px;
					font-weight: 800;
					letter-spacing: -0.01em;
					text-align: center;
					line-height: 1.15;
				}
				.bee-popup-heading h1 span {
					color: #13e3ba;
				}
				.bee-popup-subheading {
					font-size: 13px;
					color: rgba(255, 255, 255, 0.45);
					text-align: center;
					margin-top: 4px;
				}
				.bee-popup-row-2 .bee-popup-row-content {
					padding: 16px 24px 36px;
					gap: 12px;
					align-items: stretch;
				}
				.bee-popup-offer {
					position: relative;
					background: linear-gradient(160deg, #161616 0%, #0e0e0e 100%);
					border: 1.5px solid #2a2a2a;
					border-radius: 16px;
					text-align: center;
					cursor: pointer;
					display: flex;
					flex-direction: column;
					align-items: center;
					transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
					overflow: hidden;
				}
				.bee-popup-offer::before {
					content: "";
					position: absolute;
					inset: 0;
					background: radial-gradient(ellipse at 50% 0%, rgba(19, 227, 186, 0.08) 0%, transparent 70%);
					opacity: 0;
					transition: opacity 0.2s ease;
					pointer-events: none;
					z-index: 1;
				}
				.bee-popup-offer:hover {
					border-color: #13e3ba;
					transform: translateY(-3px);
					box-shadow: 0 8px 28px rgba(19, 227, 186, 0.15);
				}
				.bee-popup-offer:hover::before {
					opacity: 1;
				}
				.bee-popup-offer:active {
					transform: translateY(-1px);
				}
				.offer-banner {
					width: 100%;
					display: block;
					border-radius: 14px 14px 0 0;
					object-fit: cover;
					aspect-ratio: 7 / 3;
					background-color: #1a1a1a;
				}
				.offer-body {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 6px;
					padding: 14px 14px 18px;
					width: 100%;
				}
				.offer-highlight {
					font-size: 28px;
					font-weight: 800;
					color: #13e3ba;
					letter-spacing: -0.02em;
					line-height: 1;
				}
				.offer-label {
					font-size: 11px;
					font-weight: 700;
					letter-spacing: 0.12em;
					text-transform: uppercase;
					color: rgba(255, 255, 255, 0.55);
					margin-top: 2px;
				}
				.offer-divider {
					width: 28px;
					height: 1px;
					background: rgba(19, 227, 186, 0.25);
					margin: 4px auto;
				}
				.offer-description {
					font-size: 11px;
					color: rgba(255, 255, 255, 0.35);
					line-height: 1.4;
				}
				.offer-badge {
					position: absolute;
					top: -1px;
					right: -1px;
					background: #13e3ba;
					color: #000000;
					font-size: 9px;
					font-weight: 800;
					letter-spacing: 0.1em;
					text-transform: uppercase;
					padding: 3px 8px;
					border-radius: 0 14px 0 8px;
					z-index: 2;
				}
				.bee-popup-row-divider {
					height: 1px;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.06) 70%, transparent);
					max-width: 700px;
					margin: 0 auto;
				}
			</style>
			<div id="opt-before-select" class="bee-popup-rows-container">
				<div class="bee-popup-row bee-popup-row-1">
					<div class="bee-popup-row-content">
						<div class="bee-popup-eyebrow">New Player Offer</div>
						<div class="bee-popup-col bee-popup-col-w12">
							<div class="bee-popup-heading">
								<h1>CHOOSE YOUR <span>WELCOME PACK</span></h1>
							</div>
						</div>
						<div class="bee-popup-subheading">Pick one offer to claim on your first deposit</div>
					</div>
				</div>
				<div class="bee-popup-row-divider"></div>
				<div class="bee-popup-row bee-popup-row-2">
					<div class="bee-popup-row-content">
						<div class="bee-popup-col bee-popup-col-w4">
							<div class="bee-popup-offer" data-award-id="a8822f1a-67d4-4110-be4a-17be0d3480db">
								<picture>
									<source media="(min-width: 480px)" srcset="                      https://swivel-production-public.s3.eu-west-1.amazonaws.com/sw-packages/7a801a29-c686-4a5a-b533-2d3075e164ca.largeImage                   "><img class="offer-banner" src="https://swivel-production-public.s3.eu-west-1.amazonaws.com/sw-packages/1f1f56c2-20f5-4301-aa89-38c3b00922ba.smallImage" alt="Starter Pack"></picture>
								<div class="offer-body">
									<div class="offer-highlight">100%</div>
									<div class="offer-label">Deposit Bonus</div>
									<div class="offer-divider"></div>
									<div class="offer-description">Up to $200
										<br>matched bonus</div>
								</div>
							</div>
						</div>
						<div class="bee-popup-col bee-popup-col-w4">
							<div class="bee-popup-offer" data-award-id="0a1ed776-e408-4edf-9f2b-e17d9e6c21a5">
								<div class="offer-badge">Popular</div>
								<picture>
									<source media="(min-width: 480px)" srcset="                      https://swivel-production-public.s3.eu-west-1.amazonaws.com/sw-packages/bef4de2e-337e-41ca-83f3-3adb02e24c29.smallImage                   "><img class="offer-banner" src="https://swivel-production-public.s3.eu-west-1.amazonaws.com/sw-packages/bef4de2e-337e-41ca-83f3-3adb02e24c29.smallImage" alt="Free Spins Pack"></picture>
								<div class="offer-body">
									<div class="offer-highlight">50</div>
									<div class="offer-label">Free Spins</div>
									<div class="offer-divider"></div>
									<div class="offer-description">No wagering
										<br>on winnings</div>
								</div>
							</div>
						</div>
						<div class="bee-popup-col bee-popup-col-w4">
							<div class="bee-popup-offer" data-award-id="d1fde953-1ed4-4018-a3ba-1f0a9a7defa9">
								<picture>
									<source media="(min-width: 480px)" srcset="                      https://swivel-production-public.s3.eu-west-1.amazonaws.com/sw-packages/99ba733e-6f85-4861-9984-6c7beb27a5bc.largeImage                   "><img class="offer-banner" src="https://d3aaoo30se75mz.cloudfront.net/1712/2026_05_26_9_00_33/smallImg.png" alt="VIP Pack"></picture>
								<div class="offer-body">
									<div class="offer-highlight">200%</div>
									<div class="offer-label">VIP Bonus</div>
									<div class="offer-divider"></div>
									<div class="offer-description">Up to $1000
										<br>+ priority support</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="opt-after-select" style="display:none; padding:48px 24px; text-align:center; background:#000;">
				<div style="font-size:36px; margin-bottom:12px;">✓</div>
				<div style="font-size:18px; font-weight:800; color:#13e3ba;">Offer Selected</div>
				<div style="font-size:13px; color:rgba(255,255,255,0.45); margin-top:8px;">Your welcome pack will be applied onfirst deposit</div>
			</div>
		</div>
		<script>
			console.debug("Popup Open");
			document.addEventListener("click", function(e)
			{
				var offer = e.target.closest(".bee-popup-offer[data-award-id]");
				if (!offer)
				{
					return;
				}
				var awardId = offer.getAttribute("data-award-id");
				if (!window.optimoveSDK)
				{
					console.warn("[Optimove] SDK missing — event NOT sent");
					return;
				}
				window.optimoveSDK.API.reportEvent("promo_award_selected",
				{
					award_id: awardId,
					promo_id: 'welcome_pack_v1',
				});
				document.getElementById("opt-before-select").style.display = "none";
				document.getElementById("opt-after-select").style.display = "block";
				setTimeout(function()
				{
					window.optimoveSDK.API.closeRealtimePopup(true);
				}, 1500);
			});
		</script>
	</body>
</html>

What this campaign does

How it works, step by step

Popup appears

Player picks an offer

Optimove applies bonus

The three welcome offers

Setting up the campaign in Optimove

Campaign 1 — show the popup to new players

Create three real-time triggers — one per offer

Campaign 2 — apply the bonus

Test before going live

Known quirks in Optimove's popup editor

No `//` single-line comments inside scripts

No `?.` optional chaining

No inline `onclick` attributes

Use event delegation, not per-element listeners

Popup HTML

Building your own popup script

Example popup

Welcome Pack Popup

What this campaign does

How it works, step by step

Popup appears

Player picks an offer

Optimove applies bonus

The three welcome offers

Setting up the campaign in Optimove

Campaign 1 — show the popup to new players

Create three real-time triggers — one per offer

Campaign 2 — apply the bonus

Test before going live

Known quirks in Optimove's popup editor

No // single-line comments inside scripts

No ?. optional chaining

No inline onclick attributes

Use event delegation, not per-element listeners

Popup HTML

Building your own popup script

Example popup

No `//` single-line comments inside scripts

No `?.` optional chaining

No inline `onclick` attributes