Initial Instructions:

1. Click on 'Widget' under 'Settings' on the lefthand panel of the dashboard.

2. Whitelist your domain. Domain whitelist allows you to restrict which url’s your ticket widget can be displayed on. This helps you maintain security control over your widget and make sure they are showing up only on the sites you want them to be shown. You can whitelist multiple domains by repeating the same process.

3. Add the code snippet to the head tag of your webpage. You will need your developer with website access to install this onto your site. This is your unique initialization script for your widget. Your developer should copy and past this widget into the head tag of your website page.

Your developer will need access to your theater/school website to be able to embed the widget using these instructions. Please copy the code and this article to your developer. Note: customers using Wix or GoDaddy for web hosting should follow the specific instructions for that service.

Next, add the code reference wherever you would like the widget to appear:

Adding The Widget to A Wix Website

For Wix websites you will need to whitelist two different domains:

Whitelist the Wix editor URL
Whitelist a file user URL that is specific to your website.

The format of your website URL is: https://www-YOURWEBSITENAMEHERE-com.filesusr.com. For example, the Home Page - On The Stage website would be formatted as https://www-onthestage-com.filesusr.com

Add a new section on the page where you would like your ticket widget to appear by selecting Add Section and Blank Section.

Rename your new section to “widget-section” by selecting the T next to the section name.

Following the ‘Adding an embed' instructions from Wix’s support documentation - complete the steps below:

Now that you have renamed the widget-section you can add the embed.

Click Add Elements in your Editor.
Click Embed Code.
Click Popular Embeds.
Choose Embed HTML
Click Enter Code

In the ‘Add Your Code’ section - paste the embed code below, making sure to replace both the API Key and Organization ID with the values displayed in the OTS dashboard. (Copy code below from gray box)

Copy the code below to add to your WIX site:

<script>
    {/* Wix Widget Embed Script */}
    window.onload = function() {
    (function () {
        window.ONTHESTAGE_API_KEY = 'INSERT-YOUR-API-KEY-HERE';
        var otswidget_js_esm = document.createElement('script');
        otswidget_js_esm.setAttribute('type', 'module');
        otswidget_js_esm.setAttribute('src', 'https://cdn.onthestage.tickets/staging-v2/ots-widgets.esm.js');
        document.head.appendChild(otswidget_js_esm);
        var otswidget_js = document.createElement('script');
        otswidget_js.setAttribute('src', 'https://cdn.onthestage.tickets/staging-v2/ots-widgets.js');
        otswidget_js.setAttribute('nomodule', '');
        document.head.appendChild(otswidget_js);
        var otswidget_css = document.createElement('link');
        otswidget_css.setAttribute('rel', 'stylesheet');
        otswidget_css.setAttribute('href', 'https://cdn.onthestage.tickets/staging-v2/ots-widgets.css');
        document.head.appendChild(otswidget_css);
    }());
    var widget = document.createElement('onthestage-widget');
    widget.setAttribute('organization-id', 'INSERT-YOUR-ORGANIZATION-ID-HERE');
    widget.setAttribute('modal', 'false');
    widget.setAttribute('widget-style', 'calendar');
    document.body.append(widget)
}
</script>

Click Update.

Replace `INSERT-YOUR-API-KEY-HERE` with the API key included in the Code Snippet section.

Replace `INSERT-YOUR-ORGANIZATION-ID-HERE` with the organization included in the code reference section.

After completing these steps you should see your widget appear in the preview of your browser.

Click the publish to make the page live for your patrons to see.

The OTS Ticket Widget is intended to open in a full screen modal once your patron selects a performance date and time and begins selecting tickets. Unfortunately, Wix does not allow this behavior and your patrons will complete their purchase in a smaller-than-ideal window. Consider migration to a less restrictive hosting platform to improve the experience.

Adding The Widget to A GoDaddy Website

For GoDaddy websites you will need to whitelist your domain and the domain of the GoDaddy preview link.

Whitelisting:

Whitelist the GoDaddy preview link
If you find that you can't see the entire widget on the GoDaddy preview link - hit publish and check to see if the widget appears on the published version of your website

After whitelisting our domains, follow the GoDaddy documentation here and complete these steps:

