Next.js
Last updated September 3, 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?
🔧