IMPORTANT steps to set up the Howler iFrame on your website:

1. Replace `YOUR_EVENT_ID` with the id of the event.

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.

<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','YOUR_EVENT_ID');</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>

How Did We Do?