Conditional content based on tags

Here we describe how to display one of any number of snippets based on the tags an article has. Some comfort playing with code is required, but no coding knowledge is needed - we will give you everything you need, just follow these steps exactly and you'll be fine!

You may have alerts or other content that you only want displayed in certain circumstances. For example, maybe your articles fall into various plan or privacy levels that your customer service employees should be aware of when advising a customer. The uses for this tutorial are versatile and varied.

For the purposes of this article, let's role-play - my knowledge base is for a customer service team for a product that has three plan levels: Basic, Pro and Extreme. Each of the articles in my knowledge base is only relevant to one of these plan levels. Let's go!


N.B. Once you have completed these setup steps, the display of these snippets depends on the tags an article has. Instead of using tags, you could just manually insert the snippet that is relevant to the article each time. This setup is only useful if you already do or plan to use tags to identify articles this way. Also, the use of tags means articles can be bulk edited, and the tags are visible in search results too.

Create your conditional content & tags

Before we do anything else, we should prepare our conditional content and create our tags. 


We are using three tags & snippets here, but you can theoretically have as many as you like.

  1. Start by creating your conditional content, each one in it's own snippet (read more about how to create and use snippets here). We will come back for their merge codes later.
    • Alert boxes work really well for this, but you can include whatever content you like - the snippet WYSIWYG editor has all the same features as our article editor. Images, videos - go wild!
    • You could also use topic articles for your conditional content, if that suits your use case better. Read more about topic articles here.
  2. Now create and add your tags to your articles. In this example, I have three tags for my three plan levels - "Basic Plan", "Pro Plan" and "Extreme Plan". You can learn more about adding and managing tags here.
    • Each article should only have one of these tags. If it has more than one, the last tag in the list is the only one that will be used.
    • The article may have other tags that aren't used for conditional content.

Setup your code

Now that you have your content and tags ready, let's do some coding:


Your code may look slightly different to the screenshots below depending on whether any other changes have been made - feel free to contact us if you're unsure where to place the following code in your KB

  1. Navigate to  Article Custom HTML (head to Settings -> Style, scroll down to the Custom HTML tab, and switch "Body" to "Article")
  2. Right near the top, look for <div class="hg-article-header">, and add the following line of code just below that:
    <div class="article-tags">[template("article-tag-names")]</div>

  3. A little further down, look for [article("body")] and paste in the following code directly below that:
    <div class="tag-conditional-content-container invisible">
      {{snippet.conditionalContentScript}}
      <div class="tag-conditional-content invisible conditional-content-level-1">MERGE CODE GOES HERE</div>
    </div>
    You may have noticed a sneaky merge code in here - don't worry, this doesn't exist yet but we will be creating it in the next section!
  4. Now add and modify a line for each chunk of conditional content you created earlier:
    • Copy the line with MERGE CODE GOES HERE and paste as many below as needed (I needed three so I copied the first one and pasted two more)
    • In the middle of each line you'll see conditional-content-level-1 - on each line, change the number at the end to 2, 3 etc.
    • Replace MERGE CODE GOES HERE with each of your snippet merge codes 
    • The end result should look something like this:
  5. Switch over to the Custom CSS tab and insert this code (right at the bottom is fine, position is not important here):
    /* Tag-based conditional content */
    .tag-conditional-content-container {
      opacity: 100;
      transition: all 0.5s;
    }
    .tag-conditional-content-container.invisible {
      opacity: 0;
    }
    .tag-conditional-content.invisible {
      display: none;
    }
    .article-tags {
      display: none;
    }
  6. Celebrate -  you just wrote HTML and CSS code!

Setup your script

We have our content, our tags, and all the HTML and CSS framework we need. Now comes the magic bit - JavaScript!

  1. Head to Library -> Snippets and create a new snippet
  2. Switch it from WYSIWYG Editor to Code Editor
  3. Name it Conditional Content Script, and make sure the merge code name is conditionalContentScript
  4. Switch from WYSIWYG Editor to Code Editor
  5. Paste in the following code:
    <script>
      $(function() {
    
        /** Modify the tag names below to match your conditional content. You can identify which is which by heading to Settings -> Style, Custom HTML tab, Article, and scrolling down to the conditional content where these snippet merge codes are **/
       
        var contentLevelDefs = [{
          'class': 'conditional-content-level-1',
          'tagName': 'Basic Plan'
        },{
          'class': 'conditional-content-level-2',
          'tagName': 'Pro Plan'
        },{
          'class': 'conditional-content-level-3',
          'tagName': 'Extreme Plan'
        }];
    
        /**** Leave everything below here as is ****/
        var def; // Prepare an empty variable to store the tag definition we need
        var tags = $('.article-tags').text().split(','); // Convert the tag names into an array
        // For each tag in the array we just created, find the tag name that matches one of our definitions.
        // NB If there are multiple tag names that match definitions, the last one to be matched will be used
        tags.forEach(function(tag) {
          var matches = contentLevelDefs.filter(function(o) { return o['tagName'] === tag });
    	  if (matches.length > 0) {
    	    def = matches[0];
    	  }
        });
        // If we matched a definition...
        if (def) {
          // Remove the invisible class from the matched element
          $('.'+def.class).removeClass('invisible');
          // And display the entire container
          $('.tag-conditional-content-container').removeClass('invisible');
        } else {
          // If we didn;t find a match, send an error to the console to help diagnose why this may have happened
          console.log("No conditional content tag definition found for this article's tags");
          console.log('Article tags:', tags);
          console.log('Content level definitions:', contentLevelDefs);
        }
    
      });
    </script>
  6. Modify the "contentLevelDefs" Defs stands for definitions - these create a connection between the HTML and snippet merge codes we pasted in earlier with your tag names . 
    • 'class': this helps the script identify which line of HTML (and in turn, which snippet merge code) we are talking about. You shouldn't need to change this, but you can use it to identify each of the lines by looking at your HTML:
    • 'tagName': update this with the name of the tag that you want to associate with that line of HTML code - if the article has this tag, that line of code (and the snippet it contains) will be displayed. Spelling and grammar is important, it needs to be exact!
    • Formatting is very important here. Make sure your class and tagName are both in speech marks. Refer to the code above if you think you've accidentally deleted something!
    • If you need to add another definition because you have more than three chances of conditional content, ensure formatting remains consistent. Each definition should be separated by a , and it should look something like:
    • {
        'class': 'class-name-from-your-html',
        'tagName': 'Tag Name'
      }
    • If you get stuck here or think you may have messed something up, don't worry! Just contact us and we'll gladly help out.
  7. There's no need to make any other modifications to the script - be sure to leave the rest of it as is.

Conclusion

You should now have your content display based on what tag is present on the article! If your article is showing the wrong content, or none at all, contact us and we'll take a look.