Static sites

Integrate Besökskollen with Hugo, Jekyll, Gatsby, Eleventy and other static site generators.

Difficulty: Easy

Takes about 2 minutes

Hugo

Add the script to your head partial:

{{/* layouts/partials/head.html */}}
<script defer
  data-site-id="DIN-SAJT-ID"
  data-api="https://besokskollen.se"
  src="https://besokskollen.se/script.js">
</script>

Or add it to your baseof.html:

{{/* layouts/_default/baseof.html */}}
<!DOCTYPE html>
<html>
<head>
  {{ partial "head.html" . }}
  <script defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>
<body>
  {{ block "main" . }}{{ end }}
</body>
</html>

Jekyll

Add to _includes/head.html:

<!-- _includes/head.html -->
<head>
  <meta charset="utf-8">
  <title>{{ page.title }}</title>

  <script defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>

Gatsby

Use gatsby-ssr.js to add the script:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="savri-analytics"
      defer
      data-site-id="DIN-SAJT-ID"
      data-api="https://besokskollen.se"
      src="https://besokskollen.se/script.js"
    />
  ])
}

Eleventy (11ty)

Add to your base layout:

<!-- _includes/base.njk -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>

  <script defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>
<body>
  {{ content | safe }}
</body>
</html>

Astro

Add to your layout component:

---
// src/layouts/Layout.astro
const { title } = Astro.props
---

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{title}</title>

  <script
    defer
    data-site-id="DIN-SAJT-ID"
    data-api="https://besokskollen.se"
    src="https://besokskollen.se/script.js">
  </script>
</head>
<body>
  <slot />
</body>
</html>

Docusaurus

Add to docusaurus.config.js:

// docusaurus.config.js
module.exports = {
  // ...
  scripts: [
    {
      src: 'https://besokskollen.se/script.js',
      defer: true,
      'data-site-id': 'DIN-SAJT-ID',
      'data-api': 'https://besokskollen.se'
    }
  ]
}

General rule

Regardless of which static site generator you use, the principle is the same: add the script to the &lt;head&gt; tag on all pages. The script is small (~2KB) and doesn't block rendering.

Need help?

See all integration guides →