AtlasGo to Atlas↗️

No results

Next.js

Last updated February 20, 2024

Install Snippet

To install the Atlas snippet on a Next.js site:

1. Create AtlasSnippet component as below

import Script from "next/script";
const AtlasSnippet = () => (
    <Script id="atlas-snippet">{`(()=>{"use strict";var t,e={appId:"YOUR-APP-ID",v:2,autorun:{},q:[],call:function(){this.q.push(arguments)}};window.Atlas=e;var n=document.createElement("script");n.async=!0,n.src="https://app.atlas.so/client-js/atlas.bundle.js";var s=document.getElementsByTagName("script")[0];null===(t=s.parentNode)||void 0===t||t.insertBefore(n,s)})();`}</Script>
);

// omit this block if you don't use TypeScript
declare global {
  interface Window {
    Atlas: any;
  }
}

2. Replace YOUR-APP-ID with the correct one from  Settings > Organization page .

3. Include it as an element <AtlasSnippet /> in the main layout file.

From the location in your code where you handle authentication, call the following method for logged-in users:

  window.Atlas.call("identify", {
    userId: '123',
    name: 'John Doe',
    email: 'john@example.com',
   })

See  here  for a full list of available fields you can use in the identify call.

Was this article helpful?