Embedding LiveHeats in your website

In addition to sending your athletes and spectators to the LiveHeats platform to view and register for events or memberships, you can also send them directly to your website.

For customers on our Pro Am plans or above, you can integrate the following pages into your website:

• live scores
• event page, and sub-pages for divisions and schedule
• organiser profile page
• rankings
• event calendar
• directory (for federations)

We support embedding into any web page that can have an iFrame.

Embedding LiveHeats modules in your website

1. Decide which public facing page you would like to integrate into your website:

   Page	So people can view	Example URL
   Event page	Live scores, draws, results, and registration (if open). You can also embed sub-pages for divisions or event schedule.	https://liveheats.com/events/5263
   Organiser home page	All events and series, and membership registration (if open)	https://liveheats.com/surfingnsw
   Rankings	The rankings for the selected series	https://liveheats.com/surfingnsw/rankings
   Events	Shows the organiser's calendar of events	https://liveheats.com/surfingnsw/events
   Child organisations	Show's all linked organisations *for federations only*	https://liveheats.com/wcbr/federated-organisations

2. Head to your public organiser profile (e.g. www.liveheats.com/surfingnsw). If you can't remember your organiser profile link, you can search it on our directory: www.liveheats.com/organisations
3. Copy this the relevant public page URL to your clipboard
4. Use a iFrame code generator like Embed Responsively (select generic iFrame), and enter your LiveHeats url (e.g. https://liveheats.com/events/5263) to create and copy the embed code snippet
5. In your website content management system, go to the page where you'd like to embed the event module and add a HTML iFrame (refer to your website service for how to add an iFrame), and paste the embed code snippet into the iFrame
6. Review and once published, you'll then see the LiveHeats module on your webpage. This will update automatically as you change the event status.

Embedding into a live video feed or webcast

LiveHeats also has a way for you to integrate live score graphics into your webcast or broadcast. See here for more information.

Can we customise the look and feel of the module in our site?

Yes, you can apply custom CSS on top of what you see on the page. So if you have access to a web developer who is familiar with CSS they make tweaks for you. Here's how:

1. Send them the relevant public URL and the design concept for what you'd like to customise
2. They can create a custom CSS file and save it to the cloud using a storage service like Cloudinary
3. To apply the custom CSS the file to the webpage, they can add "?overwritecss=" to the end of that link with the url of the custom css file. Then you can embed that url. So the full URL would look something like: https://liveheats.com/events/5225/embed?overwritecss=https://res.cloudinary.com/liveheats-com/raw/upload/v1619746949/overwrite_xntyfy.css