There is a growing demand from our clients to keep their customers on their own website, which is why we have developed an iframe integration that allows this seamlessly.
How our iframe integration works
The integration involves embedding an iframe on pages that are meant for the content within it. The iframe functions similarly to our standard redesigned front-end, but there are some differences due to the limitations of iframes in web browsers.
Implementation-wise the solution is pretty straightforward. Once you have the base page designed for the content, it is just a matter of altering the src (source) of the iframe element on the page to the desired location on Ticketsolve's side. This applies to all pages except when a user wants to view an order or reset their password (for these pages we provide a query parameter that will then be passed along to the iframe inside your page).
We also have a feature that will navigate the user between pages on your website. For instance, if you have one page for a customer's online account (login) and another for the cart, when the user goes from the accounts page within the iframe to the cart within the iframe, the main website location will also change. For example, if the browser location for the account page is https://yoursite.com/account/profile, when the user clicks the cart button the location will change to https://yoursite.com/cart.
Iframe design
Responsive content
The iframe seamlessly integrates with the page you have set up. Since Ticketsolve's application is responsive, the content inside the iframe adapts to the size of the iframe, and the browser window. This is important because we don't want the tablet style to activate while browsing in a desktop browser, or vice versa.
Width limits
Our cut-off limits for changing style are as follows:
- Phone - max-width: 600px
- Tablets - min-width: 601px and max-width: 1024px
- Desktop - min-width: 1025px
Branding
Ticketsolve's iframe application adheres to the same branding that applies to the regular version of Ticketsolve's application, meaning that the main site design should follow what is possible within the branding provided on Ticketsolve's side to ensure that the experience is as seamless as possible.
Navigation
We would recommend including navigation links on your website that lead to pages containing the iframe. Typically, these links can be for sections such as "What's On," a Members' section, and the Cart. While we can provide the cart and member links within the iframe, it is suggested that you include them on your website for better positioning and readability because we are restricted to the space of the iframe.
The iframe script
Communication between the iframe and its parent frame takes place via a script called iframe-handling.js. This script contains logic for a lot of features that are required for a nice and seamless solution. For example:
- Resizing the iframe to the height of the content within it.
- Communication of the current address in the parent frame to handle the inside-out routing.
- Warnings when the browser does not have the correct cookie settings.
- Scrolling the frame to keep the iframe in view when required.
- Passing parameters to the iframe from the parent frame.
- Information about the cart status, specifically the quantity.
Configuration
The iframe setup comes with some smaller possible configurations, they are as follows:
- ticketsolveUrl -> Is the url that we are hosting your subdomain for ticket sales at.
- redirectCookie -> Is used internally for Ticketsolve, but in case you want a specific name for the cookie used to test redirects, this is where you you alter this.
- iframe -> The id of the iframe DOM-element.
- cartCount -> The id of the cart quantity DOM-element(see below for more information).
- header -> The DOM-selector of the header section of the page used to remember the page position between page navigations(possible configurations where header is a placeholder: #fooHeader, .fooHeader).
- footer -> Like header selector, but for the footer.
- locale -> If the site wants to be able to switch between different languages, the locale should either be configured or set as a query param in the url. `yourdomain.com/ts_locale=cy-CY` for example.
- cartUpdateCallback -> By default our iframe script will use the cartCount config as a selector and update this with the latest quantity in the cart. If you want to alter this logic you can write a function to handle the data the way you would like. See the iframe-handling.js for an idea of the default(search for "cartUpdateCallback"). The data returned upon calling the callback is { itemCount: "x" }.
- memberStatusCallback -> We don't have a default for this. The data returned upon calling the callback is { loggedIn:"boolean", name:"the users name" }
Requirements
The iframe element:
<iframe id="ticketsolve-iframe" src="yoursubdomain.ticketsolve.com/shows"></iframe>
The configuration script - we urge you to put this section at the bottom of the page:
<script id="ticketsolve-iframe-config">
(function(d) {
var config = {
ticketsolveUrl: 'https://yoursubdomain.ticketsolve.com',
redirectCookie: 'cookie-redirect',
iframe: 'ticketsolve-iframe',
cartCount: 'ticketsolve-cart-count',
header: '#header',
footer: '#footer',
},
g=document.createElement("script"),s=document.getElementsByTagName("script")[0],f=!1;g.src="https://d235gwso45fsgz.cloudfront.net/ticketbooth/iframe-handling.js",g.type="text/javascript",g.async="true",g.onload=g.onreadystatechange=function(){var e=this.readyState;if(!(f||e&&"complete"!=e&&"loaded"!=e)){f=!0;try{TicketsolveIframe.load(config)}catch(t){}}},s.parentNode.insertBefore(g,s);
}(document));
</script>
The Setup
A very barebones setup of the iframe in Ruby on Rails would look something like the following:
<!DOCTYPE html> <html> <head>
<title>Foo</title>
<style>
#header { background-color: #FFA07A; }
#header h1 { padding: 30px 20px; }
#cart { background-color: #D3D3D3; padding: 5px 20px; }
#navigation { background-color: lightgreen; padding: 5px 20px; }
#footer { background-color: #ADD8E6; padding: 20px; }
iframe { border: 0px; overflow: hidden; min-height: 800px; height: 864px; }
h1 { margin: 0; }
</style> </head>
<body> <div
class="content">
<div id="header">
<h1>Foo</h1>
</div> <nav
id="navigation">
<%= link_to 'Whats On', page_path('whatson') %> <%= link_to 'Cart',
page_path('cart') %> <%= link_to 'Products', page_path('products') %>
</nav> <iframe
id="ticketsolve-iframe"
src="yoursubdomain.ticketsolve.com/shows"></iframe>
<script id="ticketsolve-iframe-config">
(function(d) {
var config = {
ticketsolveUrl: 'https://yoursubdomain.ticketsolve.com',
redirectCookie: 'cookie-redirect',
iframe: 'ticketsolve-iframe',
cartCount: 'ticketsolve-cart-count',
header: '#header'
},
g=document.createElement("script"),s=document.getElementsByTagName("script")[0],f=!1;g.src="https://d235gwso45fsgz.cloudfront.net/ticketbooth/iframe-handling.js",g.type="text/javascript",g.async="true",g.onload=g.onreadystatechange=function(){var e=this.readyState;if(!(f||e&&"complete"!=e&&"loaded"!=e)){f=!0;try{TicketsolveIframe.load(config)}catch(t){}}},s.parentNode.insertBefore(g,s);
}(document));
</script> </div>
</body> </html>
SSL and the domain
Web browsers aren't the biggest fans of iframes because they are often misused for mischief. As such there is a very stringent requirement that both the parent page and the iframe use SSL(secure socket layer). This is a requirement from our side because we are processing payments and user information. As a suggestion, it is a good idea to make sure that https://www.yoursite.com and https://yoursite.com point to the same location. Also, it is a good idea to have a redirect in place for http://www.yoursite.com and http://yoursite.com so they point to the same location as well.
Cookies
Cookies are a bit of a tricky situation, a lot of browsers require that you have visited the page in question before, for it to accept the cookies they provide (this applies specifically to Safari and Firefox). As our application is nested inside your website, it is deemed as a 3rd party web page (again because cookies are often misused), for us to get around this we will redirect the user to our application for a blink and then back to your site again to be able to register the cookies we require. This is especially important for our queueing system, without the cookie it will not work and we will not accept your visitor as a valid visitor.
Information about Shows
Depending on the vector taken to the integration it is possible that you require information about the shows setup for your account. As an example your own listing page. We then provide an xml-endpoint which you can use to consume the important information about the shows, see here for more information.
Cart information
As part of the iframe handling it can update an id on the parent page with the number of items in the cart and with that it can update it. This is done via the cartCount configuration. If there is an element with the id set to the same as in the config it will have the inner html set to the number emitted. For example: <span id="ticketsolve-cart-count">0</span> => <span id="ticketsolve-cart-count>1</span>.
This comes with a caveat: our clients want to show the number of items in the user's cart, even on pages where they don't generally want to have the iframe integration. As of right now, we can't supply this information and would point instead to still have the iframe embedded but with the properties height and width set to 0%() which will ensure that the cart information is still being provided as an event you can listen to. This however is less than optimal when it comes to performance as the full application will be embedded. We are working on a different way to approach this in the future.
Advanced navigation
We provide the possibility of advanced routing for our clients. This essentially means that we can navigate around your website depending on what the user is visiting. Previously there was information about the navigation like follows:
The browser location is
https://yoursite.com/account/profile
, when the user clicks the cart button the location will change tohttps://yoursite.com/cart
For this to work, we require information from you about which location you would like to apply to what section of our application.
Comments
Please sign in to leave a comment.