Embed the Leaderboard on my Site
Prefinery already allows you to include a user-facing leaderboard or waitlist in your campaign by adding the {{page.leaderboard}} variable in the referral page. The referral page is what users by default see after submitting your form, and is also where they can get/retrieve their referral link as well as access to sharing options and referral stats. This personalized leaderboard widget though is only accessible by users who have signed up already.
If you're looking to display a public leaderboard on your website which all visitors, signed-up users or not, can see then you can embed the public leaderboard widget on your page. Below is an example of how it looks:
The board can display up to top 10 users. In comparison, the personalized leaderboard seen on the signed-up user's referral page only shows 9 + the user themselves.
The users' first names and last name initial, if available, are shown. Otherwise, their email address is used instead, partially obfuscated for privacy reasons.
Installation
Just like with the embedded signup form or referral page, this widget requires that you've already installed the Prefinery JavaScript Snippet on your website.
You can then embed the leaderboard widget on your page by adding the following code where you want the leaderboard to appear:
<div class="prefinery-leaderboard-embed"></div>
...or if you'd rather use our JavaScript Web API, you use the embedLeaderboard method like as follows:
prefinery('embedLeaderboard', {dom_id: 'embed-here'});
Customization
Both the public leaderboard and signed-up user's personalized leaderboard shares the same settings like starting position and algorithm as set on your project dashboard via Referral Page > Settings page.
The leaderboard column headers can also be customized from the same page. Make sure to scroll down to the bottom of the page and Save your changes when done.
As for changing the look of the leaderboard table, you can use custom CSS by targeting dom elements under the ID #pfy-leaderboard . For example, to achieve the below look...
...the custom CSS in your Head Code under Integrations > Code Injection would've been like as follows:
