Follow

iframe Integration

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.

 

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.

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments