Embed Upcoming Events

The Hub gives you the ability to show upcoming Scottish political events on your website through the use of a couple of lines of code.

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 events shown:

<thehub:events></thehub:events>
<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:events theme="expanded"></thehub:events>
<script async src="//thehub.scot/share/embed.js" charset="utf-8"></script>

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

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

You can show events between specific dates by using the "startDate" and "endDate" parameters (these must be valid dates or they'll be ignored). This will display all events between those dates unless you set the "limit" parameter (see further down for details):

<thehub:events startDate="2021-03-01" endDate="2022-09-06" ></thehub:events>
<script async src="//thehub.scot/share/embed.js" charset="utf-8"></script>

You can change the width of the events area by adding a width attribute:

<thehub:events width="300px" ></thehub:events>
<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 20) and use your own stylesheet to make sure the events display to match the look and feel of your website:

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