Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

Embedding Flicket on Your Site

A simple guide to adding Flicket ticket sales to your site using an iFrame.

To provide a seamless ticket-buying experience, you can embed your Flicket directly into your own website. This keeps customers on your site while they look at your events.

There are two main ways to do this: embedding directly on a page or using a popup modal.

1. Simple iFrame Embed

If you want the ticket shop to appear as a permanent part of a specific page (like a "Tickets" page), use the code below.

We recommend setting the height to at least 120vh (120% of the screen height). Because if it's less than 100, customers are likely to scroll past it on the page and get lost or think the page has ended.

Copy and paste this code into your website editor:

HTML

<iframe src="👉 INSERT_YOUR_FLICKET_URL_HERE 👈" style="border: none; width: 95%; height: 120vh;"> </iframe>

🚨 Note: Replace 👉 INSERT_YOUR_FLICKET_URL_HERE 👈 with the actual link to your desired Flicket page .

2. Advanced: Popup Modal Implementation (Example)

A "Modal" is just a fancy word for a popup window. This script adds a button to your site that, when clicked, "pops" the ticket shop up over your website.

Think of it like a picture frame that stays hidden until someone asks to see it. This is an example of how you can implement Flicket, but it is ultimately up to you how you'd like to style it.

 

Copy and paste this code:

<script>
(function(){
    const e=document.createElement("style");
    e.innerHTML="#flicketOpenBtn{padding:15px 20px;font-size:16px;cursor:pointer;font-family:sans-serif;background-color:#3f85e0;max-width:200px;color:white;border-radius:8px;text-align:center;margin:0 auto}#flicketModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;justify-content:center;align-items:center}#flicketModal>div{background:#fff;width:85%;max-width:900px;height:80%;position:relative;border-radius:8px;overflow:hidden}#flicketCloseBtn{position:absolute;top:10px;right:14px;font-size:22px;cursor:pointer;z-index:2;color:#333}#flicketModal iframe{width:100%;height:100%;border:none}";
    document.head.appendChild(e);

    const t=document.createElement("div");
    t.id="flicketOpenBtn";
    t.textContent="Purchase Tickets"; 
    document.body.appendChild(t);

    const n=document.createElement("div");
    n.id="flicketModal";

    const o=document.createElement("div");
    const i=document.createElement("div");
    i.id="flicketCloseBtn";
    i.textContent="✖";
    o.appendChild(i);

    const a=document.createElement("iframe");
    /* PASTE YOUR FLICKET URL IN THE QUOTES BELOW */
    a.src="YOUR_FLICKET_URL_HERE"; 
    
    o.appendChild(a);
    n.appendChild(o);
    document.body.appendChild(n);

    t.addEventListener("click",()=>{
        n.style.display="flex";
        document.body.style.overflow="hidden";
    });

    i.addEventListener("click",()=>{
        n.style.display="none";
        document.body.style.overflow="auto";
    });

    n.addEventListener("click",e=>{
        e.target===n&&(n.style.display="none",document.body.style.overflow="auto");
    });
})();
</script>

 

🚨 Note: Replace 👉 INSERT_YOUR_FLICKET_URL_HERE 👈 with the actual link to your desired Flicket page .

 


💡 iFrame Best Practices & Maintenance

  • ⚠️ Watch Out for Future Updates: If you make changes to your website design or layout in the future, be sure to re-test your ticket page. Sometimes a change to your website's header or footer can accidentally squash or hide the iFrame. Always test on a mobile phone after making website updates!
  • Check the Mobile View: Most ticket buyers use their phones. After adding the code, open your website on your mobile device to ensure the "Purchase" button is easy to tap and clearly visible.
  • Give it Space: Avoid putting too much text or large images directly above the iFrame. You want the customer to see the tickets immediately without having to dig for them.
  • Test the Height: If you notice your website has "double scroll bars" (one for your site and one for the tickets), try increasing the height value (e.g., from 120vh to 150vh) in the code.