0

In Communities, within the template, when you select a Company logo, clicking on the logo will always redirect you back to the communtiy home page. I am trying to figure out how to change this to redirect to a new weblink. Has anyone else ever done this? If so, how did you go about it?

4 Answers 4

3

There might be alternatives, but the below appraoch worked for me.

  1. navigate to the community.
  2. Open the community experience builder
  3. Go to settings
  4. Choose Advanced Scroll down to Head Markup and click on Edit Head Markup and in the opened window try the below script:

< script > window.onload = function() {document.getElementsByClassName(""logoImage "")[0].addEventListener(""click "",function() {location.href = ""https: //www.google.com""; });}< /script >

This helped to navigate to the external URL. Note: As I am using the www.google.com , this site needs to be add to the CSP trusted sites(Setup> CSP Trusted Sites> new > add the name and the URL that you are using> click save)

You can test this implemented functionality with my community url: https://anu98pcomm-developer-edition.ap16.force.com

I have used this post for Reference

5
  • Hi Anutej, i pasted the script but not accepting.
    – Amy
    Commented Sep 15, 2020 at 18:36
  • Can you try setting the CSP policy to relaxed and check if it works? to change CSP settings to relaxed follow this path [within the experience builder of the community go to settings> select security> scroll down to Content Security Policy (CSP) > select Relaxed CSP] let me know if it works
    – Anutej
    Commented Sep 16, 2020 at 6:18
  • Hi Anutej, i really appreciate your help. i did the same what you mentioned above but when i am saving script, all components and home page turned blank and when i removed the script it came back. Don't know what to do.
    – Amy
    Commented Sep 16, 2020 at 14:49
  • In the sandbox where you are trying this script, can you check if there are any errors that are present in the console logs?
    – Anutej
    Commented Sep 18, 2020 at 8:28
  • Hi Anutej, i am trying this script in edit head markup in community.
    – Amy
    Commented Sep 19, 2020 at 15:09
1

The script below worked for me.

Settings -> Advanced -> Head markup

<script>
function setHrefOnLogo() {

    // Checking if the Logo element is added on DOM

    if(document.getElementsByClassName("themeLogo")[0]){

        // Using Event Stop propogation to make the redirection lag free else somtimes it redirects to community homepage and then to the specified URL

        document.getElementsByClassName("themeLogo")[0].addEventListener("click",function() {event.stopPropagation(); location.href = "https://www.google.com/"; });

        // Clear Interval once listener added to the Logo

        clearInterval(myIntervalFunc);

    }

};

// Calling a method every 100ms to set Redirection on Logo as soon as the Logo component is loaded on DOM.

var myIntervalFunc = setInterval(setHrefOnLogo, 50);

setHrefOnLogo();

let lastUrl = location.href;

// Using Mutation to reapply the redirection (incase its overwritten by Salesforce) whenever the URL changes on community. 

new MutationObserver(() => {

  const url = location.href;

  if (url !== lastUrl) {
    lastUrl = url;

    onUrlChange();

  }

}).observe(document, {subtree: true, childList: true});

function onUrlChange() {

    document.getElementsByClassName("themeLogo")[0].addEventListener("click",function() {event.stopPropagation();location.href = "https://www.google.com/";});

}
</script>
0

I tried the solution of Anutej and it didn't work for me, so I did the following to make it work; So instead of using plain JS which somehow didn't work out for me, I've decided to implement Jquery.

Place this in Settings --> Advanced --> Head markup

    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <script>
        $( document ).ready(function() {
            setTimeout(function() { 
                $('.forceCommunityThemeLogo').attr("href", "https://www.google.com");
            }, 1000);
    });
    </script>

So basically what I did:

  1. Load jQuery and whitelist the URL to the CSP trusted sites (Setup> CSP Trusted Sites> new > add the name and the URL that you are using> click save)
  2. Whitelisted my url (in this case https://www.google.com in the CSP trused sites)
  3. Waited for the document to be ready with $( document ).ready.
  4. Used a timeout of 1 sec to wait for the page to finish loading so there will be no conflict with Salesforce.
  5. Set the Href attribute of the logo to "https://www.google.com".

Now when you visit the page, you'll be able to navigate to an external URL on your Salesforce Knowledgebase logo.

0

I tried both of the solutions of Marvinoo_ and Anutej but it didn't work for my Salesforce B2B Lightning Storefront, as I wanted to redirect the users to a different page outside of Salesforce.

I faced lag & inconsistent behavior on doing the other solutions so I came up with this solution, it might help you guys as well.

Inconsistent Behavior included external redirection on logo not being set sometimes on page load, on tab change in the community the logo redirection was overwritten by Salesforce standard component, going backward and forward in history messed up the logo redirection

Here are the steps to add the script to the Community

  1. Navigate to the community.
  2. Open the Community Experience Builder
  3. Go to Settings
  4. Choose Advanced Scroll down to Head Markup and click on Edit Head Markup and in the opened window try the below script (in tag):

 
    
    function setHrefOnLogo() {
        // Checking if the Logo element is added on DOM
        if(document.getElementsByClassName("logoImage" )[0]){
            // Using Event Stop propogation to make the redirection lag free else somtimes it redirects to community homepage and then to the specified URL
            document.getElementsByClassName("logoImage" )[0].addEventListener("click",function() {event.stopPropagation();location.href = "https://google.com/"; });
            // Clear Interval once listener added to the Logo
            clearInterval(myIntervalFunc);
        }
    };
    
    // Calling a method every 100ms to set Redirection on Logo as soon as the Logo component is loaded on DOM.
    var myIntervalFunc = setInterval(setHrefOnLogo, 100);
      
    let lastUrl = location.href;
    // Using Mutation to reapply the redirection (incase its overwritten by Salesforce) whenever the URL changes on community. 
    new MutationObserver(() => {
      const url = location.href;
      if (url !== lastUrl) {
        lastUrl = url;
        onUrlChange();
      }
    }).observe(document, {subtree: true, childList: true});

    function onUrlChange() {
        document.getElementsByClassName("logoImage" )[0].addEventListener("click",function() {event.stopPropagation();location.href = "https://google.com/"; });
    }

 

Remember you need to add the domain to the CSP as well in order to make it work.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .