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 page can be completely embedded onto your custom website using one of our widget options.
Your event must be published for a 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.
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...
Step 1: Copy the widget HTML code and paste it into yourwebsite's "global" code.
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.
Step 2: Copy the button URL and copy it into "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.
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.
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 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
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 using a collection. Collections can also be shared as a single landing page with a unique URL.
Customise your collection by including individual events, host profiles, and event groups and add your own brand styling. You can choose to showcase all events under your account or multiple, selected events. Create multiple collections for different event series, venues, brands, or tours.
To create a collection navigate to promote > collections on the top menu bar
>> Learn more about creating a collection to showcase multiple events on your website
Collections are currently in a 'BETA', meaning we are continuing to refine this tool. You may notice some temporary performance issues or changes in interface.
Please get in touch with the Humanitix support team with any issues or feedback!
Collections will soon come to replace tour pages and widgets entirely. You can continue to edit your tour pages but will soon no longer be able to create new ones.
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 widget 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
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 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 (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 -->