How can I configure my HelpNDoc HTML build to use Microsoft Clarity?

Solution

I am going to assume that you already have some knowledge of working with custom templates in HelpNDoc. You can learn more about templates here.

Start by editing the topics.pas.html file:

Locate this bit in the file:

<!-- Content style -->
<link href="css/hnd.content.css" rel="stylesheet" />

You need to add a new bit of code just before. For example:

<!-- Microsoft Clarity -->
<script type="text/javascript">
  (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
  })(window, document, "clarity", "script", "~~~~~~~~~~");
</script>

Microsoft Clarity will provide you with the actual code to use. It will look like the above code, except "~~~~~~~~~~" will be you personal ID value.

Save your script and now your HTML build will have support for Microsoft Clarity.

Using Template Variables

It is possible to improve the template and make it work on multiple projects. This can be done by replacing the hard-coded personal ID with a template variable.

This is discussed here (Alternative: add a template variable to define the default Robots meta tag value).

Step 1

Add a new variable to your template. I called it MSClarityID:

Step 2

Change the topics.pas.html file:

  <!-- Microsoft Clarity -->
  <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "<% Print(HndGeneratorInfo.GetCustomSettingValue('MSClarityID')); %>");
  </script>

We changed the hardcoded project ID to:

<% Print(HndGeneratorInfo.GetCustomSettingValue('MSClarityID')); %>

Step 3

Finally, specify the value for the variable in the HelpNDoc's projects Template settings tab: