Package Widget Code Generator

Step 1: Get the store link from Mindbody, and write down the product ID from it (5 digit number)

Step 2: Click “Edit” on this page and change the background of the section to the background color you want.

Here’s a tutorial showing you how to do that if you don’t remember

Step 3: Enter the info you need in the widget in the form below.

If the package you are creating was from the gift pass section (as opposed to the normal pricing options) check the checkbox.

You can click “Show Preview” to see what the color you chose looks like.

  • When you are finished, click “Get Code”. Copy that code.

(The sizing might look a bit strange here but when you paste it in the page, you can adjust it)

Widget Code Generator







Drop-in Class
 

$20 95

Can be used towards one regular class.
 
  

              
<div style="text-align:center; color:white; padding:50px 0px; border-radius:100px; border:1px solid white">
<div style="width:60%; margin:0 auto;">
    <h4 style="color:white!important; font-size:clamp(1.1rem, 1.3vw, 1.5rem); text-align:center; margin-bottom:0px">Drop-in Class<br>&nbsp;</h4>
</div>
<p style="font-size:clamp(4rem, 6vw, 6rem); text-align:center; margin-bottom:0px; margin-top:0px; line-height:1.1">$20<sup><small style="font-size:2rem">95</small></sup></p>
<p style="line-height:1; width:70%; text-align:center; margin:10px auto 20px auto;">Can be used towards one regular class.<br>&nbsp;<br>&nbsp;</p>
<button style="color:white!important; border-color:white!important; transition:0.5s" class="sqs-block-button-element--large sqs-button-element--secondary sqs-block-button-element">
    <healcode-widget data-version="0.2" data-link-class="healcode-pricing-option-text-link"data-site-id="20399" data-mb-site-id="313356" data-service-id="10101"data-bw-identity-site="false" data-type="pricing-link" data-inner-html="Buy Now" />
</button>
</div>

Step 4: Go to the page you are adding the package to and click “Edit”

  • Add a “Code” block to the section.

  • Click to edit the code block, and paste the code into it.

All done! You can drag the side container to change the size of the block, and place wherever you want, as you normally would.