chrisgannon supports this item


This author's response time can be up to 5 business days.

Popular questions for this item

How can I set a segment to be a winning segment and then capture the result?

You can set the win/lose status in the JSON.

This is an example ‘segment’ entry in the ‘segmentValuesArray’ in the JSON:
"type": "image", 
"value": "images/mypic.jpg", 
"win": false, 
"resultText": "Sorry you lost this time!" 
If you want the segment to be a winning segment you set:
"win": true

When the wheel lands on that segment you can evaluate the result like this:

This is your own function to capture the spin results

function myResult(event) {
  //event is the result event object
    console.log('Your win result is: ' +;
This is your Spin2Win Wheel instance with the onResult listener assigned to your own function myResult
var myWheel = new Spin2WinWheel();

The Usage part of the documentation is here

How can I set the wheel to land on specific segments?

You can set the destinations in the JSON.

Open the JSON file and locate the ‘spinDestinationArray’. This is an array that you can populate with winning segments.

So if you want segments 3, 7, 8, 1 to win (in that order) then you would write:

"spinDestinationArray":[3, 7, 8, 1]

Note that because you have set four destinations the game will finish after those four spins.

See the JSON properties in the documentation here

How can I call a URL after a win or send the current result to a URL?

Ensure you have assigned the onResult event to your own function. The onResult event fires at the end of every spin.

You code might look like this:

//your own function to capture the spin results on every spin - call your URL call here or capture whatever you like
function myResult(e) {
  //e is the result object
    console.log('Spin Count: ' + e.spinCount + ' - ' + 'Win: ' + + ' - ' + 'Message: ' +  e.msg);

var myWheel = new Spin2WinWheel();

myWheel.init({data:jsonData, onResult:myResult}); 

Now you can evaluate if it’s a win ( == true) and call a URL or pass data from the event object to a script.

How can I add a link to the result text popup?

In the JSON you can add an HREF link in the usual way. Below is an example entry in the segmentValuesArray:

{"type": "string", "value": "HOORAY!", "win": true, "resultText": "YOU WON A <a href="">PRIZE!</a>"}

Note: this FAQ field is replacing a single quote with a double quote around the URL. Use single quotes around your URL string or escape a double quote with a backslash \

Find the CSS where .toast has its pointer events set with pointer-events:none;. Now remove .toast from that declaration otherwise the result link won’t be clickable.

Your CSS block now looks like this:

.wheelOutline, .valueContainer,  .centerCircle{

How can I hide the peg/pin at the top?

The easiest way to do this is the open the HTML and inside the SVG you will find the line:
<g class="pegContainer" >
Set its opacity to zero like this:
<g class="pegContainer" opacity="0" >
If you don’t want the sound either you can open the JSON and set:

How can I assign a button to make it spin?

First of all you need to create something to click on. Give it an id (or class name) so you can refer to it. Here we’ll call it myNewButton

Next find the init(); function in the index.js and pass the button reference into the wheel’s init function.

function init() {
  loadJSON(function(response) {

    // Parse JSON string to an object
    var jsonData = JSON.parse(response);

    //if you want to spin it using your own button, then create a reference and pass it in as spinTrigger
    var mySpinBtn = document.querySelector('#myNewButton');

    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //WITH your own button
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});



Don’t forget to set "clickToSpin":true in the JSON file.

How can I add an image or logo in the center of the wheel?

The simplest solution is to add it using SVG’s <image> tag.

First of all create a square image for your logo in Illustrator or PhotoShop. Square is the best aspect but if your logo is not square, create a square image and drop your non-square logo into it with transparency. If your logo is tall you will have more space on either side. If your logo is wide then you will have more transparent space top and bottom.

Save it in the ‘media’ folder.

Open the HTML page and locate the line with valueContainer. It looks like this:
<g class="valueContainer" />

Now add the image tag below it – it should point to your image. Your code should look like this:

<g class="valueContainer" />
<image xlink:href="media/my_logo.svg" width="360" height="360" x="360" y="290" / >

I suggest using an SVG because you can scale it up and down using the width and height attributes and you won’t lose quality. Just make sure both width and height are the same to maintain the square-ness.

You can also place the logo correctly using the X and Y attributes.

Binding a click to the toast popup doesn’t work – why?

If you look in the CSS at around line 37 you will find this:
.wheelOutline, .valueContainer, .toast, .centerCircle{

Just remove the .toast entry and that will enable interactions.

How can I run Spin2Win Wheel offline

Here’s a gist of an offline version in its most simplest form:

Spin2Win Wheel is populated by JSON data which must be served on a web server (over HTTP).

However you can convert the JSON data into a JavaScript object and pass that variable into the init(); function instead, like this:

var wheelDataObject = {
colorArray:[ "#364C62", "#F1C40F", "#E67E22", "#E74C3C", "#ECF0F1", "#95A5A6", "#16A085", "#27AE60", "#2980B9", "#8E44AD", "#2C3E50", "#F39C12", "#D35400", "#C0392B", "#BDC3C7","#1ABC9C", "#2ECC71", "#E87AC2", "#3498DB", "#9B59B6", "#7F8C8D"],

segmentValuesArray : [
  {type: "string", value : "HOLIDAY^FOR TWO", win : false, resultText : "YOU WON A HOLIDAY!"},
  {type: "image", value : "media/tip_star.svg", win : false, resultText : "A STAR"},
  {type: "image", value : "media/tip_sqr.svg", win : false, resultText : "A SQUARE"},
  {type: "image", value : "media/tip_oct.svg", win : false, resultText : "AN OCTAGON"},
  {type: "image", value : "media/tip_triangle.svg", win : true, resultText : "A TRIANGLE"},
  {type: "image", value : "media/tip_circle.svg", win : false, resultText : "A CIRCLE"},
  {type: "image", value : "media/tip_hex.svg", win : false, resultText : "A HEXAGON"}, 
  {type: "string", value : "LOSE ALL", win : false, resultText : "LOSE ALL"}

  svgWidth: 1024,
  svgHeight: 768,
  wheelStrokeColor: "#D0BD0C",
  wheelStrokeWidth: 18,
  wheelSize: 700,
  wheelTextOffsetY: 80,
  wheelTextColor: "#EDEDED",  
  wheelTextSize: "2.3em",
  wheelImageOffsetY: 40,
  wheelImageSize: 50,
  centerCircleSize: 360,
  centerCircleStrokeColor: "#F1DC15",
  centerCircleStrokeWidth: 12,
  centerCircleFillColor: "#EDEDED",
  segmentStrokeColor: "#E2E2E2",
  segmentStrokeWidth: 4,
  centerX: 512,
  centerY: 384,  
  hasShadows: false,
  numSpins: 2 ,
  introText:"YOU HAVE TO<br />SPIN IT <span style="color:#F282A9;">2</span> WIN IT!",

Here we’ve created a variable wheelDataObject which we can now pass into the Spin2WinWheel.init() function like this:

function init() {
  loadJSON(function(response) {
    var myWheel = new Spin2WinWheel();

How can I set the probability of winning?

This is an entry for a segment in the JSON:

{"type": "string", 
"value": "HOLIDAY^FOR TWO", 
"win": false, 
"resultText": "YOU WON A HOLIDAY!" 

Now imagine you have 10 entries in the JSON (so 10 segments on the wheel).

If you set 6 to win (win:true) and 4 to lose (win:false) the probability is 60-40 or 60% (AKA 6 in 10 or 3 in 5).

Similarly if you have 1 win and 9 loses it’s a 10% chance of winning (1 in 10).

In my opinion this method is the correct way to set probability and is more accurate than performing complex calculations on every spin.

How can I set a maximum spin duration?

Spin2Win Wheel comes with a minimum spin duration property which can be set in the JSON.

If you want to set a maximum spin duration you will need to add in a property to Spin2WinWheel.js as follows:

    createDraggable = function() {
      wheelDragger = Draggable.create(wheel, {
        type: 'rotation',
        bounds: {
          minRotation: -9999999999999999,
          maxRotation: 0
        throwProps: true,
        ease: Back.easeOut.config(0.2),
        snap: (randomSpins) ?  getRandomSpinFunction(0) : [spinDestinationArray[spinCount]],
        throwResistance: 0,
        //minDuration: minSpinDuration,
        onThrowComplete: throwComplete,
        onPress: onWheelPress,
        onDrag: throwUpdate,
        onThrowUpdate: throwUpdate,
        overshootTolerance: 1,
        onDragEnd: onWheelDragEnd


Here we have added in maxDuration:1 meaning it will spin for no more than 2 seconds.

If you leave minDuration in AND it has a value greater than maxDuration then maxDuration will have no effect.

Therefore it is better to either hard code them both (with max higher than min) OR remove minDuration altogether.

How can I make the wheel spin automatically, just with code?

In index.js you create a button instance (no need to add it to the page), then pass it in as a reference for the spinTrigger and then call its onclick function like this:

function init() {
  loadJSON(function(response) {
    // Parse JSON string to an object
    var jsonData = JSON.parse(response);
    //creates an invisible button so its onclick can be called. Note it's not necessary to be added to the page.
    var mySpinBtn = document.createElement('button');
    //create a new instance of Spin2Win Wheel and pass in the vars object
    var myWheel = new Spin2WinWheel();

    //pass in the button instance as the spinTrigger
    myWheel.init({data:jsonData, onResult:myResult, onGameEnd:myGameEnd, onError:myError, spinTrigger:mySpinBtn});

    //immediately makes the wheel spin

Note: In the JSON make sure you set "clickToSpin":true. This disables the ability to spin the wheel manually by throwing.

How can I change the URL of the peg sound?

There are two ways.

You can either look in Spin2WinWheel.js and find the line
pegSnd = new Audio('media/wheel_tick.mp3'),

Change the URL to whatever you want. Next you can either minify that file and rename it to Spin2WinWheel.min.js or use Spin2WinWheel.js in your HTML (currently it’s probably loading the minified version without the change applied).


Open Spin2WinWheel.min.js and do a Find and Replace on ‘media/wheel_tick.mp3’ and replace it with your absolute URL for the new sound.

How can I populate Spin2Win Wheel using PHP?

I have created PHP code that does just that.

You can find it here.

How can I set the number of segments?

A segment is an entry in segmentValuesArray .

An entry looks like this: {"type": "string", "value": "HOLIDAY^FOR TWO", "win": false, "resultText": "YOU WON A HOLIDAY!"},

The number of segments depends on the number of entries in segmentValuesArray in the JSON.

If you want more then copy an entry and change its properties.

type can be ‘string’ or ‘image’. If you use ‘image’ then ‘value’ must be an image URL.

I double clicked the index.html and the project is blank – HALP!

When you double click index.html it runs the project in the file system.

Spin2Win Wheel is populated using JSON data which will only load over HTTP. This means you must run the project on a web server.

Can I use an image as the background to Spin2Win Wheel?


In the SVG in the HTML locate the group tag with class wheel.

Now remove the self closing angle bracket and add in an image tag as your background image like this:
  <g class="mainContainer">   
    <g class="wheel">
      <image xmlns:xlink="" xlink:href="" x="0%" y="0%" height="100%" width="100%"></image>

Now in your JSON find the colorArray and remove all entries except one transparent one like this:
"colorArray":[ "rgba(0,0,0,0)"],

How can I place the wheel at the top of the page?

In the attributes for the SVG tag in the HTML change the preserveAspectRatio to preserveAspectRatio="xMidYMin meet"

Notice the YMid is now YMin

Be aware that you will have to change the CSS for the popup to match the new position of the wheel with media queries as it’s currently designed to be in the centre of the page.

How can I change the amount/speed Spin2Win Wheel spins?

You need to open the Spin2WinWheel.js (and make sure your HTML page is loading it, otherwise you won’t see any changes).

Find the variable numRevsPerDestination. Currently it looks like this:
numRevsPerDestination = 3 * 360

This means it rotates at least 3 times before stopping.

If you want it to rotate 10 times before stopping change it to 10 like this:

numRevsPerDestination = 10 * 360

Warning: Don’t change the 360 value – this is a full revolution and MUST stay as this value.

Can I add Spin2Win Wheel to a Blogger post?

Yes but with caveats. You will need to host your spin2win folder online somewhere – there are lots of free hosting sites like for example.

Upload your folder to your hosting and make a note of the URL for it. It might be something like

Now create a new post in Blogger and click the HTML pane (next to the Compose button).

Now assuming the URL above is the right one, paste this into your HTML pane:

<iframe frameborder="0" height="800" src="" width="100%"></iframe>

When you preview it, it won’t appear to be clickable – it will only work once you publish it.

Can I add Spin2Win Wheel to WordPress?

Yes although please note that Spin2Win Wheel is not a WordPress plugin.

The simplest way to do it (and arguably the best because it allows you to update your wheel easily) is to host it on a server like a normal web page and use an iframe inside your WP post like this:

<iframe frameborder="0" height="800" src="" width="100%"></iframe>

Can I put the peg on the right instead of at the top?

Yes, try adding the following to the main index.js:

TweenMax.set('.pegContainer', {
  transformOrigin:'50% 100%',

Depending on the size of your wheel you will need to tweak the X and Y values.

Can I make the segment text vertical?

Yes try adding this to the index.js:

TweenMax.set('.wheelText', {
  transformOrigin:'50% 50%'

If the positioning isn’t right try doing:

TweenMax.set('.wheelText', {
  transformOrigin:'50% 50%',

Bear in mind the SVG text is in a tspan and its currently set to text-anchor:middle; (the CSS equivalent is text-align:center;) so you might need to add this to your CSS file:

.wheelText tspan{
  text-anchor: start;

Show more

Contact the author

This author provides limited support for this item through this item's comments.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

View the item support policy