👟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 +Create URL/Domain button to add a whitelist page.
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.
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 may be 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.
9. Next, 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.
10. To continue to display the widget as a calendar, choose Ticketing -Calendar. To display the widget as a list of all performances times in chronological order, click Ticketing - List.
You can also create add-on widgets, donation widgets, and subscription widgets.
11. 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.
Ticket Redirect URLs
These redirect URLs tell On The Stage where each embedded widget lives on your website so OTS knows where to send patrons during checkout, email links, reloads, or error recovery. They’re important because OTS powers the widget but does not host your site pages, so without this mapping, patrons can land on broken or empty pages. Setting them correctly ensures a smooth checkout experience and prevents lost context, errors, and failed purchases.
Widget CSS Templates
A widget CSS template is a pre-written set of CSS rules designed to control the look and layout of a specific widget (a small, self-contained UI component) without touching the widget’s core code. Think of it as a styling blueprint you can customize.
🎓 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 your widget info. 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.