Jitendra Zaa

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 https://jitendrazaa.com to https://jitendrazaa.com in 2 & 5 lines)

Feel free to provide feedback and suggestions !!!

Posted

in

by

Jitendra

Tags:

Related Posts

Comments

25 responses to “Trailhead Widget for your Website”

  1. Santanu Boral Avatar
    Santanu Boral

    I have incorporated Trailhead Widget at my website santanuboral.blogspot.com.

    It looks nice! Thank you.

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

      Thanks Santanu

      Reply
      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.

        Reply
    2. JP Avatar
      JP

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

      Reply
  2. Chirag Mehta Avatar
    Chirag Mehta

    nice stuff!

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

      Thanks Chirag

      Reply
  3. Rahul Gupta Avatar
    Rahul Gupta

    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?

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

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

      Reply
  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?

    Thanks,
    Amit Singh

    Reply
    1. Jitendra Zaa Avatar
      Jitendra Zaa

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

      Reply
      1. dandamudi Avatar
        dandamudi

        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

        Reply
        1. Jitendra Zaa Avatar
          Jitendra Zaa

          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

          Reply
        2. Jitendra Avatar
          Jitendra

          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.

          Reply
      2. Jitendra Avatar
        Jitendra

        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.

        Reply
    2. sivadandamudi Avatar
      sivadandamudi

      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

      Reply
  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.
    Thnx,
    Bvenkat Jeewesh

    Reply
  6. tanvi Avatar
    tanvi

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

    Reply
  7. John Knight Avatar
    John Knight

    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!

    Reply
  8. Giới thiệu về Salesforce – Hiep Lee

    […] Get Widget for your blog […]

    Reply
  9. Sakthivel Madesh Avatar
    Sakthivel Madesh

    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

    Reply
    1. Jitendra Avatar
      Jitendra

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

      Reply
      1. Sakthivel Madesh Avatar
        Sakthivel Madesh

        Yes. Thanks for prompt response 🙂

        Reply
  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?

    Thanks
    Honey Mehta

    Reply
    1. Jitendra Avatar
      Jitendra

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

      Reply
  11. Abhishake Chandra Avatar
    Abhishake Chandra

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

    Reply

Leave a Reply

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

Ajax AngularJs ANT ANT Migration Tool Apex ASP.NET best practices C# continuous integration CSS DataLoader Eclipse EGit Flow Git Google Heroku HTML Integration Interview Questions J2EE JAVA Javascript JQuery Lightning component Lightning Web Component LWC NodeJs OAuth PHP Release Salesforce Salesforce DX SAP SEO sfdx SQL SQL Server Students Trailhead Video Tutorial Visualforce Windows XP WordPress XML

Discover more from Jitendra Zaa

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

Continue Reading