Embed Livestreams

The Hub gives you the ability to show livestreams from the app through the use of a couple of lines of code. Upcoming livestreams are shown closer to the top, with the ability for users to watch the livestream directly on your webpage when they go live.

How do I get this on my website?

It's simple. All you need to do is add this line of code anywhere you want fundraisers shown:

<thehub:livestreams></thehub:livestreams>
<script async src="//thehub.scot/share/embed.js" charset="utf-8"></script>

Which would display, like so:

There are 2 additional theme options available to use ("expanded" & "compact") and this can be set by using the "theme" parameter:

<thehub:livestreams theme="expanded"></thehub:livestreams>
<script async src="//thehub.scot/share/embed.js" charset="utf-8"></script>

There is also the option to just show livestreams from grassroots Yes groups. Simply amend the code to include the "grassroots" parameter:

<thehub:livestreams grassroots="true"></thehub:livestreams>
<script async src="//thehub.scot/share/embed.js" charset="utf-8"></script>

By default, the width of the posts in this list is set to 525px, and can be changed by adding a width attribute:

<thehub:livestreams width="300px" ></thehub:livestreams>
<script async src="//thehub.scot/share/embed.js" charset="utf-8"></script>

You can also limit the number of results that are returned (maximum of 10) and use your own stylesheet to make sure the fundraisers display to match the look and feel of your website:

<thehub:livestreams limit="6" css="http://site.com/path/to/stylesheet.css"></thehub:livestreams>
<script async src="//thehub.scot/share/embed.js" charset="utf-8"></script>