How to Add a Humanitix Widget to Your Page
1. Obtain Your Widget Code
Get the Humanitix code snippet for your event (iframe or popup link).
2. OPTION A – Inline Widget (embedded on the page)
a. Add the iframe to the main content where you want the widget to appear:
<p> <iframe data-collection="welcoming-week" sandbox=""></iframe> </p>
b. Add the required script to your page head:
-
-
Go to Extra Features > Style & Functionality > Page Head Tags
-
Insert:
<script src="https://events.humanitix.com/scripts/widgets/inline.js" type="module"></script>
-
3. OPTION B – Popup Widget (opens in a modal)
a. Add the link to your main content and style it like a button:
<h4> <a href="https://events.humanitix.com/kapiti-food-fair/tickets?widget=popup"> <span class="button">Book Tickets</span> </a></h4>
b. Add the required script to your page head:
-
-
Go to Extra Features > Style & Functionality > Page Head Tags
-
Insert:
-
<script src="https://events.humanitix.com/scripts/widgets/popup.js" type="module"></script>
Example: Kapiti Food Fair
Tip: Only include the relevant script (inline.js OR popup.js) depending on which option you choose.
Placing the Humanitix Widget on multiple pages.
Apply the above Option A or B to a new page.
Use the Add-on Module Custom Blocks (preferred) or Custom Panels to create it and apply it to multiple pages.
Doing it this way means if the Humanitix Widget needs updating or turning off, you only have to update it once and it will automatically update on the pages you have applied it to.