‘Spin the Wheel’ – Embed Into a WordPress Website

Here is an example of an embedded double wheel from the Spin the Wheel website, spinthewheel.io:

Create your own custom wheels at Spin the Wheel.

How to embed Wheel pages into WordPress sites

As can be seen above, the page has been embedded into this website. This has been done on WordPress using the "Custom HTML" block component.

Don't use the WordPress iframe function, as it doesn't do what it's supposed to! Try it on your WordPress site today and add an interactive component to it. Here's how I did it in this case:

Here's the code used for the above:

<div style="width:100%;max-width:750px;margin:0 auto;">
  <iframe src="https://spinthewheel.io/dice-roller-2d6" title="Spin the Wheel" loading="lazy" style="width:100%;min-height:520px;border:none;display:block;" scrolling="no" allowfullscreen></iframe>
</div>
<script>
(function(){
  function onMsg(e){
    if(e.origin!=='https://spinthewheel.io')return;
    var d=e.data;
    if(!d||d.type!=='stw-embed-height'||!d.height)return;
    var f=document.querySelectorAll('iframe[src^="https://spinthewheel.io"]');
    for(var i=0;i<f.length;i++){
      if(f[i].contentWindow===e.source){f[i].style.height=d.height+'px';}
    }
  }
  window.addEventListener('message',onMsg,false);
})();
</script>
<p style="text-align:center;font-size:0.85em;">Create your own custom wheels at <a href="https://spinthewheel.io" target="_blank" rel="noopener">Spin the Wheel</a>.</p>

You can even embed without adverts. Just use the Design menu on the spinthewheel.io site and use the 'Disable Ads' switch.

Single Wheel

Below you can see another example for a singe wheel. You will also need to use the "Custom HTML" block component in WordPress. Here is the code used:

<div style="width:100%;max-width:750px;margin:0 auto;">
  <iframe src="https://spinthewheel.io/wheels/kzTB01QuzzsbjRkVMJ9pcz0xJmU9MA==" title="Spin the Wheel" loading="lazy" style="width:100%;min-height:520px;border:none;display:block;" scrolling="no" allowfullscreen></iframe>
</div>
<script>
(function(){
  function onMsg(e){
    if(e.origin!=='https://spinthewheel.io')return;
    var d=e.data;
    if(!d||d.type!=='stw-embed-height'||!d.height)return;
    var f=document.querySelectorAll('iframe[src^="https://spinthewheel.io"]');
    for(var i=0;i<f.length;i++){
      if(f[i].contentWindow===e.source){f[i].style.height=d.height+'px';}
    }
  }
  window.addEventListener('message',onMsg,false);
})();
</script>
<p style="text-align:center;font-size:0.85em;">Create your own custom wheels at <a href="https://spinthewheel.io" target="_blank" rel="noopener">Spin the Wheel</a>.</p>

Create your own custom wheels at Spin the Wheel.