promo_wheel

Promo Wheel Template

The Promo Wheel template enables you to engage users in a fun way. Users can test their luck by spinning the wheel. However, they must first add an email and click on the button. An offer will be randomly generated for the user. To collect email addresses be sure to update the handlePromoReceived with the desired custom behavior. Addresses can be sent to a server directly or to the OneSignal REST API to create a new email player.

About This Template

This template uses css clip paths to create the promo wheel slices and css animations to rotate the wheel.

in-app-html-templates/promo_wheel/index.html

Lines 390 to 437 in db2d3e7

	function handlePromoReceived(number) {
	var finalRotation = number % 360;
	var isPromoReceived;
	var shouldTryAgain;
	if (finalRotation < 30) {
	isPromoReceived = false;
	shouldTryAgain = true;
	}
	if (finalRotation >= 30 && finalRotation < 90) {
	window.deal = "25% Off!";
	window.promoCode = "58UYGD";
	isPromoReceived = true;
	shouldTryAgain = false;
	}
	if (finalRotation >= 90 && finalRotation < 150) {
	window.deal = "20% Off!";
	window.promoCode = "18RYBQ";
	isPromoReceived = true;
	shouldTryAgain = false;
	}
	if (finalRotation >= 150 && finalRotation < 210) {
	window.deal = "30% Off!";
	window.promoCode = "48YTGA";
	isPromoReceived = true;
	shouldTryAgain = false;
	}
	if (finalRotation >= 210 && finalRotation < 270) {
	window.deal = "10% Off!";
	window.promoCode = "78UUWL";
	isPromoReceived = true;
	shouldTryAgain = false;
	}
	if (finalRotation >= 270 && finalRotation < 330) {
	window.deal = "15% Off!";
	window.promoCode = "01RLPW";
	isPromoReceived = true;
	shouldTryAgain = false;
	}
	if (finalRotation >= 330) {
	isPromoReceived = false;
	shouldTryAgain = true;
	}
	return {
	isPromoReceived: isPromoReceived,
	shouldTryAgain: shouldTryAgain,
	}
	}

Be sure to take a look at the handlePromoReceived function to replace the hardcoded promo codes with some custom behavior.