How-To: Integrate into websites

Back to Support

When events are published on web and ical feeds, they can be seen on the ClubEvent website by using your club code, as part of a URL, as follows:

https://events.clubevent.co.uk/e/{clubcode}
or
https://events.clubevent.co.uk?id={clubcode}

A single event can be seen using:

https://events.clubevent.co.uk/e/{clubcode}/{eventcode}
or
https://events.clubevent.co.uk?id={clubcode}&event={eventcode}

You can get your club code from Club Settings and the eventcode by editing an Event.  Take a look at the “Show event on web and ical feeds” and the link for the event will be there.  Another way is to click the ‘copy link’ button on the event itself (on the events.clubevent.co.uk/e/{clubcode} page).  Note that an event will only show up here if the “Show event on web and ical feeds” option is checked.

Integrating into a website

You can integrate an event list or a single event into a web page, by using an iframe.  Most web builder systems allow the use of iframes and they are very familiar to web developers.  Code for the iframe is as follows:

<iframe src=”https://events.clubevent.co.uk/e/{clubcode}?header=false” id=”” scrolling=”yes” width=”100%” height=”1000px” frameborder=”0″></iframe>

  • Replace {clubcode} with your clubcode – without the brackets

Parameters available

The following parameters are available for the event url and should be added within the ‘src’ string, as they are ClubEvent parameters, rather than parameters for the iframe itself.
&header=true|false This determines whether the club banner image will be shown (default is true)
&footer=true|false This determined whether the club logo and description will be shown at the bottom of the list (default is true)
&event={eventcode} To show a single event
&tag={tag} If you use event tags, these can be used to filter the events shown.  Note that if you have tags ‘team event’, ‘team competition’, you could used &tag=team to filter to show both of these tags – the parameter looks for tags that start with the given string.  You can also filter on multiple tags, like:  &tag=open,competition
&xtag={tag} As per tags, but this tag or tags will filter OUT events, so if you don’t want to show events that have the member tag, then use &xtag=member
&linkout=true|false A subtle option – when the [+More]  button is pressed, this expands the selected event from a list of events. On small devices, within an iframe, this can make the booking process nasty, as the screen layout is not in the control of ClubEvent, but the embedding website.  Using &linkout=true will make the [+More] button open a new browser page focused on that event alone.  Note that if ClubEvent detects a small screen size, it will default this to ‘true’, otherwise, it is ‘false’
&uuid={uuid} Not specifically useful to webmasters, but this parameter is used to provide a unique id of a ticket holder, so that they can be shown (and change) their ticket options.
Other iframe attributes can be used.  We suggest ensuring the iframe has full width and sufficient height, especially on mobile devices.  Beware of placing it on pages that restrict these elements, as this can cause issues if ticket purchasing is used – especially when the web page is used on a mobile device.

Auto resizing

It is possible to auto-size iframes, by adding a bit more code to your site.  Sometimes this is added all in one block, sometimes, you can add the first part to the site “includes”, and the rest next to the iframe, as follows.  NOTE:  This will not work on some sites, as providers like Wix put iframes inside fixed height blocks, so even though the iframe will resize properly, the block that it sits in will not!

<!– Put this line in the site includes, or leave above the iframe line…  –>
<script type=”text/javascript” src=”https://events.clubevent.co.uk/assets/iframeResizer.js”></script>

<iframe src=”https://events.clubevent.co.uk/e/{clubcode}?header=false&footer=false&linkout=true” id=”myIframe1″ width=”100%” frameborder=”0″></iframe>

<!– this script should go at the end of the current page, and could have multiple commands for each iframe ‘myIframe1’ is the id of the line above –>

<script>
  iFrameResize({ log: true, heightCalculationMethod:’lowestElement’ }, ‘#myIframe1’)
</script>

Back to Support