Skip to main content

Adding The Widget to A Hubspot Site

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

Begin by learning how to configure your widget and manage Allowed Domains here.

1. Add Your Allowed Domains

Before embedding your widget, you'll need to add the appropriate domains to your Allowed Domains list in OTS:

  • Add your website URL, for example: https://my-amazing-theatre.com/

  • Add your HubSpot Page Editor domain. This is unique to each HubSpot customer and will look similar to:

https://########.hubspotpreview-na1.com/

Replace the ######## with the numbers shown in your HubSpot editing interface.

2. Create a Module in HubSpot

Once your domains have been added, you're ready to embed your OTS Widget.

In your HubSpot account:

  1. Navigate to Content > Design Manager.

  2. At the top of the finder, click the File dropdown menu.

  3. Select New file.

  4. Under What would you like to build today?, select Module.

  5. Click Next.

  6. Select Pages for where you'd like to use the module.

  7. Select the Global Module option.

  8. Give your module a descriptive name, such as OTS Ticket Widget.

  9. Click Create.

3. Add Your OTS Widget Code

In your OTS Admin Portal, navigate to Marketing > Widgets and copy the embed code for your widget. Paste the embed code directly into the module.html section of your new HubSpot module.

šŸŽ­ Noteworthy: You only need the widget embed code provided in your OTS Dashboard. You no longer need to copy and paste separate Code Snippet and Code Reference sections.

4. Add the Module to Your Page

Now you're ready to place the widget on your website.

  1. Open the appropriate page in the HubSpot Page Editor.

  2. Select Add to Page to view your available modules.

  3. Search for the module you created, such as OTS Ticket Widget.

  4. Drag the module to the section of the page where you'd like your ticket widget to appear.

5. Publish Your Page

Preview your page to confirm that the OTS Widget is displaying correctly.

When you're ready, update and publish your page. Your On The Stage widget is now embedded on your HubSpot website and ready for patrons to use. šŸŽ‰

Related Articles
Did this answer your question?