You can embed your event's entire checkout process using a widget, allowing buyers to register for your Humanitix without leaving your website. Cut down on navigation, clicks, and streamline that checkout process while maximising your brand exposure.
Your event must be published for a widget to work
How to embed a pop-up button widget
Customise existing "get tickets" or "buy now" buttons on your website to create a 'pop-up' effect. The event checkout will be overlaid on your website.
To add a pop-up checkout to your website:
Step 1 - Copy the custom script onto your website's global "head" section
Manage your event
Navigate to advanced > embedded widgets on the left-hand menu
Select create embedded button
Select add to site...
Copy the script from Step 1
Many typically refer to this setting as "code injection", "custom scripts", "global code", "<head> scripts", etc. This will mean the widget code is looking for any "widget links" found on the webpage.
Embedding the pop-up widget on WordPress
To add the pop-up widget code to your WordPress website header:
Log in to WordPress
Install and activate the free insert headers and footers plugin by WPCode
On the left-hand side of your dashboard, navigate to code snippets > header & footer
Paste the code into the header box and click save changes:
e.g. <script src="https://events.humanitix.com/scripts/widgets/popup.js" type="module"></script>
Paste the secondary code into the button of choice on your website
>> Learn more with this video and the WordPress guide
Please note that the pop-up widget may not be compatible with all third-party website builders or certain CMS. If you are running into issues, we recommend using the embedded checkout option.
Step 2 - Copy the button URL onto your website trigger button
Copy the button URL from Step 2 and paste it into the "button" or "link" on your website that you want to trigger the pop-up widget.
For example, on your website, you can add a "Buy Tickets" button. By linking this widget URL, clicking the Buy Tickets button will load the pop-up widget.
How to add an embedded checkout widget
The embedded checkout widget can be used to insert your event checkout into the content of the page.
To add an embedded widget checkout to your website:
Navigate to the design & styling > embedded widgets page
Select create embedded checkout
Select add to site...
Copy the code and paste the HTML into your website or website builder
Multiple embedded checkout widgets are not designed to be on the same page. If you have multiple events, either build separate landing pages for each event or use any of our other styles of widgets.
How to embed a collection widget to showcase multiple events in one place
You must publish your collection page for a widget to work.
You can also showcase multiple event pages in a single widget on your website using a collection. Collections can also be shared as a single landing page with a unique URL.
To embed your collection, navigate to the widgets tab of your collection and click add to site...
Copy and paste the code provided into your website or website builder using an appropriate HTML or iframe tool. Refer to your website builder for instructions.
Disable analytics integrations on a collection widget
When disabled, the collections widget will not track any analytics data from traffic coming through the widget on your website.
Disabling is recommended if you already have analytics tracking tools such as Google Analytics set up on your website, and therefore will prevent "duplicate" data.
Collections will currently only track views. You will not be able to track custom events such as purchases through the collection. These events are only tracked on the event page.
To create a collection, navigate to promote > collections on the top menu bar
>> Learn more about creating a collection
How to apply discount codes, access codes, and/or affiliate tracking links to your checkout widget
You can auto-apply existing codes and tracking links to your widget so that buyers do not need to manually enter a code. For example, you can create custom widgets that appear behind membership or login portals and automatically reveal hidden, member-only tickets with an access code, or, track sales through different websites/landing pages with affiliate tracking links.
You must create the discount code, access code or affiliate tracking link first
To automatically apply a code or tracking link to your widget:
Create your discount, access code, or affiliate tracking link
Navigate to design & comms > embedded widgets and select your desired widget
Enter the code/link exactly as it was written
Click add to site...
This change will not affect any existing widgets inserted onto a website already. You must replace an existing widget with the new code generated.
You can apply both an access code and a discount code in the same widget.
You cannot apply multiple discount/access codes
Commonly asked questions
How to embed widgets on Squarespace, Wix or Shopify?
Some popular website builders (such as Squarespace, Wix and Shopify) have made it simple and easy for you to embed HTML, check out their support articles if you use one of the following:
Squarespace
Wix
Wix Editor: Embedding Custom Code on Your Site (suitable for Step 1 of embedding a pop-up widget)
Wix Editor: Embedding a Site or a Widget (suitable for all other embedded widgets apart from the pop-up widget)
Wix Editor: Adding Embeds and Custom Elements to Your Mobile Site (follow this if your embedded widget is not functioning properly on mobile view)
Shopify
Always copy the code snippet onto your site by directly editing the site's HTML, and avoid using iframe components offered by these website builders because they may inhibit the widget functionality.
Can I embed my widget before my tickets go on sale?
You will need to publish your event before you can install your widget, but if you plan to set up the widget before ticket sales open, you can still embed it without allowing users to purchase tickets until your sales start.
Publish your event
Embed the widget following the instructions above
To delay activation, refrain from linking the widget to a clickable element (e.g., a button). Once you're ready to start sales, add the clickable element to activate the widget.
My website is stuttering, not loading, or the formatting is incorrect on my widget
If your website is experiencing stuttering or other loading and formatting issues after adding your widget, this is often due to how the widget has been inserted, not an issue with the widget itself. Refer back to your web developers or review your website build. Ensure you have followed the steps to insert an iframe onto your website. The steps may differ based on your website builder (e.g. WordPress, Wix, Squarespace).
My website is auto-scrolling after adding the embedded checkout widget
Auto-scrolling is implemented with the buy tickets widget. This ensures that the buyer is brought to the top of the iframe within each stage of the checkout process. You can remove the auto-scrolling from the buy tickets widget by locating the HTML below within your widget code and removing it. Please note this will impact how the widget loads - especially on mobile.
if (iframeEl && messageData && messageData.pageChange) {
window.scroll(0, humanitix.findPos(iframeEl));
}Clicking events in the Custom Search Widget (deprecated) doesn't do anything
Certain website builders like Wix limit the ability of the Custom Search Widget to navigate the user to the event they clicked. You can force the website to open event links in a new tab by locating the src="..." parameter of your iFrame code and before the final apostrophe, adding &t=blank to it.
For example, if your Custom Search Widget code was:
<iframe id="iframe-container" src="https://humanitix.com/au/search?w=true&userid=123456789" width="100%" height="600px" frameborder="0"></iframe>
<!-- Rest of your widget code would follow here -->
You can update this to:
<iframe id="iframe-container" src="https://humanitix.com/au/search?w=true&userid=123456789&t=blank" width="100%" height="600px" frameborder="0"></iframe>
<!-- Rest of your widget code would follow here -->