Boost Your Website Sales with a Spin-to-Win Offer Popup!
Looking for a fun and effective way to engage your website visitors and increase conversions? Our Spin-to-Win UI is the perfect solution!
This interactive UI element features a rotating spin wheel that activates with a simple button click. When the wheel stops, it automatically selects a discount or special offer—creating an exciting, game-like experience for users.
What makes it even better? The entire spin interface appears in a popup modal, making it super easy to integrate into any website—no need to redesign your layout or page structure.
By adding a little surprise and delight, this tool helps attract customer attention, encourage engagement, and ultimately increase your revenue. Turn casual visitors into loyal buyers with a spin!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#myModal').modal('show');
});
</script>
</head>
<body>
<div class="container">
<h2>Modal
Example</h2>
<!--
Trigger the modal with a button -->
<!--
Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!--
Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<i class="fa fa-remove" style="color:red;float:right;margin-right:10px;font-size: large;cursor: pointer;" title="Click
to close" data-dismiss="modal"></i>
<div id="spin-popup" style="font-family: Arial, sans-serif; text-align: center;">
<style>
#spin-popup .selector {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid red;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 5px;
z-index: 2;
}
#spin-popup .canvas-container {
position: relative;
display: inline-block;
}
#spin-popup canvas {
margin-top: 20px;
background-color: transparent;
}
#spin-popup #spinBtn {
margin-top: 20px;
padding: 12px 25px;
font-size: 18px;
font-weight: bold;
background-color: #fff;
border: none;
border-radius: 10px;
color: #00B7D5;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
#spin-popup #result {
margin-top: 20px;
font-size: 20px;
color: #333;
}
</style>
<h2 style="font-size: 28px; margin-bottom: 10px;">🎁 Spin & Win</h2>
<div class="canvas-container">
<div class="selector"></div>
<canvas id="popup-wheel" width="300" height="300"></canvas>
</div>
<br />
<button id="spinBtn">SPIN</button>
<div id="result"></div>
<script>
(function () {
const canvas = document.getElementById('popup-wheel');
const ctx = canvas.getContext('2d');
const segments = ['5%', '10%', '15%', '20%', '8%', '25%', '12%', '18%'];
const colors = ['#FEC007', '#00B7D5'];
const numSegments = segments.length;
const segAngle = 2 * Math.PI /
numSegments;
let angle = 0;
let currentRotation = 0;
let spinning = false;
function drawWheel() {
const radius = canvas.width / 2;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < numSegments; i++) {
const start = angle + i * segAngle;
const end = start + segAngle;
ctx.beginPath();
ctx.moveTo(radius, radius);
ctx.arc(radius, radius, radius, start, end);
ctx.fillStyle = colors[i
% 2];
ctx.fill();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.stroke();
ctx.save();
ctx.translate(radius, radius);
ctx.rotate(start + segAngle / 2);
ctx.textAlign = 'right';
ctx.fillStyle = '#fff';
ctx.font = 'bold 14px Arial';
ctx.fillText(segments[i] + ' OFF', radius - 10, 10);
ctx.restore();
}
ctx.beginPath();
ctx.arc(radius, radius, 40, 0, 2 *
Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.fillStyle = '#00B7D5';
ctx.font = 'bold 14px Arial';
ctx.textAlign = 'center';
ctx.fillText('PLAY', radius, radius - 5);
ctx.fillText('NOW', radius, radius + 12);
}
function spin() {
if (spinning) return;
spinning = true;
document.getElementById('result').textContent = '';
const spinAngle = 360 * 5 +
Math.floor(Math.random() * 360);
const finalAngle = (spinAngle % 360) *
Math.PI / 180;
const targetSegment = Math.floor((2 *
Math.PI - (finalAngle % (2 * Math.PI))) / segAngle) % numSegments;
let frames = 0;
const totalFrames = 150;
const startRotation = currentRotation;
const targetRotation = startRotation +
finalAngle + 2 * Math.PI * 4;
function animate() {
frames++;
const progress = frames / totalFrames;
const eased = easeOutCubic(progress);
currentRotation = startRotation + (targetRotation - startRotation) *
eased;
angle = currentRotation;
drawWheel();
if (frames < totalFrames) {
requestAnimationFrame(animate);
} else {
const resultText = segments[targetSegment];
document.getElementById('result').textContent = `🎉
Congratulations Show this Code to counter and get off from bill 🎉`;
spinning = false;
}
}
animate();
}
function easeOutCubic(t) {
return (--t) * t * t + 1;
}
drawWheel();
document.getElementById('spinBtn').addEventListener('click', spin);
})();
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn
btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
#BoostSales #CustomerEngagement #WebsiteConversion #IncreaseRevenue #MarketingTools #GrowthHack #Gamification #InteractiveUI #UserExperience #SpinToWin #SpinAndWin #WebDesignTips #EcommerceTips #PopupOffers #DiscountWheel #OfferPopup #FlashDeals
No comments:
Post a Comment