How to add a live leaderboard to Microsoft SharePoint

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.

⚠️ 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 paid membership on Keepthescore.com. You require a PRO plan to use this feature.

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 entry to the list "Allow iframes from this domain": keepthescore.com.

Then 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 by clicking the button above and go through the wizard until you can see the final leaderboard with the "Control Panel" at the top.
2. Click on the "SHARE" 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 COPY TO CLIPBOARD 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.