Embedding your checkout means buyers never have to leave your website! Cut down on navigation, clicks, and streamline that checkout process while maximising your brand exposure.
Your event must be published for the widget to work
Note: We have recently deprecated existing button and buy tickets widgets and replaced them with updated pop-up button and embedded checkout widgets. Old versions will still work but will no longer be updated or maintained. Read on to learn more about your options.
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 overlayed on your website.
To add a pop-up checkout to your website:
Manage your event
Navigate to design & comms > embedded widgets
Select create embedded button
Select add to site...
Copy the code and paste this onto your website. Follow the instructions to apply this to your existing "button" elements on your website.
Please note that the pop-up widget may not be compatible with all third-party website builders or certain CMS. If you are running in to issues we recommend using the embedded checkout option.
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 a pop-up 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
Don't know where to paste the code for your website? Ask your web developer. If you use a website builder like Squarespace or Wix, check out their support for "embed html or iframe" articles.
Multiple embedded checkout widets 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 showcase all your events on your website
You can also showcase multiple event pages into single widget on your website.
To embedded multiple events on your website:
Head to account > advanced on the top menu bar
Select advanced > global Widgets via the left-hand menu bar
Select the event listing or custom search widget (read on for an example of both)
Copy the iframe code below each widget
Paste the widget on your website
🗃️ Event listing widget
The event listing widget is a quick way to feature all your events or events from a specific host profile on your website. Events are displayed in a list of event cards and will direct your buyers to the Humanitix event page
🔎 Custom search widget
The custom search widget is a more comprehensive option to feature all or some events on your website. Give your buyers the freedom to search for your event on your website. This widget is great for organisers running many events across different locations and dates.
Tags
The custom search widget is compatible with tags and allows you to create a filtered list of your events. This is perfect if you have a complex website and wish to embed different subsets of your events on different pages of your website.
Tags are not available by default. To request this feature, please get in touch with the Humanitix team via the messenger.
🛠️ Troubleshoot your widgets
Something doesn’t seem right? Here are some frequently asked questions and answers!
The preview/widget is showing “no events found”
If your widget shows the message "no events found" then make sure your event is published and set to public. Private events will not show up on event listing and custom search widgets.
An event is not showing on my events listing widget
If an event does not appear in your widget make sure you are selecting the correct host profile (if applicable) for the widget and that the correct profile is linked to the event.
You can review or apply a host profile via the event information > details page of an event. Ensure the event is also public.
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 buy tickets 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 below HTML within your widget code and removing it. Please note this will impact how the widget loads - especially mobile.
if (iframeEl && messageData && messageData.pageChange) {
window.scroll(0, humanitix.findPos(iframeEl));
}Clicking events in the Custom Search Widget 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 -->