Add the Required Reading flag to your article template

There are two sections displayed in required articles:

1. The required reading flag, usually displayed at the top of the article and/or in the Right Column:
   Sample required reading flag when a reader first views a required article
   
2. The required reading acknowledgement section, usually displayed at the bottom of an article:
   

The required reading flag updates once a reader has checked the box to acknowledge that they've read it:

Sample required reading flag in an "Acknowledged" state

You choose where you'd like the flag to be placed by adding the Required Reading flag merge code into your Custom HTML in Settings > Style.

We recommend adding it in either:

• Your Article template
• Your Right Column template (if you're using a layout that displays a right column in articles!)

Here, we walk through adding the flag merge code to your article template:

1. Go to Settings > Style.
2. Below the Preview Pane, be sure Custom HTML is selected.
3. Select Article from the Custom HTML dropdown.
4. Copy the merge code below. (You can also find the merge code by clicking the -- Select a Merge Code -- dropdown, go to the Article Merge Codes section, and select Required Reading Flag.)

   [article("required_reading_flag")]

5. Paste the merge code into the article template wherever you'd like this flag to appear. Here are some of the most popular placements:
   1. Above the article title:
      Sample required flag displayed above the article title You can achieve this look by adding an extra line between the article header div and the hg-article-title h1 and pasting the merge code in there:
      Flag merge code added between hg-article-header div and hg-article-title h1
   2. Below the article title and above the "Last modified on..." statement:
      
      Sample required flag displayed between the article title and metadata
      You can achieve this look by adding an extra line between the h1 for the article title and the metadata div, and pasting the merge code in there:Flag merge code added between hg-article-title h1 and metadata div
   3. In the same line as the "Last modified on..." statement:
      
      Sample required flag displayed with the other article metadata
      You can achieve this look by pasting your merge code as the first thing inside the metadata div:
      Flag merge code added as the first element within the metadata div
   4. Below the "Last modified on..." statement, directly above the start of the content:
      
      Sample required flag displayed below the article metadata
      You can achieve this look by adding an extra line after the metadata div and before the closing </div> tag and pasting the merge code in there:Flag merge code added between metadata div and closing div tag of hg-article-header
6. Once you've made your changes, be sure to Save. (If you've already enabled Required Reading, you can Preview the changes to see how they look--just be sure you've selected Article from the dropdown above the Preview Pane!)