Widgets 101 – Making your site better with Makesweat Widgets

In this article, we explain how Makesweat’s widgets can benefit your existing website – with no technical knowledge! This article is suitable for you if you either have an existing website, or are thinking of creating one for your sport or activity.

What’s a widget?premiumwebsite2

Let’s start from the beginning – with your existing website. You’ll likely have created a site, either by yourself or with a developer, maybe using WordPress, Squarespace. Your website is now up and running, open to the whole internet! These kind of websites tend to be quite static; more like notice boards than interactive websites such as Facebook, etc. You can change the content from time to time, but usually just for big events. You wouldn’t want to have to edit it with every training session.

The Makesweat Widgets allow you to take this sort of static website and make it a rich and interesting experience for your users, and most importantly book into training sessions.

A widget is a tool on your website that’s provided by someone else, and offers a local version of their functionality on your website. It not only makes your website look good, but also helps your users to engage.

An example widget

This widget as used by South London Harriers Triathlon Club. This shows their actual training and social schedule, and you can click on any event to book into it. This information is live, and changes as they add new events. The following two lines of code make the widget appear. (We’ve deliberately limited the height of the widget here; it would usually show all sessions for the next 28 days.)

<script src=”https://makesweat.com/widget/ms_v1.js?club=3&dayspast=0&daysfuture=28″></script>
<div class=”makesweatevents”></div>



Want to see how it’ll look in action? Simply copy the two lines above and paste into your web page (use the ‘Text’ mode in WordPress, or ‘Code Block’ in Squarespace.)

Getting your own widget

Makesweat is most powerful when used for event booking, but you can use it to also provide an easy method for simply displaying events.

  1. Go to Makesweat.com, and login (create an account if necessary).
  2. Once logged in, go to ‘My Clubs’. First, have a look to see if someone has already created your club (if so, click it). If not, scroll to the bottom of the page to find the green plus symbol. Click this and type in your club name, then click ‘Create Club’add_bigCapture
  3. Your club will be created, and you’ll be taken to your club’s new page on Makesweat. Look out for the number on the end of the address bar for the new club – this is the Makesweat Club Number.Capture
  4. Change the widget code on your site to include the correct Club Number. It’s on the first line, here highlighted in red.
<script src=”https://makesweat.com/widget/ms_v1.js?club=143&dayspast=0&daysfuture=28″></script>
<div class=”makesweatevents”></div>


That’s it! Your new club widget is embedded on your site.

If you’ve got any questions, leave a comment here, or use the ‘Contact’ or ‘Get Help’ function on Makesweat.com. We can’t wait to see your new widget in action!