How to install Atlas on your website or app
Last updated October 8, 2026
Overview
The Atlas installation page gives your developers the exact install code for the platform your product is built on. One snippet loads the Atlas chat widget (and session recording) on your website or app, a second snippet identifies your logged-in users so every conversation arrives in the Atlas inbox with a real name and email attached, and an optional TypeScript definition keeps the Atlas object typed across your codebase.
The installation page supports web frameworks, native and cross-platform mobile apps, and no-code integrations such as Wix, Framer, Netlify, Google Tag Manager and Webflow. Select a platform and the installation instructions on the page update to match it.
Key Features
- Platform-specific install code: The "Platform" dropdown switches the page to instructions for your stack, grouped into Web, Mobile and Integrations.
- One snippet for chat and session recording: The install snippet loads both the chat widget and session recording on every page where it is added.
- User identification: The identify snippet passes a user's ID, name and email to Atlas, so agents always know who they are helping.
- TypeScript support: A ready-to-paste type definition declares
Atlasonwindowfor TypeScript projects. - One-click copy: Every code block has a "Copy" button, so code goes to your clipboard without retyping.
- Reference page: The installation page stays available in App Configuration, so you can return to it whenever you need the code again.
Available platforms
How to install Atlas
You need access to your website or app's code, or to the site builder you use (for example Wix or Webflow). The steps below use JavaScript as an example. For other platforms, select your platform in step 2 and follow the instructions shown on the page.
- Alternatively, from the Getting Started checklist, click "Install widget".
- Open the "Platform" dropdown and select your platform. The page updates with the instructions for that platform. In this example, select "JavaScript".
- Under "Install with pure JavaScript", click the "Copy" button to copy the install snippet.
- Add the snippet before the
</head>tag on every page on which you want the chat widget or session recording to appear. The snippet looks like this:
<script>
(()=>{"use strict";var t,e={appId:"YOUR_APP_ID",v:2,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)})();
window.Atlas.call("start");
</script>- Under "Identify your users", click "Copy" and add the identify code anywhere after the install snippet, wherever your app knows who the logged-in user is:
window.Atlas.call("identify", {
userId: "User Id",
name: "User Name",
email: "User Email"
})Replace the placeholder values with the logged-in user's ID, name and email. When a user starts a chat, these details appear on the conversation in the Atlas inbox.
- (Optional) If you use TypeScript, under "TypeScript support" click "Copy" and add the type definition to your project:
declare global {
interface Window {
Atlas: any;
}
}- To see the complete API, click the "See full API documentation here" link on the installation page. It opens the JS SDK article.
Optional identify fields
Besides userId, name and email, the identify call accepts a fields object with standard customer details and a customFields object for your own data.
| Object | Keys |
fields | title, department, photo, accountName, phone, street1, street2, city, country, postalCode, secondaryEmail |
customFields | Any keys you define, for example tier, mrr or isGuest |
window.Atlas.call("identify", {
userId: "User Id", name: "User Name", email: "User Email", fields: {
title: "Head of Operations", accountName: "Acme Inc", phone: "+1 555 0100", city: "Austin", country: "US" },
customFields: {
tier: "free", mrr: 1000, isGuest: true }
})How to remove Atlas snippet
Remove the install snippet and identify code from your site or app. You can also stop the widget on specific pages with window.Atlas.shutdown().
FAQs & Troubleshooting
Why doesn't the chat widget appear on my site?
Check that:
- The install snippet is placed before the
</head>tag on the page where the widget should appear, and the change is deployed. - The snippet was copied from your own installation page, so it contains your workspace's app ID.
- "Use chat" is turned on in "App Configuration > Channels > Chat" .
- The page is not excluded by the "Widget visibility" setting in the chat configuration.
- Your code is not calling
hideBubbleorshutdownon that page.
Why do conversations show up without the customer's name or email?
The identify call is missing, runs before the install snippet, or is called with empty values. Add the identify snippet after the install snippet and pass the logged-in user's details.
Do I need to add the snippet to every page?
Yes. Add it to every page where you want the chat widget or session recording, ideally in a layout or template that every page shares.
Does the snippet also enable session recording?
Yes. The same snippet powers the chat widget and session recording. See the JS SDK article to control recording on specific pages.
My site is built with Wix, Webflow or another site builder. How do I install Atlas?
Select your tool under "Integrations" in the "Platform" dropdown (Wix, Framer, Netlify, Google Tag Manager or Webflow) and follow the instructions shown on the page.
I use TypeScript and my editor says Atlas does not exist on window. What do I do?
Add the type definition from "TypeScript support" to your project.
Can I change the platform after installing?
Yes. Select a different platform in the "Platform" dropdown at any time. The page shows the instructions for that platform; you then update the code in your app.