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. Go to Library > Files.
2. Upload all the logos you want to use here, using the + Add Files button.
3. Once you've uploaded your logos, you'll need to get the URL for each of them. See Find a file's URL for more complete steps. As you copy each URL, save it to a text editor--we'll need it later!
4. Go to Settings > Style.
5. Below the Preview Pane, be sure that Custom HTML is selected.
6. In the Custom HTML dropdown, be sure Body is selected.
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 7, replace "Group1" with the exact name of your first reader group, as it appears in Your Account > Readers > Groups.
9. In row 10, replace the URL listed in "quotes" with the URL you copied from your File Library for the icon you'd like displayed for this group.
10. In row 15, replace "Group 2" with the exact name of your second reader group, as it appears in Your Account > Readers > Groups.
11. In row 18, replace the URL listed in "quotes" with the URL you copied from your File Library for the icon you'd like displayed for this group.
12. If you're using a third group, in row  23, replace "Group3" with the exact name of your second reader group, as it appears in Your Account > Readers > Groups, and replace the file URL in row 26. If you're not using a third group, you can delete rows 22-28.
13. If you're using more than three groups, you can copy rows 22-28 and paste them to add additional groups. Just be sure you update the group name in each and the URL of the file.
    
14. Once you're done, be sure to Save your changes.

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

You can test that this script is working as expected by selecting "View KB" from the top navigation. This will open your knowledge base with the author footer, and you can use the Change Reader Groups option to toggle to see what each group will see. See Test reader group access for complete steps!