Use different logos for different reader groups

Some knowledge bases use different Reader Groups to show different content to different readers.

On occasion, we've been asked if it's possible to show a different logo in the upper left depending on reader group membership. The short answer is: yes.

The longer answer is: you'll need to use a script to do this.

To do so:

1. In the left navigation, select Files.
2. Upload all the logos you want to use here, using + Add Files. Refer to Add files in bulk for more detailed instructions.
3. Once you've uploaded your logos, copy the URL for each logo and add it to a text editor--you'll need it later. Refer to Find a file's URL for more complete steps.
4. In the left navigation, go to Customize > Style (HTML & CSS).
5. In the Customize HTML, CSS, and JS section, select Custom HTML.
6. In the Select HTML section to edit dropdown, select Body.
7. Copy the code below and paste it into the bottom of the Body editor. Here, we use three groups, but you can use as few as two and as many as you'd like:
   

   <script>
     //Show different logos depending on which reader group a reader belongs to
     $(function(){
       //Get which groups current reader belongs to
       var groups = '[reader("groups")]';
       
       //Switch logo for Group1 where "Group1" is the exact name of the reader group. Update to your group name.
       if(groups.indexOf("Group1") >= 0)
       {
         //Specify the image URL for Group1 and switch
            var src = "//dyzz9obi78pm5.cloudfront.net/app/image/id/{yourimageid}/n/{yourimagename.png}";
            $('.navbar-brand img').attr("src", src);
       }
       
       //Switch logo for Group2 where "Group2" is the exact name of the reader group. Update to your group name.
       if(groups.indexOf("Group2") >= 0)
       {
         //Specify the image URL for Group2 and switch
            var src = "//dyzz9obi78pm5.cloudfront.net/app/image/id/{yourimageid}/n/{yourimagename.png}";
            $('.navbar-brand img').attr("src", src);
       }
       
       //Switch logo for Group3 where "Group3" is the exact name of the reader group. Update to your group name.
       if(groups.indexOf("Group3") >= 0)
       {
         //Specify the image URL for Group3 and switch
            var src = "//dyzz9obi78pm5.cloudfront.net/app/image/id/{yourimageid}/n/{yourimagename.png}";
            $('.navbar-brand img').attr("src", src);
       }
       
     });
   </script>

8. In row 8, replace "Group1" with the exact name of your first reader group as it appears in Account > Readers > Groups. Keep the group name in quotes. So, for example, if our group name is Enterprise Customers, we'd use "Enterprise Customers".
9. In row 11, replace the URL listed in "quotes" with the icon file URL for the icon you want displayed to this group you copied in step 3.
10. In row 16, replace "Group2" with the exact name of your second reader group as it appears in Account > Readers > Groups. Keep the group name in quotes.
11. In row 19, replace the URL listed in "quotes" with the icon file URL for the icon you want displayed to this group you copied in step 3.
12. If you're not using a third group, delete rows 22-29.
13. If you're using a third group, in row 24, replace "Group3" with the exact name of your second reader group as it appears in Account > Readers > Groups and replace the file URL in row 27.
14. If you're using more than three groups, copy rows 22-29 and paste them to add additional groups. Just be sure you update the group name and file URL for each.
    
15. Once you're done, be sure to Save your changes.

For example, here we have two groups called "Support" and "Production":

<script>
  //Show different logos depending on which reader group a reader belongs to
  $(function(){
    //Get which groups current reader belongs to
    var groups = '[reader("groups")]';
    
    //Switch logo for Group1 where "Group1" is the exact name of the reader group. Update to your group name.
    if(groups.indexOf("Support") >= 0)
    {
      //Specify the image URL for Group1 and switch
         var src = "//dyzz9obi78pm5.cloudfront.net/app/image/id/6584bcb73f0dc5660063732a/n/newsletter-10.svg";
         $('.navbar-brand img').attr("src", src);
    }
    
    //Switch logo for Group2 where "Group2" is the exact name of the reader group. Update to your group name.
    if(groups.indexOf("Production") >= 0)
    {
      //Specify the image URL for Group2 and switch
         var src = "//dyzz9obi78pm5.cloudfront.net/app/image/id/63eae5290c73bd71f6358b15/n/valentines-linus.svg";
         $('.navbar-brand img').attr("src", src);
    }
    
  });
</script>

To test the script:

1. Select View "knowledge base name".
2. Use the View as header option to toggle between reader groups. Refer to Test reader group access for more detailed instructions.