Here’s a test of the OTS Widget. Here’s the code we’re embedding.
This goes in the <head> of the document. I’m using the CodeSnippets plugin and inserting this globally:
<script>(function(){window.ONTHESTAGE_API_KEY='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2NDUwNmFlNGRjNzljMDMzYmFhMTc1YmEiLCJlbWFpbCI6IndpZGdldF9hcGlAcHMxMjQuY29tIiwib3JnYW5pemF0aW9uIjoiNTViZWRmYjY4ZjM2NTMwMzAwYmMzNmNhIiwib3JnX3NsdWciOiJwczEyNCIsInJvbGVzIjpbIndpZGdldF9hcGkiXSwiaWF0IjoxNjg3Mzc4MDg2LCJleHAiOjE3MTg5MTQwODZ9.wzpELGdNXxJEKFAGuSY16_42Kj06J8grNn038X6MR2M';var otswidget_js_esm = document.createElement('script');otswidget_js_esm.setAttribute('type', 'module');otswidget_js_esm.setAttribute('src', 'https://cdn.onthestage.tickets/prod/ots-widgets.esm.js');document.head.appendChild(otswidget_js_esm);var otswidget_js = document.createElement('script');otswidget_js.setAttribute('src', 'https://cdn.onthestage.tickets/prod/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/prod/ots-widgets.css');document.head.appendChild(otswidget_css);
}());</script>
Then in the body of the WordPress page this object is inserted as a shortcode (also done via CodeSnippets plugin)
<onthestage-widget organization-id="55bedfb68f36530300bc36ca" modal="true" modal-height="600px"></onthestage-widget>
This invokes the modal widget on the page. Note that while we must remove the production-id from the modal parameters. The production ID will be passed to the widget with the buttons.
Now, we include a separate snippet for each production’s button that we want to include on the page. This contains the production ID that is passed to the widget.
<button data-onthestage-production-id="649eda60f541fe0e49e82782">Annie Get Your Gun/button>
<button data-onthestage-production-id="623d5ce06d7d5310b94685ea">Buy How To Kiss A Girl Tickets</button>Here is one for Annie Get Your Gun (Jul 14 – Sep 28 2023) and one for How To Kiss A Girl (Sep 22 and Sep 23 2023).
Let’s try adding another one as custom HTML instead of as a snippet: