Integrate the Pick-4-Win application seamlessly into your website using iframe embedding. The application automatically detects iframe context and communicates with the parent window through postMessage events for actions like authentication redirects, social sharing, and clipboard operations.
Add the Pick-4-Win application to your website using an iframe element:
/[locale]/contests-list[locale] with your desired language code:/en/contests-list for English?token=YOUR_TOKENChoose the appropriate environment for your integration:
https://t2.engagearena.xyz/Use for development and testing purposeshttps://engagearena.xyz/Use for live deployments1<iframe
2 src="/en/contests-list?token=YOUR_TOKEN"
3 width="1130px"
4 height="820px"
5 frameborder="0"
6></iframe>Add a message event listener to your parent window to handle communications from the Pick-4-Win iframe:
1// Add this to your parent page's JavaScript
2window.addEventListener('message', async (event) => {
3 // Security check - validate origin if needed
4 if (event.origin !== '') {
5 return;
6 }
7
8 let data;
9 try {
10 data = JSON.parse(event.data);
11 } catch (error) {
12 console.error('Failed to parse message data:', error);
13 return;
14 }
15
16 switch (data.eventType) {
17 case 'copy_clipboard':
18 // Handle clipboard copy requests
19 try {
20 const textToCopy = data.payload?.data || window.location.href;
21 await navigator.clipboard.writeText(textToCopy);
22 console.log('Copied to clipboard');
23 } catch (err) {
24 console.error('Copy failed:', err);
25 }
26 break;
27
28 case 'social_redirect_telegram':
29 // Handle Telegram sharing - uses current page URL
30 const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(window.location.href)}`;
31 window.open(telegramUrl, '_blank');
32 break;
33
34 case 'social_redirect_whatsapp':
35 // Handle WhatsApp sharing - uses current page URL
36 const whatsappUrl = `https://api.whatsapp.com/?text=${encodeURIComponent(window.location.href)}`;
37 window.open(whatsappUrl, '_blank');
38 break;
39
40 case 'social_redirect_line':
41 // Handle LINE sharing - uses current page URL
42 const lineUrl = `https://social-plugins.line.me/lineit/share?url=${encodeURIComponent(window.location.href)}`;
43 window.open(lineUrl, '_blank');
44 break;
45
46 case 'social_redirect_x':
47 // Handle X sharing - uses current page URL
48 const xUrl = `https://x.com/intent/tweet?url=${encodeURIComponent(window.location.href)}`;
49 window.open(xUrl, '_blank');
50 break;
51
52 case 'login_redirect':
53 // Redirect to your login page
54 window.location.href = '/auth/login';
55 break;
56
57 case 'signup_redirect':
58 // Redirect to your signup page
59 window.location.href = '/auth/signup';
60 break;
61
62 case 'email_share':
63 // Handle email sharing
64 const subject = data.payload?.subject;
65 const body = data.payload?.body;
66 const current_url = window.location.href;
67 const mailtoUrl = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}%0A%0A${encodeURIComponent(current_url)}`;
68 window.location.href = mailtoUrl;
69 break;
70
71 case 'action_place_bet':
72 // Handle bet placement action
73 window.location.href = '/sports';
74 break;
75
76 case 'native_share':
77 // Handle native share action - trigger browser's native share API
78 if (navigator.share) {
79 try {
80 await navigator.share({
81 title: data.payload?.title || 'Pick4Win',
82 url: window.location.href,
83 });
84 console.log('Successfully shared');
85 } catch (err) {
86 console.log('Share cancelled or failed:', err);
87 // Fallback to clipboard copy if native share fails
88 try {
89 await navigator.clipboard.writeText(window.location.href);
90 console.log('Copied to clipboard as fallback');
91 } catch (clipboardErr) {
92 console.error('Clipboard fallback failed:', clipboardErr);
93 }
94 }
95 } else {
96 // Fallback for browsers that don't support native share
97 try {
98 await navigator.clipboard.writeText(window.location.href);
99 console.log('Copied to clipboard (no native share support)');
100 } catch (err) {
101 console.error('Clipboard fallback failed:', err);
102 }
103 }
104 break;
105
106 default:
107 console.warn('Unhandled event type:', data.eventType);
108 }
109});List of all postMessage events that the Pick-4-Win application can send:
Event Type: copy_clipboard
Triggered when user copies text to clipboard
1// Payload
2{
3 currentUrl?: string // The current URL of the iframe
4 contestId?: string // The ID of the current contest (if applicable)
5 data?: string // The text/data to copy to clipboard
6}Event Types: social_redirect_telegram, social_redirect_whatsapp, social_redirect_line, social_redirect_x
Triggered when user clicks social sharing buttons.
1// Payload
2{
3 currentUrl?: string // The current URL of the iframe
4 contestId?: string // The ID of the current contest (if applicable)
5}Event Type: email_share
Triggered when user clicks email sharing.
1// Payload
2{
3 currentUrl?: string // The current URL of the iframe
4 contestId?: string // The ID of the current contest (if applicable)
5 subject?: string // Email subject line
6 body?: string // Email body content
7}Event Types: login_redirect, signup_redirect
Triggered when user clicks login or signup buttons
1// Payload
2{
3 currentUrl?: string // The current URL of the iframe
4 contestId?: string // The ID of the current contest (if applicable)
5}Event Type: action_place_bet
Triggered when user clicks the [Bet Now] button
1// Payload
2{
3 currentUrl?: string // The current URL of the iframe
4 contestId?: string // The ID of the current contest (if applicable)
5}Event Type: native_share
Triggered when user clicks the [Invite friends to play!] button in mobile view
1// Payload
2{
3 currentUrl?: string // The current URL of the iframe
4 contestId?: string // The ID of the current contest (if applicable)
5 title?: string // The title for the share action (from share.cta.title translation)
6}