Conditional content based on tags

Last Modified on 11/18/2025 2:10 pm EST

Here we describe how to display one of any number of snippets based on the tags an article has.

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.

For example, let's say 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. I'd like to display some information about each plan at the top of the page.

One way to do this is to create snippets with text about each plan level and to add those snippets to the individual articles.

A more advanced way is to create the snippets but to tie the logic about whether to display those snippets to the tags an article has. We walk through this advanced setup below. It has several advantages over the manually-inserting-snippets approach:

If we're already using tags, this can be a natural part of our workflow.
You can Bulk edit articles in Manage to add tags. You can't bulk edit to add snippets.
Tags are visible in search results and can be used in Tag search. Snippets aren't displayed in search results and have no search filtering abilities.

The overall steps to set this up are:

Create the conditional content you want to display in individual snippets. In our example, this is the text for each plan level. Refer to Step 1: Create snippets for your conditional content.
Create tags for each snippet. Refer to Step 2: Create tags to go with your snippets and add to articles.
Edit your Article HTML template to include all your snippet merge codes. Refer to Step 3: Add code to your Article HTML template.
Add some Custom CSS to style the sections we just added. Refer to Step 4: Add CSS to style those additions.
Create a script snippet that will look at a given article's tags and determine which snippet's content to display. Refer to Step 5: Create your script snippet.
Add your script snippet to your Article HTML template. Refer to Step 6: Add script snippet to Style.

Each step is explained in detail below.

Step 1: Create snippets for your conditional content

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

Example setup
We use three tags and snippets here, to match our three plan levels. You can use as many as you like.

For each piece of conditional content, create a separate snippet. If you're new to creating snippets, refer to Create a snippet for more detailed instructions.
- Alert boxes work really well for this, but you can include whatever content you like. The snippet's WYSIWYG editor has all the same features as our article editor.
- You could also use topic articles for your conditional content, if that suits your use case better.
- For my example, I've created three snippets: planContent-Basic, planContent-Pro, and planContent-Extreme.
Once your snippets are created, copy each snippet's merge code to a text editor of your choice. We'll need them later.

Step 2: Create tags to go with your snippets and add to articles

Now that our snippets exist, we'll create tags for our authors to add to content that will correspond to the snippets.

In the lefthand navigation, go to Tags. The Tags page opens.
Select Create to add a new tag. Create a tag for each of your conditional content snippets.
1. For example, I create three tags to match my three plan levels and snippets: Basic plan, Pro plan, and Extreme plan.
2. If you're new to working with tags, refer to Tags for more information.
Save your tag names to a text editor. You'll need them later.

With your tags, created, add the appropriate tag to each article, either by editing the article in the article editor or using the Bulk edit articles in Manage option.

Keep these guidelines in mind:

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. They won't impact how all of this works.

With your tags created and added to at least a few articles, the next step is to add some code to our Article HTML template in Customize > Style.

Step 3: Add code to your Article HTML template

Here, we'll add some Custom HTML to our Article HTML template to make article tags available in articles and to add our snippet merge codes.

This helps pull in those pieces of content into all your articles so that the tags and the script will select which of the snippets to display in each article.

To do so:

Go to Customize > Style (HTML & CSS).
In the Customize HTML, CSS, and JS section, select Custom HTML.
Select Article from the Select HTML section to edit dropdown.

Your Article Custom HTML will begin with a section like this:

<div class="hg-article">
    <div class="hg-article-header">
        <h1 class="hg-article-title">[article("title")][article("action_icons")]</h1>
        <div class="metadata">
            [article("required_reading_flag")]
            [translation("article:last-modified-on-label")] 
            [article("date_modified")]
        </div>
    </div>

Add an empty row immediately after <div class="hg-article-header"> on row 2 in our sample. Copy the code below and paste it in just below that:
```
<div class="article-tags">[template("article-tag-names")]</div>
```

So the code should now look like this:

<div class="hg-article">
    <div class="hg-article-header">
    <div class="article-tags">[template("article-tag-names")]</div>
        <h1 class="hg-article-title">[article("title")][article("action_icons")]</h1>
        <div class="metadata">
            [article("required_reading_flag")]
            [translation("article:last-modified-on-label")] 
            [article("date_modified")]
        </div>
    </div>

Next, look for this section in your code:

    <div class="hg-article-body">
        [article("body")]    
    </div>

Add an empty line after [article("body")].

Copy the code below and paste it in on that empty line

<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 class="tag-conditional-content invisible conditional-content-level-2">MERGE CODE GOES HERE</div>
  <div class="tag-conditional-content invisible conditional-content-level-3">MERGE CODE GOES HERE</div>
</div>

So your code should now look like this:

<div class="hg-article>
  <div class="hg-article-header">
    <div class="article-tags">[template("article-tag-names")]</div>
        <h1 class="hg-article-title">[article("title")][article("action_icons")]</h1>
        <div class="metadata">
            [article("required_reading_flag")]
            [translation("article:last-modified-on-label")]
            [article("date_modified")]
        </div>
 </div>
 <div class="hg-article-body">
        [article("body")]
    <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 class="tag-conditional-content invisible conditional-content-level-2">MERGE CODE GOES HERE</div>
      <div class="tag-conditional-content invisible conditional-content-level-3">MERGE CODE GOES HERE</div>
    </div>
 </div>

