How Do I Embed My Ticketing Pages On My Site Using An Iframe?

Currently there are a few options for integrating an existing client's site with ticketabc.com. They are described below and supported with screenshots.

"Buy Tickets" link integration

This is the simplest integration method. Simple add a link on your site to the event's listing on your Ticket ABC account. Following HTML code should be embedded in your site's HTML code for the link to appear:

<a href="http://YOUR_TICKETABC_ACCOUNT_NAME.ticketabc.com/listings">Buy tickets</a>

If you want to link to specific event you should use below code:

<a href="http://YOUR_TICKETABC_ACCOUNT_NAME.ticketabc.com/events/EVENT_SLUG">Buy tickets</a>

EVENT_SLUG is a string of characters generated automatically from event name as displayed on the event listings page (e.g. testvenue.ticketabc.com/events/test-event ).

After clicking the link your website visitor will be redirected to your Ticket ABC listing page or a specific event, depending on the method you chose.. Link integrated in such way can be then styled with CSS to fit the design of your site or to resemble a button as in the above example.

Below image shows a section of client's website where "Buy Tickets" link has been added:

Venue event listings integration

If you would like a listing of all of your events on your site you can use an iframe to do so. Then only events specific to your Ticket ABC account will show up in a listing displayed inside the iframe. The following HTML code should be embedded in your site's HTML code for the event listing iframe to render:

<iframe src="http://YOUR_TICKETABC_ACCOUNT_NAME.ticketabc.com/venues/YOUR_TICKETABC_ACCOUNT_NAME/listings/" frameborder="0" height="500" width="650"></iframe>

We recommend using iframe width of at least 600 pixels (as in above code example) – this is the width of the listings pane itself. Height property of the iframe can be changed too, dependent on your needs. In a case where listings pane is longer than the value of iframe height parameter you specified, vertical scrollbars will be added automatically. Clicking on the “Buy Tickets” for a specific event button inside the iframe will take your visitor to your Ticket ABC account page for that event, thus leaving the website.
Illustration below demonstrates event listings embedded on client page using iframe:

Ticket selection listing integration

If you have created a page on your site for your event and want to add a way to select tickets for that event, you can initiate the purchase process in your own website. You can use an iframe to display the ticket selection listing from your Ticket ABC page.
The following HTML code should be embedded in your site's HTML code for the ticket selection panel iframe to appear:

<iframe src="http://YOUR_TICKETABC_ACCOUNT_NAME.ticketabc.com/events/EVENT_SLUG/tickets/" frameborder="0" height="500" width="400"></iframe>

We recommend using iframe width of at least 400 pixels. EVENT_SLUG is a string of characters generated automatically from event name as displayed on the event listings page (e.g. testvenue.ticketabc.com/events/test-event ).

Users after making their selection will be redirected to the Ticket ABC billing page.

Entire ticket purchase process integration

If you don't want to have to redirect the user from your domain at all then you can embed the entire purchase flow on your site inside an iframe. We recommend using iframe width of at least 1008 pixels. The following HTML code should be embedded in your site's HTML code in order to do so:

<iframe src="http://YOUR_TICKETABC_ACCOUNT_NAME.ticketabc.com/i/venues/YOUR_TICKETABC_ACCOUNT_NAME/" frameborder="0" height="500" width="1008"></iframe>

Please note the /i/ in the URL. Users clicking “Buy Now” button on event listings page continue their ticket purchase process inside of the iframe, therby remaining on your site.
Screen shots below present steps 1 and 3 of Ticket ABC purchase flow as embedded in an iframe on client's website - please note that the top header with client's logo is no longer displayed in such iframe.



How Do I Customise My E-Tickets?

E-tickets sent out to customers can accommodate up to 3 images - an event or venue logo at the top, an image in right pane (small image) and image in bottom pane (large image).

    E-ticket logo dimensions:
  • 325px wide by 105px high -> Above dimensions suggest a rectangular shape but all square logos can also be accommodated – Ticket ABC designer will usually place a logo inside a rectangle of required dimensions, with a background matching logo's color scheme.

  • The right pane [small] image size:
  • 320px wide by 50px high  -> 50 pixels is the minimum height here.

  • The bottom pane [large] image size:
  • 800px wide by 500px high -> 500 pixels is the maximum height here.

Right and bottom pane images should have proportional heights, i.e everytime one increases the height of the right pane image (small), the height of the bottom pane image one should be decreased. Otherwise larger image will flow over to the next page. Above dimensions are calculated using standard Web image density of ~90dpi. to see an e-ticket screen shot for better clarity.