Go to your GoDaddy product page.
Scroll to Websites + Marketing and select Manage next to your website to open your site.
Select Edit Website or Edit Site to open your website builder.
Go to the page and location you want to add your custom code, and add a section.
Search for the HTML section and select Add.
Paste or write your custom code into the Custom Code field. Once you add the component (as outlined in the documentation) - you're going to put both the initialization code snippet and code reference into that Custom Code field.
Copy the code below to add to your GoDaddy site:
1. <script>
  {/* GoDaddy Widget Embed Script */}
  (function(window, document, iframe) {
  if (document.querySelector('onthestage-widget')) {
  return;
  }
  window.ONTHESTAGE_API_KEY = 'INSERT-YOUR-API-KEY-HERE';
  try {e
  var otswidget_js_esm = document.createElement('script');
  otswidget_js_esm.setAttribute('type', 'module');
  otswidget_js_esm.setAttribute('src', 'https://cdn.onthestage.tickets/staging-v2/ots-widgets.esm.js');
  document.head.appendChild(otswidget_js_esm);
  var otswidget_js = document.createElement('script');
  otswidget_js.setAttribute('src', 'https://cdn.onthestage.tickets/staging-v2/ots-widgets.js');
  otswidget_js.setAttribute('nomodule', '');
  document.head.appendChild(otswidget_js);
  var otswidget_css = document.createElement('link');
  otswidget_css.setAttribute('rel', 'stylesheet');
  otswidget_css.setAttribute('href', 'https://cdn.onthestage.tickets/staging-v2/ots-widgets.css');
  document.head.appendChild(otswidget_css);
  var widget = document.createElement('onthestage-widget');
  widget.setAttribute('organization-id', 'INSERT-YOUR-ORGANIZATION-ID-HERE');
  widget.setAttribute('modal', 'false');
  widget.setAttribute('widget-style', 'calendar');
  iframe.parentNode.insertBefore(widget, iframe)
  } catch (e) { console.log (e); }
  }(window.parent, window.parent.document, window.frameElement));
  </script>
Replace INSERT-YOUR-API-KEY-HERE with the API key included in the Code Snippet section.
Replace INSERT-YOUR-ORGANIZATION-ID-HERE with the organization included in the code reference section.
After completing these steps you should see your widget appear in the preview on the left side of your browser. Click the publish to make the page live for your patrons to see.

Adding The Widget to A WordPress Website

After whitelisting your domain as instructed above you will need to add the widget code to the <head> tag of your website. The easiest way for most users to do this is by using a “code snippets” plugin rather than editing your theme files directly. We recommend WPCode Lite, which is a free plugin.

You will create two code snippets to add the widget to your site. First, after installing the plugin, select “Add Snippet” and then choose “Add Your Custom Code” option. Paste the script you copied from the OTS admin site into the Code Preview box. Make sure Type is set to “HTML Snippet”, Insert Method is “Auto Insert” and the Location is “Site Wide Header”. Click the Update button to proceed.

Next, you will create a shortcode for the actual widget embed itself. Click “Add Snippet” from the side bar and choose the “Add Your Custom Code” option again. You will paste the code reference from the OTS admin screen into the Code Preview box. Make sure Type is set to “HTML Snippet”, Insert Method is “Shortcode”. The plugin will automatically generate a shortcode for you. Click the Update button to proceed.

On the page where you would like to embed the widget, choose the Shortcode block type and insert the shortcode generated in the previous step. Note: Your editing interface may look different depending on whether you are using the default Gutenberg editor, the classic Wordpress editing experience, or a more advanced plugin like WPBakery Page Builder.

Adding The Widget to A Squarespace Website

To add the initialization scripts into your head tag of your website page:

Open the Developer tools panel.
Click Code Injection.
Add the Code Snippet to the header. Do not remove any existing code - simply add the OTS code block on a new line.
After adding your code, hit Save.

To add the code reference to a specific spot on your website:

Add a content block wherever you wish on your website.
In the menu when you add content block - choose ‘Code’
Click the pencil icon to edit the Code within this block
Paste your code reference in this modal and hit Save.

Notes:

Sometimes on Squarespace preview, the widget will appear as pulsing gray lines within a white box. Publish your site and view the live version in order to see if content is appearing.
Do not add more than one code reference to a page - the widget will not render correctly and content will not appear.

