Package Widget Code Generator

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

Online form to edit a pricing option for a punch pass, showing fields for price, online store link, tax, expiry duration, number of sessions, introductory offer options, and revenue category.

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>
Screenshot of a website or app interface showing a menu with various content block options such as Text, Button, Video, Audio, Accordion, Scrolling, Quote, Embed, Code, Menu, Social Links, Image, Gallery, Form, Newsletter, Shape, Line, Map, Markdown, Summary, Calendar, and Chart, over a purple background with partially visible text 'Drop-in Class' and '$20.95'.

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.

A purple presentation slide with a text box labeled "World!" and editing tools visible at the top.
Screenshot of a code editor displaying HTML and CSS code, with a partially visible purple background.