Ticket Widget Configuration
1. Go to the On The Stage Dashboard.
2. Click on 'Widget' under 'Settings' on the left-hand panel.
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.
11. The Modal widget enables a pop-up modal to be embedded on your website.
This is a sample modal code snippet:
<onthestage-widget organization-id="639365965bc6322c4d8d33c8" production-id="
639365d75bc6322c4d8d3409" modal="true"></onthestage-widget>
<button data-onthestage-production-id="639365d75bc6322c4d8d3409"></button>
If you want to add text to the modal button - insert the text you wish to display in the snippet. In this sample, the button would display “SAMPLE TEXT”:
<onthestage-widget organization-id="639365965bc6322c4d8d33c8" production-id="
639365d75bc6322c4d8d3409" modal="true"></onthestage-widget>
<button data-onthestage-production-id="639365d75bc6322c4d8d3409">SAMPLE TEXT</button>
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.
When you choose Calendar or List, you can decide whether to display all productions or a single production. If you wish to display all productions - leave this blank. If you wish to display a single production - use the dropdown to choose a production.
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.
Once you've selected a production, upload a rectangular and square image using the Upload Image buttons. Note: If you do not upload image assets, patrons will see OTS logos in these spots
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.
