Skip to main content

​
Install in pages/_app.js

The easiest way to install Koala on Next.js applications is to add it to the main _app.js file. Copy the Koala snippet from your workspace installation settings page and paste it into the Script component.
pages/_app.js
import Script from 'next/script'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        id="koala-snippet" 
        dangerouslySetInnerHTML={{ 
          __html: `// Paste your Koala snippet here`
        }}
      />
      <Component {...pageProps} />
    </>
  )
}
Alternatively, you can install Koala in the <head> or <body> of your site by adding the snippet to the pages/_document.js file.
pages/_document.js
import { Head, Html, Main, NextScript } from 'next/document'

export default function KoalaDocument() {
  return (
    <Html>
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `// Paste your Koala snippet here`,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

​
Identify visitors

Once you’ve installed the snippet, you can also start identifying known visitors. 
window.ko?.identify('[email protected]', {
  name: 'Jane Doe',
  title: 'Product Manager'
})
Learn more about identifying visitors or setting visitor/account traits in our guide: Identifying visitors.