Trailhead Widget for your Website

Here it comes, Christmas goodies for Trailhead lovers. If you own WordPress, blogspot or any website, use this Trailhead widget to show and brag about all your badges. Badges,  which you have earned by completing challenges on sleepless nights, on airport, during commute or over the weekends. What could be the best way to show Trailhead profile summary other than widget?

Will it impact performance of my website

All computations are done outside of your website and Javascript execution is asynchronous, which will make sure website rendering is not blocked by this widget.

How to use it

Step 1

Identify the URL of your Trailhead profile. Make sure you are not copying URL of success community. Below image shows steps to get Trailhead URL. We just need end part of URL, after last forward slash.

As shown in above image we just need text after last forward slash which is 005….7hAAA

Step 2

As shown in below image, just replace white part by your ProfileId and paste code  in your website. div tag would be replaced by widget content.

<div id="trailhead-widget-container">
    <img src="Your image source" />
</div>
<script async src="https://your domain/Trailhead.php?profileId=your id" type="text/javascript">  </script>