Trailhead Widget for your Website

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 15 Comments on Trailhead Widget for your Website

Show your hard earned badges by adding Trailhead Widget on your Website or Blog

Trailhead Widget for websites

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.

Salesforce Trailhead Profile
Salesforce Trailhead Profile
Salesforce Trailhead Profile URL
Salesforce Trailhead Profile URL

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

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.

Salesforce Trailhead Widget Code
Salesforce Trailhead Widget Code (In above image, replace https://jitendrazaa.com to https://jitendrazaa.com in 2 & 5 lines)

Feel free to provide feedback and suggestions !!!

Related posts

15 thoughts on “Trailhead Widget for your Website”

  1. Hi Jitendra,

    This is post is having awesome content. But while using this code into my wordpress site I am not able to add the widget it just showing me the spinner. My site is using free version of the wordpress is that the Problem?

    Thanks,
    Amit Singh

      1. Hi Jithendra,

        i also had same problem, i used same code which you provided in above replace with my profile id in my wordpress site , tried with text/Custom html Widgets both are had same problem, i am getting spinner only

        1. It seems there was issue between http and https – mixed content. You site might be on https and my site had URL of http. Its been fixed now, please use updated code.

      2. It seems there was issue between http and https – mixed content. You site might be on https and my site had URL of http. Its been fixed now, please use updated code.

  2. Hi Jitendra,
    What is Data Protection and Privacy in Spring 18. How can use and Track Data . Plz Help.
    Thnx,
    Bvenkat Jeewesh

Leave a Reply to tanvi Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.