The Agile Ticketing Javascript Embed Widget provides a set of UI based functions to have a deeper integration with your website. It provides the basis of the client side UI support in our WordPress plugin, and it can also be used on other Content Management systems to provide an easy integration for the Agile Ticketing purchase process.
Example Sites
https://coolidge.org/
https://sffilm.org/
https://jfi.org/
Adding The Widget
If you want to use our Javascript Embed Widget you must include a script reference in the head of the page. The exact URL depends on your Agile Ticketing endpoint. Your Agile Ticketing support rep can help you getting the exact URL.
Example:
<script src="https://prod1.agileticketing.net/websales/agile_integrate.ashx?orgid={CorpOrgID}&epgguid={EntryPointGroupGUID}&"></script>Parameters
How It Works
The widget handles dynamic insertion of elements within the page based on the authentication status of the customer/member, the number of items in the cart, and also ability to utilize the My Calendar function directly on your site.
The dynamic insertion of ticketing elements is based on a specific class being defined on a page element.
<div class="agile-integrate-myaccount></div>
<div class="agile-integrate-mycal" data-showingid="12345"></div>Insertion Options
- agile-integrate-signin
Text based link that will show "Sign In" when the user is not signed in and "Sign Out {User Name}" when they are signed in.
- agile-integrate-myaccount
Text based link that shows "My Account" and will open the users account page.
- .agile-integrate-myaccount-icon
Icon based link to the users account page.
- agile-integrate-account-icon
Creates a submenu that integrates several account based functions like User Name, Sign In/Out, My Account, and My Calendar.
- agile-integrate-cart
Text based link to the users cart formatted with number of items like "Cart (2)".
- agile-integrate-cart-icon
Icon based cart link with number of items floating above icon.
- agile-integrate-menu
Menu of ticketing options that have been set up within Agile Ticketing. This utilizes the "Display Group" as a way to group the ticketing links to create a 2 level menu.
- agile-integrate-mycal
My Calendar icon for a specific event or showing ID. Utilizes "data-showingid" or "data-eventid" attributes on the element to associate with correct event. Will show if the event is already on their calendar or not. Customer will be directed to sign in if they are not already.
Embedded Links
The widget embeds the Agile Ticketing purchase process in your site without the customer being redirected to an Agile Ticketing hosted page. This makes for a more seamless purchase process and preserves your site branding through the entire process. In order to provide this seamless integration our widget requires that we host a custom ticketing URL that matches your sites top level domain. (e.g. For an integration with coolidge.org the ticketing URL would be something like tickets.coolidge.org) The widget will automatically notice all the ticketing links in the page and if clicked will open in the appropriate popup modal or sidebar.
Customization
The widget automatically pulls in a stylesheet from Agile Ticketing to provide a base look and feel for the elements. The look and feel of these elements can be overridden with your sites .css stylesheet to make sure it matches the overall site design. Example shown below:
Also, the widget provides access to several javascript variables in the page to facilitate customization of the above defined Insertion Options. The following variables are available on the atsIntegrate object.
- AccountLoginURL
- AccountLogoutURL
- AccountManageURL
- MyCalEnabled
- MyCalendarURL
- AccountName
- AccountFirst
- AccountLast
- AccountImage
- AccountNumber
- CartURL
- CartCount
Important Notes:
In order to deal with third party cookies Agile Ticketing needs to set up a custom URL (like https://tickets.clientsite.org/ for the ticketing site to match the same TLD of https://www.clientsite.org/. During development and testing you may have to disable third party cookie blocking if you use Safari.
For security purposes Agile Ticketing utilizes Content-Security-Policy settings in order to control what sites can embed the ticket purchase process. This is not enforced on the sandbox/training environment, but is enforced on the live production site. When the custom URL is set up, the Agile Ticketing rep will update the settings to allow embedding.
Hosting a custom ticketing URL does incur an additional monthly or annual cost. This covers the extra server and WAF resources along with SSL certificate.
Comments