How to Embed a Leaderboard on your Website

Integrating a leaderboard into your website is a great way to showcase the people interacting the most at your event—on your website, on a sponsor page, or inside your event’s app. It works just like any other widget: customize a design, copy the embed code, and paste it into your site.

You can create as many leaderboard embed designs as you’d like, each with its own styling and its own embed code, so one can match your homepage while another fills a screen in your event app.

Where to Find It

From your wall’s dashboard, click Leaderboards in the left menu, then click the More (•••) Menu at the top right of the page. If you haven’t created an embed yet, choose Embed Leaderboard; once you have one or more designs, that same menu item becomes Manage Embeds.

That takes you to the Leaderboard Embeds page, where every design you create appears as a tile. Click any tile to edit that design, or click Create Another Design to add a new one.

Creating a Design

Give your design a name—it’s only shown to you, so most people name it for where it’ll live on their site (“homepage”, “sponsor page”, “event app”, and so on). The editor is organized into three tabs:

• Design Options — what the leaderboard shows and how it looks: the leaderboard type and display period, how many people to show, the title, fonts, colors, avatars, and language.
• Embed Settings — how it behaves on your page: the embed’s width, whether it auto-expands its height to fit, and whether the background is transparent so your website’s styling shows through.
• Global Settings — settings that apply to every design you create for this wall.

Customization Options

• Leaderboard Type (Interactions, Followers, Engagement, or Custom—with your own name for the metric)
• Leaderboard Display Period (reset daily, all time, or weekly for Ongoing Social Walls and Website Social Walls)
• Number of people to show (1–100)
• Real-time updates, so the leaderboard changes without a page refresh
• Leaderboard title (the text and its position, or hide it entirely)
• Fonts (our curated collection, or bring your own from Google Fonts, Adobe Fonts, or Monotype) and an overall font-size scale
• Colors for each entry’s background and text, entry borders and corner radius, and dividers between entries
• Avatars (show or hide them, sizing, borders, and corner radius for circles or squares)
• Clickable people, so visitors can click through to a person’s profile on the network they posted from
• Language (English, Arabic, German, Spanish, French, Italian, Japanese, Dutch, Portuguese, or Russian) with left-to-right or right-to-left text direction
• Custom code (HTML/CSS/Javascript), available under the Advanced Editor option in the More (•••) Menu if you purchased or have access to the Custom Code option when you activated the wall

Adding It to Your Website

When your design is ready, click Save Design, then click Get Embed Code at the top right. Copy the code snippet and paste it into your website’s HTML wherever you want the leaderboard to appear—that’s it.

The same window also gives you the design’s direct URL. That’s handy anywhere you can’t paste HTML but can show a web page—like an iframe you already control, or a webview inside your event app.

Using WordPress?

You don’t even need the embed code. Paste the design’s direct URL onto its own line in the WordPress editor, and WordPress will embed the leaderboard for you automatically.

Making Changes Later

Your embed code doesn’t change when you edit a design. Head back to Leaderboards → More (•••) Menu → Manage Embeds, click the design’s tile, make your changes, and save—your website will show the updated design within about 30 seconds, no code changes needed. Each design keeps its own embed code, so you only need to touch your site’s HTML when you’re adding a brand-new design.