Docs
Installation

Install Visitors on SvelteKit

SvelteKit provides several ways to integrate third-party scripts. Here are the recommended approaches for adding Visitors analytics.

Replace YOUR_TOKEN with your project token.

Using app.html

The simplest approach is to add the script tag directly to your src/app.html file.

src/app.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
    <script 
      src="https://cdn.visitors.now/v.js" 
      data-token="YOUR_TOKEN">
    </script>
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Using svelte:head

You can also add the script using Svelte's svelte:head in your root layout:

src/routes/+layout.svelte
<svelte:head>
  <script 
    src="https://cdn.visitors.now/v.js" 
    data-token="YOUR_TOKEN">
  </script>
</svelte:head>

<main>
  <slot />
</main>

Dynamic loading

For more control over when the script loads:

src/routes/+layout.svelte
<script>
  import { onMount } from 'svelte'
  
  onMount(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.visitors.now/v.js'
    script.setAttribute('data-token', 'YOUR_TOKEN')
    script.async = true
    
    document.head.appendChild(script)
    
    return () => {
      document.head.removeChild(script)
    }
  })
</script>

<main>
  <slot />
</main>