An iframe integration allows you to embed 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.
Example Sites:
https://coolidge.org/
https://sffilm.org/
https://jfi.org/
To get started the site designer/developer needs to take the links presented by the WebSales Feed API and open them dynamically in an iframe when the customer clicks a purchase link.
The example below provides a basic level of functionality and further modifications may be required to integrate this into your own site.
Integration Example (JSFiddle):
The Agile Ticketing purchase pages send some messages to the parent window to facilitate for a tighter integration. The Message passing from frame to parent window uses the postMessage function in the browser. (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
Here is an example of the calls on Agile Ticketing’s side to let the site know that some state changed.
parent.postMessage(JSON.stringify({ 'action': 'close' }), "*");parent.postMessage(JSON.stringify({ 'action': 'checkout' }), "*");parent.postMessage(JSON.stringify({ 'action': 'resize', 'value': $('body').height() + 30 + '' }), "*");The Agile Ticketing embedded window will send a json object to the parent window with the following properties as shown in the example below.
{
"action": "pageload",
"value": "true",
"pageName": "ticketsearchcriteria.aspx",
"bodyHeight": "1642",
"userLoggedIn": false,
"userNumber": "",
"userName": "",
"userFirst": "",
"userLast": "",
"userEmail": "",
"userImage": "",
"basketCount": "4"
}
The parent window needs to listen for these calls with script like the following
window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { if (event.origin !== "http://example.org:8080") return; // ... }
inside the receiveMessage function you can resize the Dialog when action=resize, or close the Dialog when action=close etc… this allows the dialog to grow taller when needed or a button within the iframe to tell the parent to close the dialog.
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