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

Question

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

Answer 1

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: