This guide will show you how to create an iFrame of the ticketing page for your website or facebook.

  1. Copy the code below and replace `END_OF_URL` with the last text, after the "/" symbol, of your event page URL.

    e.g. If my event URL is https://www.howler.co.za/events/howler-festival-2019-7c12 I would copy the "howler-festival-2019-7c12" part and paste it over the 'END_OF_URL' section in the code.
  2. Our box office's minimum supported width is 320 pixels, so make sure to reduce all horizontal margins and paddings around the iFrame to zero when it's viewed on a small resolution screen.
  3. Some WYSIWYG editors can mess up the code, so always make sure that after implementing, it displays the same in the target page's source code as it is here (common mistake is that some editors convert some characters to HTML entities).
  4. After adding this code, ALWAYS do a test purchase on your box office on a desktop computer and on a mobile phone as well.

iFrame Code:

<div id="howlerframe"></div> <script>(function(h,o,w,l,r){var f=o.getElementsByTagName(w)[0],j=o.createElement(w);j.async=true;j.src='https://'+l+'.howler.co.za/events/'+r+'/ticket_types.js';f.parentNode.insertBefore(j,f);})(window,document,'script','www','END_OF_URL');</script><style>#howlerframe{max-width:100%;width:900px;height:900px;max-height:50vh;margin:0 auto;padding:0}#howlerframe iframe{height:100%;width:100%}</style>
Note: The uppercase lettering and bold are not required. It is used to show which parts of the code changes.

How Did We Do?