How to add utterances comments to Sveltekit?

Utterances is a simple script tag but you cannot just use it as-is in Svelte or Sveltekit.

If you want to execute a script tag in Svelte/Sveltekit, you should have it inside a html tag. Top level script tags in Svelte has dedicated functionality.

Svelte/Sveltekit

<div>
  <script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="url"
        theme="github-light"
        crossorigin="anonymous"
        async>
  </script>
</div>

You can use this method to load any such script tag that needs to go inside a Svelte component.

If the script is not a display component then you can always place it inside svelte:head tag.

<svelte:head>
  <script>
    <!-- some script here -->
  </script>
</svelte:head>

Utterances expects the script to be placed in the document where the comments should be loaded. So you cannot put that inside svelte:head. If you do so, then the comment might show up above everything else.

Find related articles