👟Walk Through
Ticket Widget Configuration
1. Go to the On The Stage Dashboard.
2. Click on Website, and then 'Widget Configuration'.
3. You'll need to whitelist the domain on which you intend to embed the widget. Click on the + sign to add a whitelist page.
🎭Noteworthy: If your website provider has a staging site link as you’re working on implementation, make sure to include that in this list.
4. Within the 'Create Whitelist' dialog box, enter the Domain URL you want to whitelist.
🎭Noteworthy: Make sure to add https:// to the beginning of your url!
5. Under 'Description' - describe what the website is. This note is for internal purposes for box office users.
6. Click on 'Create' to save your entry.
7. Under 'Code Snippet' there is an initialization script in order for you to embed your widget. You should copy and paste this widget into the head tag of your website page. This code snippet will be needed no matter what kind of widget you choose to configure during the next step.
8. Under 'Select a Widget Mode' you have two options for widgets to embed. Let's look at an Inline widget first.
9. Inline widgets embed directly onto the body of your website and display all widget content as users scroll.
10. The second kind of widget is a 'Modal' widget. The Modal widget enables a pop-up modal to be embedded on your website.
12. Once you select the type of widget you'd like to create code for, you need to choose what content to display and the widget style. If you leave the production selection and performance selection blank - a widget will be created showing all of the available productions from your organization.
13. To continue to display the widget as a calendar, choose Calendar. To display the widget as a list of all performances times in chronological order, click List. To display a single performance, choose Single Performance.
You can also create add-on widgets, donation widgets, and subscription widgets.
14. If you wish to display only a single performance date, choose your production from the dropdown list, then select the event you would list to use as the single event.
At the bottom of the page, you will see Production Description and Images. This is where you can upload image assets for your production, as well as a brief description or other things to note. Both the images and description will be displayed on the widget for all ticket buyers. Click on the Production dropdown to choose which production to edit.
Using the rich text editor underneath the images, enter a description for your production. This can include production information, a brief synopsis, or any information to inform your ticket buyers as they make a purchase.
Click on Save at the bottom right corner to save all images and descriptions for your production.
🎓 Recap for Widget Configuration
This article walks you through embedding and customizing the On The Stage widget on your site. Starting from the dashboard under Website → Widget Configuration, whitelist your domain, paste in the provided code snippet, and choose between Inline or Modal widget types. You can then specify whether to show all productions, a single show, or even a specific performance date. Any changes in your On The Stage account—new events or dates—will automatically reflect in the widget, though altering the selection requires regenerating and updating the code snippet.
🚀 Best Practices for Widget Configuration
🛡️ Whitelist domains accurately - Add every domain or subdomain where the widget will be embedded to avoid load failures and ensure seamless integration.
🧩 Choose the right widget type for you
Inline: Ideal for embedding full content directly on a page.
Modal: Great for minimalist sites or triggering ticket flows via a button
🎯 Manage your media assets - Upload your media assets for continuity throughout your site.
🔄 Regenerate when changing display choices - If you update the widget’s scope (for example, switching from all shows to a single date), generate a new snippet and replace the old embed on your site.