Trailhead Widget for your Website

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 25 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.

Code Updated on June 8 2019  

  1. Profile Name and Image links to Trailhead Profile
  2. Performance improvement of Widget
  3. Badge information will sync with Trailhead every 60 minutes

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 to in 2 & 5 lines)

Feel free to provide feedback and suggestions !!!

Related posts

25 thoughts on “Trailhead Widget for your Website”

      1. I have gone through your Salesforce Single Sign On (SSO) using Janrain blog. I have tried to Salesforce Single Sign On (SSO) with Instagram but I got the error NO_ACCESS:Unable to find a user. Can you please help me into this.

  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?

    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.
    Bvenkat Jeewesh

  3. Hi Jitendra,

    I am trying to incorporate this code in my website code but all I am getting is the rotating spinner. Help!!

    All I am doing is copy pasting the given few lines in my code and replacing id with my profileID. Is that it?

    Honey Mehta

Leave a Reply to Jitendra Cancel reply

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