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
- Profile Name and Image links to Trailhead Profile
- Performance improvement of Widget
- 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.
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.
Feel free to provide feedback and suggestions !!!
I have incorporated Trailhead Widget at my website santanuboral.blogspot.com.
It looks nice! Thank you.
Thanks Santanu
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.
nice stuff!
Thanks Chirag
What about the Profile that has done Vanity URL.
I dont have profile id.
https://trailhead.salesforce.com/en/me/rahulgupta
It has something like this so what to do in this case?
Vanity URL will work. Instead of userid , enter your vanity name after last slash
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
Hi Amit, whats code you are using. Can you paste it here.
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
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
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.
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.
i think Free wordpress.com 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
Hi Jitendra,
What is Data Protection and Privacy in Spring 18. How can use and Track Data . Plz Help.
Thnx,
Bvenkat Jeewesh
Hi Jitendra,
Nice work. I am just did you use API? how you get the x-api-key?
thanks
This is awesome! I just added it to my Squarespace website using the HTML code blog with no issues here: https://www.johnknight.tech/blog/salesforce-trailblazer-john-knight
Thanks!
Hi Jitendra,
Great work! I added my theblogreaders.com website into my widget, its working perfectly!
http://theblogreaders.com/
If possible, can you link with trailhead profile upon clicking inside any where? like photo profile, etc.
Thanks,
Sakthivel Madesh
Done. Name and Image both will link to Trailhead Profile. Thanks for feedback.
Yes. Thanks for prompt response 🙂
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?
Thanks
Honey Mehta
Can you share your sample code and website where you are trying embed it ?