Comment on page
Feedback form (polls)

A simple poll functionality implemented using UXWizz to store the results
Add this before the end of the </body> tag.
<div id="ust-poll">
<div id="ust-poll__question">
Is this page useful?
</div>
<div id="ust-poll__answers">
<button class="ust-poll__answer" value="no">No</button>
<button class="ust-poll__answer" value="yes">Yes</button>
</div>
<div id="ust-poll__close">X</div>
</div>
Add this in a <script> tag or include it as an external JavaScript file somewhere after the tracker is included.
(function() {
if (localStorage) {
if (localStorage['ust-poll-closed']) return;
}
var prevOnLoaded = UST.onLoaded;
UST.onLoaded = function () {
prevOnLoaded && prevOnLoaded();
var poll = document.querySelector('#ust-poll');
poll.style.display = 'inline-block';
poll.style.transform = 'translateX(-50%) scaleY(1)';
function close() {
poll.style.display = 'none';
localStorage && (localStorage['ust-poll-closed'] = true);
}
document.querySelector('#ust-poll__close').addEventListener('click', close);
function clickedAnswer(e) {
close();
// Add a tag to the user like `poll_no` or `poll_yes`
// You could also use addEvent instead to store more data
UST.addTag('poll_' + e.currentTarget.value);
}
var answers = document.querySelectorAll('.ust-poll__answer');
for (var i = 0; i < answers.length; ++i) {
answers[i].addEventListener('click', clickedAnswer);
}
}
})();
Include this in a <style> tag or as an external CSS file.
#ust-poll {
display: inline-block;
background: #1289A9;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: bold;
color: white;
text-align: center;
border-radius: 10px;
max-width: 400px;
position: fixed;
bottom: 1rem;
left: 50%;
transform-origin: bottom;
transform: translateX(-50%) scaleY(0);
transition: transform 0.2s ease-in-out;
pointer-events: visible;
}
#ust-poll__question {
padding-bottom: 1rem;
}
#ust-poll__answers {
display: flex;
justify-content: space-between;
}
.ust-poll__answer {
background: none;
border: 2px solid white;
padding: 0.5rem 1rem;
color: white;
width: 45%;
cursor: pointer;
}
.ust-poll__answer:hover {
background-color: rgba(255,255,255,0.1);
}
#ust-poll__close {
position: absolute;
right: 0.5rem;
top: 0.5rem;
font-family: Helvetica, sans-serif;
font-weight: normal;
cursor: pointer;
font-size: 0.8rem;
opacity: 0.5;
}
Alternatively, you can combine the HTML, CSS and JS in a single JS snippet and include it:
(function(){
var question='Is this page useful?';
if(localStorage){if(localStorage['ust-poll-closed']){return}}var sheet=document.createElement('style');sheet.innerHTML='#ust-poll{display:inline-block;background:#1289A9;padding:1rem 2rem;font-size:1rem;font-weight:700;color:#fff;text-align:center;border-radius:10px;max-width:400px;position:fixed;bottom:1rem;left:50%;transform-origin:bottom;transform:translateX(-50%) scaleY(0);transition:transform .2s ease-in-out;pointer-events:visible}#ust-poll__question{padding-bottom:1rem}#ust-poll__answers{display:flex;justify-content:space-between}.ust-poll__answer{background:none;border:2px solid #fff;padding:.5rem 1rem;color:#fff;width:45%;cursor:pointer}.ust-poll__answer:hover{background-color:rgba(255,255,255,0.1)}#ust-poll__close{position:absolute;right:.5rem;top:.5rem;font-family:Helvetica,sans-serif;font-weight:400;cursor:pointer;font-size:.8rem;opacity:.5}';document.body.appendChild(sheet);var div=document.createElement('div');div.innerHTML='<div id=ust-poll><div id=ust-poll__question>'+question+'</div><div id=ust-poll__answers><button class=ust-poll__answer value=no>No</button> <button class=ust-poll__answer value=yes>Yes</button></div><div id=ust-poll__close>X</div></div>';document.body.appendChild(div.firstChild);var prevOnLoaded=UST.onLoaded;UST.onLoaded=function(){prevOnLoaded&&prevOnLoaded();var poll=document.querySelector('#ust-poll');poll.style.display='inline-block';poll.style.transform='translateX(-50%) scaleY(1)';function close(){poll.style.display='none';localStorage&&(localStorage['ust-poll-closed']=true)}document.querySelector('#ust-poll__close').addEventListener('click',close);function clickedAnswer(e){close();UST.addTag('poll_'+e.currentTarget.value)}var answers=document.querySelectorAll('.ust-poll__answer');for(var i=0;i<answers.length;i+=1){answers[i].addEventListener('click',clickedAnswer)}}
})();
Last modified 1yr ago