api-offerwall-example/index.html at master · pollfish/api-offerwall-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<html>
  <head>
    <title>Pollfish API Offerwall Example</title>
  </head>
  <body>
  <style>

    .text-center {
      text-align: center;
    }
    .container {
      max-width: 960px;
      margin: 0 auto;
    }
    button {
      outline: none;
      border: none;
      background-color: #0e68f9;
      padding: 8px 14px;
      border-radius: 6px;
      color: white;
      font-size: 14px;
      cursor: pointer;
    }

    iframe {
      width: 100%;
      height: 100%;
    }

  </style>
  <div>
  	<div class="container">
  		<span id='successMessage' style="display:none">You have finished the survey successfully.</span>
  		<span id='warningMessageNotEligible' style="display:none;">You are not eligible to take the survey.</span>
  		<span id='warningMessageSurveyClosed' style="display:none;">The survey has closed.</span>
  		<span id='warningMessageNoSurveyAvailable' style="display:none;">No survey available.Please try again!</span>
  		<span id='errorMessage' style="display:none;">Something went wrong!</span>
  		<span id='loadingMessage' style="display:none;">Searching for survey....</span>
  	</div>
    <div class="container text-center">
    	<button style="margin-top: 150px" id="requestSurvey" onclick="fetchSurvey()">Show offerwall</button>
    	<button id="buttonRewardedSurvey" onclick="openSurvey()" style="display:none"></button>
    </div>
  </div>
  <div id='surveyContainer'>
  	<div id="survey">
  		<iframe id="pollfishSurveyFrame" frameborder="0" name="pollfishSurveyFrame" seamless="seamless"></iframe>
  	</div>
  </div>
  <script>

    /**
    * This function makes a call to the api in order to fetch the survey
    */
    function fetchSurvey(){
    	const api_key = 'YOUR_API_KEY';
    	const debug = true;
    	const device_id = 'YOUR_DEVICE_ID';
    	const request_uuid = 'YOUR_REQUEST_UUID';

    	hideElement('requestSurvey');
    	showElement('loadingMessage');
    	const url = `https://wss.pollfish.com/v2/device/register/true?json=%7B%22api_key%22%3A%22${api_key}%22%2C%22offerwall%22%3A%22true%22%2C%22debug%22%3A%22${debug}%22%2C%22ip%22%3A%221.2.3.4%22%2C%22device_id%22%3A%22${device_id}%22%2C%22timestamp%22%3A%221517312061131%22%2C%22encryption%22%3A%22NONE%22%2C%22version%22%3A%229%22%2C%22device_descr%22%3A%22UNKNOWN%22%2C%22os%22%3A%223%22%2C%22os_ver%22%3A%2210.13.2%22%2C%22scr_h%22%3A%221178%22%2C%22src_w%22%3A%221920%22%2C%22scr_size%22%3A%2223.46429949294128%22%2C%22manufacturer%22%3A%22UNKNOWN%22%2C%22locale%22%3A%22en-US%2Cen%2Cel%22%2C%22request_uuid%22%3A%22${request_uuid}%22%2C%22hardware_accelerated%22%3A%22false%22%2C%22video%22%3A%22true%22%2C%22survey_format%22%3A%220%22%7D&dontencrypt=true&webplugin=false&iframewidth=400px&position=BOTTOM_RIGHT` ;

    	const oReq = new XMLHttpRequest();

    	oReq.addEventListener("load", function () {
    		hideElement('loadingMessage');
        //something went wrong
    		if (this.status === '400' || this.status === '500') {
    			showAndAfterHide('errorMessage', 3000);
    			showElement('requestSurvey');
    		}
        //load the survey into an iframe
    		var ifrm = document.getElementById('pollfishSurveyFrame');
    		ifrm.src = url;
        showElement('survey');
    	});

    	oReq.open("GET", url);
    	oReq.send();
    }

    /**
    * This function is fired when the user has selected to open survey (e.g in order to unlock some feature)
    */
    function openSurvey () {
    	showElement('survey');
    	removeElement('rewardText');
    	hideElement('buttonRewardedSurvey');
    }

    var coins;
    ////////////// Register and handle 'Pollfish' survey events //////////////
    window.onmessage = function handlePollfishsEvents (e) {

      // webviewLoaded
    	if(e.data === 'webViewLoaded'){
    		console.log('webViewLoaded');
    	}

      // close
    	else if(e.data === 'close'){
    		coins = 0;
    		console.log('CLOSE')
    		showAndAfterHide('warningMessageSurveyClosed', 3000);
    		hideElement('survey');
    		showElement('requestSurvey');
    	}

      // userNotEligible
    	else if(e.data === 'userNotEligible'){
    		console.log('USER NOT ELIGIBLE');
    		showAndAfterHide('warningMessageNotEligible', 3000);
    	}

      // close and no show
    	else if(e.data === 'closeAndNoShow'){
    		coins = 0;
    		console.log('CLOSE AND SHOW');
    		showAndAfterHide('warningMessageSurveyClosed', 3000);
    		hideElement('survey');
    		showElement('requestSurvey');
    	}

      else if (e.data === 'noSurveyAvailable') {
        showAndAfterHide('warningMessageNoSurveyAvailable', 3000);
        showElement('requestSurvey');
      }

      //surveycompleted
    	else if(e.data.indexOf('setSurveyCompleted') > -1){
        var data = JSON.parse(e.data);
        if(data.type === 'setSurveyCompleted'){
            var survey = {
                survey_price: data.survey_price,
                reward_name: data.reward_name,
                reward_value: data.reward_value,
                survey_class: data.survey_class,
                survey_loi: data.survey_loi,
                survey_ir: data.survey_ir,
            };

      		createElementAndAppendTo('successMessage', 'span', 'earnedText', `You earned ${survey.reward_name} ${survey.reward_value} `)
      		console.log('SUCCESS', survey);
      		showAndAfterHide('successMessage', 3000);
      		setTimeout(function(){ removeElement('earnedText'); }, 4000);
        }
    	}
    };
    ////////////////////////////////////////////////////

    ////////////////// Helper Methods //////////////////
    function showAndAfterHide(idOfElementToShow, timeToShow) {
    	var elem = document.getElementById(`${idOfElementToShow}`);
    	elem.style.display = 'block';
    	setTimeout(function(){ elem.style.display='none' }, timeToShow);
    }

    function showElement(idOfElementToShow) {
    	document.getElementById(`${idOfElementToShow}`).style.display = 'block';
    }

    function hideElement(idOfElementToHide) {
    	document.getElementById(`${idOfElementToHide}`).style.display = 'none';
    }

    function removeElement(idOfElemToRemove) {
    	var elem = document.querySelector(`#${idOfElemToRemove}`);
    	elem.parentNode.removeChild(elem);
    }

    function createElementAndAppendTo(idOfElementToAppend, typeOfElement, idOfNewElement, text) {
    	var newElem = document.createElement(`${typeOfElement}`)
    	newElem.setAttribute("id", `${idOfNewElement}`);
    	newElem.innerHTML = `${text}`;
    	document.getElementById(`${idOfElementToAppend}`).appendChild(newElem);
    }
  	////////////////// End of Helper Methods //////////////////
  </script>
  </body>
</html>