UXWizz
WebsitePricingDemoTwitter (X)
  • Introduction
  • 🛠️ Installation
    • Requirements
      • Limitations
      • Server specs (CPU, RAM)
    • Installation guide
      • Uploading the script
      • Creating a MySQL database
      • Running the installer
    • Install on a new server
      • Ubuntu 20.04 (or higher)
      • DigitalOcean
    • Docker
      • Via Docker Compose
      • Standalone Docker image
    • Adding the tracking code
      • Automatic SPA pageview tracking
      • Add tracker to Next.js App
      • Add tracker to React Router App
    • Optimization tips
      • MySQL/MariaDB
      • Auto-delete old data (cron jobs)
      • Apache
    • Frequently Asked Questions
  • 🔧JavaScript API
    • Tags
    • Events
    • Hooks/callbacks
    • Other API functions
    • Session Recording
      • Ignore specific elements
  • 📖Guides and features
    • Goals (NEW!)
    • Ask AI (NEW!)
    • Basic usage
    • A/B testing
    • Usage tips
    • Dashboard user access level
    • Resetting the admin password
    • Database querying
    • Technical details
      • IP Geolocation
    • Troubleshooting
      • Agency
        • MultiDB
      • Dashboard
        • Refreshing dashboard sub-page leads to 404 error
        • Website iframe not loading (x-frame-options)
        • License says "invalid"
        • Updating Fails
      • Tracking
        • No data is being recorded
        • Can't include tracker via Google Tag Manager
        • The A/B test JS file is missing
      • WordPress
        • Cloudways 403 Forbidden screen on WordPress
        • NGINX 403 Forbidden screen on WordPress
    • Extending the dashboard
    • Support
    • Migrating to a new server
  • 🎓Useful Examples
    • Feedback form (polls)
    • Tracking 404 Pages
    • Tracking UTM parameters
    • Tracking Google Ads GCLID
    • Storing user device types
    • Track video playback
  • 📜About
    • Changelog
    • Personal Data Information
    • Privacy Policy (uxwizz.com)
    • Licenses and pricing
    • [Deprecated] License Subscriptions
Powered by GitBook
On this page
  • Example
  • HTML:
  • JavaScript:
  • CSS:
  • JavaScript one-liner

Was this helpful?

  1. Useful Examples

Feedback form (polls)

PreviousMigrating to a new serverNextTracking 404 Pages

Last updated 1 year ago

Was this helpful?

A basic example of a poll form with a question and a simple Yes/No answer. The response is stored as a attached to the current user. You can also modify the code to use instead and store more data (like the current page the user is on, the question text, username, etc.).

Example

HTML:

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>

JavaScript:

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);
    }
  }
})();

CSS:

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;
}

JavaScript one-liner

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)}}
})();

You can test in this (note that this fiddle does not actually send data to UXWizz).

🎓
JSFiddle
tag
events
A simple poll functionality implemented using UXWizz to store the results