How to add a live leaderboard to Microsoft SharePoint

This post is a step-by-step guide to adding a live leaderboard to Microsoft SharePoint using Keepthescore.com. Once you have gotten it working, you can administer the scoreboard from Keepthescore.com, and it will automatically (and more-or-less instantly) update on your SharePoint site.

⚠️ Prequisites : 2 things need to be in place for this to work.

1. It is essential that you have admin access to your SharePoint Site Settings, because you need to add Keepthescore.com as a trusted site. It will not work otherwise!
2. You must have premium membership on Keepthescore.com. This currently costs 15 USD. See here for pricing information.

Overview

There are three steps to adding a live leaderboard to your SharePoint site. Each step will be described in detail further down.

1. Add Keepthescore.com as a trusted site in SharePoint
2. Create a leaderboard on Keepthescore.com
3. Add the leaderboard to SharePoint

Ready? Let's dive in.

Step 1: Add Keepthescore.com as a trusted site in SharePoint

You will be adding the leaderboard as an iFrame to your SharePoint site using the "Embed web part" feature. For this to work, the "Keepthescore.com" domain needs to be added as a trusted site in SharePoint.

Site admins can allow embedding content from a specific list of sites, or allow embedding from any site by changing the HTML Field Security setting in site settings.

Click on Settings and then Site Settings. If you don't see Site settings, click Site information and then click View all site settings.

On the Site settings page, under Site Collection Administration, click HTML Field Security.

Now add the following entries to the list "Allow iframes from this domain":

• keepthescore.com
• keepthescore.co

The click on OK.

Step 2: Create a leaderboard and get the embed code

The following steps are required:

1. Create a leaderboard by clicking here and go through the wizard until you can see the final leaderboard with the "Control Panel" at the top.
2. Click on the "PUBLISH" button at the top. This requires you to be signed in with an account.
3. Click on the "Embed on a website" button as shown in the screenshot below.
4. Copy the code to your clipboard using the blue COPY button.

Before you continue, note that you can customize the leaderboard to your liking. You can change the colors, texts and themes. See here for a gallery of different themes.

Step 3: Add the leaderboard to SharePoint

On your SharePoint page, make sure you're in Edit mode. If you're not, click Edit at the top right of the page.

If you don't already have an Embed web part on your page, hover your mouse above or below an existing web part or under the title region, click the Circled plus sign used to add a modern web part to a page

Now select the Embed web part from the list.

You will now see a dialog where you can paste the embed code you copied in step 2.

You should already see the leaderboard in the preview. If not, make sure you have copied the code correctly. Click on the "X" button at the top right.

Finally, click on "REPUBLISH" at the top right of the page. You should now see the leaderboard on your SharePoint page.

Remember, to update the leaderboard, go back to Keepthescore.com and make your changes there. The changes will automatically be reflected on your SharePoint page.

Please give us feedback!

If any of this is unclear, confusing or could be improved, please let us know. We are constantly improving our documentation, and we would love to hear from you. Write us an email.