In row 15, replace the MERGE CODES GOES HERE text with the snippet merge code value for your first piece of content. In our example, this is the snippet for our Basic Plan: {{snippet.planContent-Basic}}
In row 16, replace the MERGE CODES GOES HERE text with the snippet merge code value for your second piece of content. In our example, this is the snippet for our Pro Plan: {{snippet.planContent-Pro}}
In row 17, replace the MERGE CODES GOES HERE with the snippet merge code value for your third piece of content. In our example, this is the snippet for our Extreme Plan: {{snippet.planContent-Extreme}}

So your final code for this section might look a bit like this:

    <div class="hg-article-body">
        [article("body")]
    <div class="tag-conditional-content-container invisible">
      {{snippet.conditionalContentScript}}
      <div class="tag-conditional-content invisible conditional-content-level-1">{{snippet.planContent-Basic}}</div>
      <div class="tag-conditional-content invisible conditional-content-level-2">{{snippet.planContent-Pro}}</div>
      <div class="tag-conditional-content invisible conditional-content-level-3">{{snippet.planContent-Extreme}}</div>
    </div>
    </div>

If you only have two levels of content, remove the third row. If you have more than three pieces of conditional content, copy row three and paste it in after itself, then adjust to conditional-content-level-4 and add in the snippet merge code for that content. Repeat as needed for any additional levels.
Take note of which snippet you put at each conditional-content-level. You'll need it later.
Be sure to Save your changes.

Step 4: Add CSS to style those additions

Still on Customize > Style, in the Customize HTML, CSS, and JS section, select Custom CSS.
Copy the code below and paste it anywhere in your Custom CSS:

/* Tag-based conditional content */
.tag-conditional-content-container {
  opacity: 100;
  transition: all 0.5s;
}
/* When tag-conditional-content has invisible class, change opacity */
.tag-conditional-content-container.invisible {
  opacity: 0;
}
/* When tag-conditional-content has invisible class, don't display */
.tag-conditional-content.invisible {
  display: none;
}
/* Hide article tags section from display */
.article-tags {
  display: none;
}

Be sure to Save your changes once you're done.

Step 5: Create your script snippet

We have our content, our tags, and all the HTML and CSS framework we need. Now we just need a script to determine what to do with all of it.

To create the script:

In the lefthand navigation, go to Snippets. The Snippets page opens.
Select + Create New Snippet. If you're unfamiliar with snippets, refer to Create a new snippet for more detailed instructions.
Enter a Snippet Name of Conditional Content Script. If you use a different name, update the snippet.conditionalContentScript merge code we added in Step 3.
Enter a Snippet Description, like Used in Customize > Style > Custom HTML > Article to display conditional content snippets based on tags. Don't use anywhere else.
Select the Snippet Content dropdown and select Code Editor:

Copy the code below and paste it into the Code Editor.

<script>
  $(function() {
    /** Modify the tag names below to match your conditional content. You can identify which is which by heading to Customize > Style (HTML & CSS) > Custom HTML > Article, and scrolling down to the conditional content where these snippet merge codes are **/
   
    var contentLevelDefs = [{
      'class': 'conditional-content-level-1',
      'tagName': 'first-level-tag-name'
    },{
      'class': 'conditional-content-level-2',
      'tagName': 'second-level-tag-name'
    },{
      'class': 'conditional-content-level-3',
      'tagName': 'third-level-tag-name'
    }];

    /**** 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>

In rows 6 and 7, make sure the class matches conditional-content-level-1. Change the tagName to match the tag you want to tie to the snippet listed here. So for example, my snippet for this level is planContent-Basic, so I'll update to the tag I created for this: Basic plan.
1. Be sure you've captured the tag name exactly as it appears in the Tags page. Spelling, punctuation, capitalization, and spacing must be an exact match.
2. Be sure to keep the class and tagName in 'single quotation marks'.
Repeat those some changes for your level-2 content in rows 9 and 10.
Repeat those same changes for your level-3 content in rows 12 and 13. If you didn't need level-3, delete rows 11-13. If you added more levels, copy one of the other classes and paste it in, and adjust to match the content-level and tag names for the corresponding snippet.

So for our example, our final code might look like this:

    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'
    }];

Save your snippet.
Copy the snippet's Merge Code Value.

Step 6: Add script snippet to Style

With our script snippet created and the merge code value copied, we now complete our final step: adding that snippet merge code to our Style settings.

Go to Customize > Style (HTML & CSS).
In the Customize HTML, CSS, and JS section, select Custom HTML.
Select Article from the Select HTML section to edit dropdown.
Paste your snippet merge code in anywhere in the Article Custom HTML edit pane.
Save your changes.

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.

Was this article helpful?

Knowledge 1 Knowledge 2 Knowledge From