The embedding process is simple!
👟Walk Through
Go to your main dashboard and click on Widget Configuration under the Website tab.
Next, you will need to whitelist the domain on which you intend to embed the widget.
Click on the red + sign circle to add a whitelist page.
Within the 'Create Whitelist' dialog box, enter the Domain URL you want to whitelist. The description is for internal purposes for box office users.
Click on 'Create' to save your entry.
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.
Selecting Widget Type
Under 'Select a Widget Mode' you have two options for widgets to embed.
Let's look at an Inline Widget first.
Inline Widget: This widget embeds directly into the body of your website and display all widget content as users scroll.
The second option is a Modal Widget.
Modal Widget: This modal widget enables a pop-up modal to be embedded on website. This modal appears as a button.
After you select your Widget type, you need to choose what content to display on your Ticket Widget.
If you leave the production selection and performance selection blank, all available productions from your organization will be displayed.
If you wish to only display a single production, select the production from the list and leave the event space blank.
If you wish to display a single event date within a production, select the production from the list, and next select the event date.
Once you have configured your widget (choosing what kind of widget you'd like to embed, choosing which production(s) to show, and choosing which event to show (if applicable) - a code reference will be generated for your widget.
NOTE: Any data updates on your account (i.e. new productions launched, new show dates added) will reflect in your widget. If you want to change from a single production to multi-production view, or if you want to change the specific performance date displayed - you must create a new widget and update the code snippet within your website.
🎓 Recap
The “How Do I Create the Ticket Widget” article outlines the steps to embed On The Stage's ticket widget on your website. In your dashboard, navigate to Website → Widget Configuration, whitelist your site's domain, and paste the code snippet into your site’s <head> tag. Then choose your widget type—Inline (embedded directly on the page) or Modal (appears as a button)—and select what content to display: all shows, one production, or a single performance. Any updates to your events will appear in the widget automatically, but changes in displayed content require regenerating the snippet.
🚀 Best Practices for Creating Your Ticket Widget
🛡️ Whitelist all relevant domains and subdomains
Include staging and production URLs to ensure the widget loads correctly everywhere.🖼️ Select the widget type based on your site flow
Use Inline for seamless on-page integration or Modal to keep pages clean with a pop-up purchase experience.🎯 Choose content scope intentionally
Decide if users should see your full slate, one production, or just a single performance to avoid overwhelming or confusing patrons.🔁 Regenerate the snippet after scope changes
If you switch views (e.g., from all shows to a single event), re-create and replace the embed code so the widget updates accordingly.📸 Add production images and descriptions
Enhance your widget’s appeal by uploading relevant media and info—this can improve engagement and context for potential buyers.