Spinning Wheel: How to enable multiple spins on the same device and browser

Pro Tips Elfsight Widgets Tips
1

By default, the Spinning Wheel widget lets users spin the wheel only once per device and browser.

But if you want to allow multiple spins, @Fantasy_Gadgets has shared an awesome solution that adds a button to reset the wheel.

(function() {
  const WIDGET_ID = 'Your_Widget_ID';

  function resetWheel() {
    // Pulisci TUTTO il localStorage e sessionStorage relativo al widget
    const keysToRemove = [];

    // Cerca tutte le chiavi che contengono il WIDGET_ID
    for (let i = 0; i < localStorage.length; i++) {
      const key = localStorage.key(i);
      if (key && (key.includes(WIDGET_ID) || key.includes('elfsight') || key.includes('SpinningWheel'))) {
        keysToRemove.push(key);
      }
    }

    // Rimuovi tutte le chiavi trovate
    keysToRemove.forEach(key => localStorage.removeItem(key));

    // Pulisci anche sessionStorage
    const sessionKeys = [];
    for (let i = 0; i < sessionStorage.length; i++) {
      const key = sessionStorage.key(i);
      if (key && (key.includes(WIDGET_ID) || key.includes('elfsight') || key.includes('SpinningWheel'))) {
        sessionKeys.push(key);
      }
    }
    sessionKeys.forEach(key => sessionStorage.removeItem(key));

    // Pulisci anche i cookie relativi
    document.cookie.split(";").forEach(function(c) {
      if (c.includes('elfsight') || c.includes('spinning')) {
        document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
      }
    });

    // Ricarica forzata la pagina (bypassando la cache)
    window.location.reload(true);
  }

  setTimeout(function() {
    const btn = document.createElement('button');
    btn.innerHTML = '↻ Nuova Giocata';
    btn.style.cssText = 'position:fixed;bottom:30px;right:30px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:15px 30px;font-size:16px;font-weight:bold;border-radius:50px;cursor:pointer;box-shadow:0 4px 15px rgba(102,126,234,0.4);z-index:9999;transition:all 0.3s;';

    btn.onmouseover = function() {
      this.style.transform = 'translateY(-2px)';
      this.style.boxShadow = '0 6px 20px rgba(102,126,234,0.6)';
    };

    btn.onmouseout = function() {
      this.style.transform = 'translateY(0)';
      this.style.boxShadow = '0 4px 15px rgba(102,126,234,0.4)';
    };

    btn.onclick = resetWheel;
    document.body.appendChild(btn);
  }, 1000);
})();

In the 2nd line of the code, replace Your_Widget_ID with your widget’s ID, then add the resulted code to the Custom JS field under the Settings tab in your widget’s settings.


This part of the code lets you customize the button’s design and text, so feel free to tweak it however you like :wink:

image
image606Ă—443 13.2 KB

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link


This video shows the feature in action


Guys, was this solution helpful? Let us know in the comments :slightly_smiling_face:

1 Like