What is a Ticket Widget?

How Do I Embed My Ticket Widget?

Widget Functionality Overview

Quick Links: Optimized Booking & Advanced Marketing

Initial Instructions:

1. Click on 'Widget' under 'Settings' on the lefthand panel of the dashboard.

3. Add the code snippet to the head tag of your webpage. You will need your developer with website access to install this onto your site. This is your unique initialization script for your widget. Your developer should copy and past this widget into the head tag of your website page.

Next, add the code reference wherever you would like the widget to appear:

Adding The Widget to A Wix Website

For Wix websites you will need to whitelist two different domains:

Whitelist the Wix editor URL

Whitelist a file user URL that is specific to your website.

The format of your website URL is: https://www-YOURWEBSITENAMEHERE-com.filesusr.com. For example, the Home Page - On The Stage website would be formatted as https://www-onthestage-com.filesusr.com

Add a new section on the page where you would like your ticket widget to appear by selecting Add Section and Blank Section.​

Rename your new section to “widget-section” by selecting the T next to the section name.

Now that you have renamed the widget-section you can add the embed.

Click Add Elements in your Editor.

Click Embed Code.

Click Popular Embeds.

Choose Embed HTML

Click Enter Code

In the ‘Add Your Code’ section - paste the embed code below, making sure to replace both the API Key and Organization ID with the values displayed in the OTS dashboard. (Copy code below from gray box)

Copy the code below to add to your WIX site:

Click Update.

Replace INSERT-YOUR-API-KEY-HERE with the API key included in the Code Snippet section.

Replace INSERT-YOUR-ORGANIZATION-ID-HERE with the organization included in the code reference section.

After completing these steps you should see your widget appear in the preview of your browser.

Click the publish to make the page live for your patrons to see.

Adding The Widget to A GoDaddy Website

For GoDaddy websites you will need to whitelist your domain and the domain of the GoDaddy preview link.

Whitelisting:

Whitelist the GoDaddy preview link

If you find that you can't see the entire widget on the GoDaddy preview link - hit publish and check to see if the widget appears on the published version of your website

Go to your GoDaddy product page.

Scroll to Websites + Marketing and select Manage next to your website to open your site.

Select Edit Website or Edit Site to open your website builder.

Go to the page and location you want to add your custom code, and add a section.

Search for the HTML section and select Add.

Paste or write your custom code into the Custom Code field. Once you add the component (as outlined in the documentation) - you're going to put both the initialization code snippet and code reference into that Custom Code field.

Copy the code below to add to your GoDaddy site:

Replace INSERT-YOUR-API-KEY-HERE with the API key included in the Code Snippet section.

Replace INSERT-YOUR-ORGANIZATION-ID-HERE with the organization included in the code reference section.

After completing these steps you should see your widget appear in the preview on the left side of your browser. Click the publish to make the page live for your patrons to see.

Adding The Widget to A WordPress Website

Adding The Widget to A Squarespace Website

To add the initialization scripts into your head tag of your website page:

Open the Developer tools panel.

Click Code Injection.

Add the Code Snippet to the header. Do not remove any existing code - simply add the OTS code block on a new line.

After adding your code, hit Save.

To add the code reference to a specific spot on your website:

Add a content block wherever you wish on your website.

In the menu when you add content block - choose ‘Code’

Click the pencil icon to edit the Code within this block

Paste your code reference in this modal and hit Save.

Notes:

Sometimes on Squarespace preview, the widget will appear as pulsing gray lines within a white box. Publish your site and view the live version in order to see if content is appearing.

Do not add more than one code reference to a page - the widget will not render correctly and content will not appear.

Add a new section on the page where you would like your ticket widget to appear by selecting Add Section and Blank Section.

Replace `INSERT-YOUR-API-KEY-HERE` with the API key included in the Code Snippet section.

Replace `INSERT-YOUR-ORGANIZATION-ID-HERE` with the organization included in the code reference section.

Replace `INSERT-YOUR-API-KEY-HERE` with the API key included in the Code Snippet section.

Replace `INSERT-YOUR-ORGANIZATION-ID-HERE` with the organization included in the code reference section.