Trailhead Widget for websites

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.

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 responses to “Trailhead Widget for your Website”

  1. Santanu Boral Avatar
    Santanu Boral

    I have incorporated Trailhead Widget at my website

    It looks nice! Thank you.

    1. Jitendra Zaa Avatar

      Thanks Santanu

      1. Amol Gaikwad Avatar
        Amol Gaikwad

        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.

    2. JP Avatar

      This seems to have broken. It was working till last month. Can you please check and let me know.

  2. Chirag Mehta Avatar
    Chirag Mehta

    nice stuff!

    1. Jitendra Zaa Avatar

      Thanks Chirag

  3. Rahul Gupta Avatar
    Rahul Gupta

    What about the Profile that has done Vanity URL.
    I dont have profile id.
    It has something like this so what to do in this case?

    1. Jitendra Zaa Avatar

      Vanity URL will work. Instead of userid , enter your vanity name after last slash

  4. Amit Singh Avatar
    Amit Singh

    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. Jitendra Zaa Avatar

      Hi Amit, whats code you are using. Can you paste it here.

      1. dandamudi Avatar

        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. Jitendra Zaa Avatar

          Ok. Can you create a file on your local system and save it as .html extension with your code ? If it works, that means its issue with hosting

        2. Jitendra Avatar

          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. Jitendra Avatar

        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. sivadandamudi Avatar

      i think Free site is not support to use the java script tag, it’s support Business Plan only, me also same issue , found this after i research

  5. Investor Portal Avatar
    Investor Portal

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

  6. tanvi Avatar

    Hi Jitendra,
    Nice work. I am just did you use API? how you get the x-api-key?

  7. John Knight Avatar

    This is awesome! I just added it to my Squarespace website using the HTML code blog with no issues here:


  8. […] Get Widget for your blog […]

  9. Sakthivel Madesh Avatar

    Hi Jitendra,

    Great work! I added my website into my widget, its working perfectly!

    If possible, can you link with trailhead profile upon clicking inside any where? like photo profile, etc.

    Sakthivel Madesh

    1. Jitendra Avatar

      Done. Name and Image both will link to Trailhead Profile. Thanks for feedback.

      1. Sakthivel Madesh Avatar

        Yes. Thanks for prompt response 🙂

  10. Honey Mehta Avatar
    Honey Mehta

    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

    1. Jitendra Avatar

      Can you share your sample code and website where you are trying embed it ?

  11. Abhishake Chandra Avatar

    Hi Jitendra, above code is not working? Please help.

Leave a Reply

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

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading