Embedding the OTS widget in your HubSpot page lets you:
Streamline ticket bookings or event discoveryāusers can view and reserve performances directly on your site.
Enhance user experienceāvisitors stay on your brandās site while engaging with your event calendar.
Boost conversionsāin-line access typically results in higher engagement and ticket sales.
šWalkthrough
First you will want to whitelist your domains:
Whitelist your website URL (e.g. https://my-amazing-theatre.com/)
Whitelist the Hubspot Page Editor domain. This domain is unique for every Hubspot customer and will take the form of https://########.hubspotpreview-na1.com/ where the ######## will be the numbers found in your editing interface.
Now that youāve added your sites to the whitelist, itās time to embed the widget.
To add the OTS ticketing widget to Hubspot website page you will first need a create a new module in the Hubspot Design Manager.
In your HubSpot account, navigate to Content > Design Manager.
At the top of the finder, click the File dropdown menu and select New file.
In the dialog box, click the What would you like to build today? dropdown menu, select Module, and click Next.
Select Pages for where you would like to use this module and select the Global Module option. Name your module something description and memorable like āOTS Ticket Widgetā and then select Create.
Copy and paste both the Code Snippet and Code Reference from the On The Stage Widget Configuration screen into the module.html section of your new module.
Close the module editor and now itās time to embed the widget in your website page.
In the Page editor, select Add to Page to display a list of available modules. Tip: you can search for the name of the module you just created to more quickly find it.
Grab the OTS Widget module and drag it to the section of the page where you would like to see it.
Update and publish your page. Thatās it! Youāre done! š
š Best Practices
Preview before publishingācheck mobile and desktop layouts for proper widget display.
Use
min-heightCSS controls (like.ots-widget-min-height { min-height: 40vh; }) to prevent unsightly white space when few performances are listed.Match your brand stylingāwrap the embed in containers styled for spacing and fonts consistent with your site theme.