Different Logos for Different Reader Groups

Here is how to change the site logo depending on reader group. 

  1. Upload all logos to the file library under Library > Files.
  2. Paste the following code into the bottom of your Body HTML under Settings > Styles > Custom HTML > Body. 
    <script>
      $(function(){
        //Get which groups current reader belongs to
        var groups = '[ reader("groups") ]'; //remove spaces between brackets 
        
        //Switch logo for Group1 where "Group1" is the exact name of the reader group
        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
        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
        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>
  3. Remove the spaces in the reader groups merge code. I added them so the merge code wouldn't evaluate in this article.
  4. Replace "Group1", "Group2", and "Group3" with the names of your groups and update the image URLs to match the path of the logo images from your library.
  5. Save and test it out!