Atlas

Atlas Help Center

New Ticket

First, let’s forward email from your support email address to your 

 when you add the Atlas support inbox address as a forwarding address, you’ll need to get the verification code; you can find this in the Atlas inbox.

 tag of each page you want it to show up on. 

Additionally, you’ll want to setup user identification, typically on pages where a user is behind a login:

window.Atlas.call("identify", {
	userId: "User Id",
	name: "User Name",
	email: "User Email",
	fields: {
	    "title": "",
	    "department": "",
	    "photo": "",
	    "accountName": "",
	    "phone": "",
	    "street1": "",
	    "street2": "",
	    "city": "",
	    "country": "",
	    "postalCode": "", 
	    "secondaryEmail": "",
	},
	"customFields": {
    	"tier": "free",
	    "type": "chat",
    	"isGuest": true,
	    "mrr": 1000
  	},
})

For the remaining configuration, see the other tabs in App Configuration, such as 

 (setup your chat widget colors, messages, away hours, and logo), 

 (if you’re capturing sessions on your marketing pages, be sure to Enable “Session recording for visitors”), and 

 (sign into Slack to receive Slack messages when users send you a message).

Now let’s give it a test run: go to your homepage and send a chat to see if it works. You should be able to see if it works!

Installing Atlas

(() => {
  "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");

window.Atlas.proxyUrl = 'https://api.yourserver.com/api/v1/atlas_proxy'

Passing customer/company information to Atlas 

To pass customer information to atlas, you can call Identify with the relevant information.  Whenever user is logged into your application, you can make the following call 

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

To make sure scammer can't spoof a user, you should pass a 

here are the other set of fields that you can pass to identify call so your agents have required details to solve tickets. You can set 

 in Atlas to pass any additional fields. 

  window.Atlas.call("identify", {
    userId: '123',
    name: 'John Doe',
    email: 'john@example.com',
    phoneNumber: '+14153101234',
    userHash: '39d97cc77da23fb515d37e6cea066692a799cf85d1330489e2c',
    fields: {
        title: 'CEO',
        department: 'Sales',
        photo: 'https://cdn.filestackcontent.com/2dq5VghRlipv4aWAPAUE',
        street1: '1 main street',
        street2: '#123',
        city: 'San Francisco',
        country: 'US',
        postalCode: '94102',
    },
    customFields: {
        'field1_key': 1,
        'field2_key': 'B',
        'field3_key': '2021-01-23',
    }
})

If you want to pass company information to Atlas, you can pass it in identify call it self.

  window.Atlas.call("identify", {
    userId: '123',
    name: 'John Doe',
    email: 'john@example.com',
    phoneNumber: '+14153101234',
    userHash: '39d97cc77da23fb515d37e6cea066692a799cf85d1330489e2c',
    account: {
        name: 'Acme Inc',
        email: 'support@acmeinc.com',
        website: 'https://acmeinc.com',
        externalId: 'account_id',
        monthlySpend: '999',
        industry: 'Computers',
        customFields: {
          'account_field1_key': '1',
          'account_field2_key': 'A',
          'account_field3_key': '2023-01-12',
        }
    }
})

window.Atlas.call("start", {
  chat: {
    enabled: false
  }
}) 

Start chat when Atlas chat was disabled on startup 

If you want to hide the default atlas chat bubble and give your customer a custom option to start chat by a different button you can use the following options

// Hide the bubble on startup
window.Atlas.call("start", {
  chat: {
    hideBubble: true 
  }
})

Opening Atlas chat when a user clicks a button on your app 

You might have elements in the UI which might blocked by Atlas chat bubble, if you want to add a "Live Chat" or "Contact Support" like button in your UI, which triggers Atlas chat, you can hide the chat bubble by default as shown above and then open the chat window using following method when user clicks on "Contact Support" button.

if you want to hide Atlas chat bubble in some page (like onboarding flow or some public facing part of your app) you can hide the chat bubble using the following method.

To show the Atlas chat bubble agin you can use the following method

If you want to stop Atlas window from auto opening when new agent message comes to Customers, you can pass 

. This is useful if want to show a counter in the UI on unread message instead of auto opening the widget.

window.Atlas.call("start", {
  chat: {
    hideBubble: true, 
    openIncoming: false
  }
})

window.Atlas.call("start", {
  chat: {
    hideBubble: true, 
    openIncoming: false,
    onNewAgentMessage: (message) => {
      console.log(message);
    },
    onWindowVisibilityChange: (visible) => {
      console.log(visible)
    }
  }
})

With SDK you should be able to control position and offset of your chat bubble, here are the options

window.Atlas.call("start", {
    chat: {
        'position': 'bottomLeft',
        'offset': [20, 21]
    }
});


If you are using layout menu and want to add a option that triggers some workflow in your app, you can use that as a callback option. To register a call back with Atlas, you could do the following

window.Atlas.call("start", {
    callbacks: {
        hello: () => alert('hello!')
    },
})

If you want to update position of chat dynamically or switch colors, you can update any of the configuration using the 

window.Atlas.call('update', {
    'chat': { 
        'position': 'bottomLeft',
        'offset': [80, 21]
    }
});

Controlling chat visibility based on location 

If you want to limit visibility of your chat to certain country or hide it from certain country, you can use the following methods

Atlas.call('start', {
    access: { countries: ['US'] },
})

Atlas.call('start', {
    access: {
        countries: ['US'],
        inverseCountries: true,
    },
})

Atlas.call('start', {
  chat: {
    brandColor: 'linear-gradient(180deg, pink 0%,gold 84%)', // or color '#ff0000'
    textColor: 'light', 
    launcher: {
      label: 'Welcome', 
    },
    widget: {
      title: 'H1',
      subtitle: 'H2',
      // can be the http(s) url as well
      logo: 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 
    },
  },
})

If selectively want to control on which pages session should be recorded, you can control it using the follow options

window.Atlas.call("start", {
  recording: {
    enabled: false
  }
})

Start session recording on specific pages/paths

 Stop session recording on specific pages/paths

If you want to get the current session id so you can pass it a APM or error monitoring tools like sentry, you can get it using following method

 about how to to hide/mask certain information from getting recorded.

Show an helpcenter article in chat widget

To show an helpcenter article article directly in chat widget, you can use the following method

window.Atlas.call("openArticle", {
    "slug": "703242-session-recording"
});

 you may want to open specific one for your user conditionally:

window.Atlas.call("triggerChatbot", "CHATBOT_KEY");

 is a string that you can find in the Chatbot Setup window. When you navigate to your Chatbot graph click the entry block and you will find the "Chatbot Key" field in the opened modal window.

Ensure that in the Chatbot Setup window the "Start Conversation" is set to "Via SDK" to make it available for 

Javascript SDK configuration and methods

Preventing user impersonation is key to protecting your users’ information. To do so, we allow you to create an encrypted user hash that we use to determine whether or not a user communicating with your team is the user they claim to be.

Authentication is fairly straightforward. On your server, take information that only you have access to (i.e., your secret key), combine it with a unique identifier for the user (i.e., their user id) and then run it through a hashing function (HMAC 256) to create an encrypted value (

). Send it to the client who will then send it to Atlas whenever they engage with our app. Using your secret key, we decrypt the 

 and determine whether or not the user is the same as the one they claim to be.

To enable user authentication within Atlas, go to 

To setup user authentication, you need to create a hashed_value on your server and then pass it to Atlas via Javascript using the 

Here’s an example of how you would create the userHash on the backend using Python

import hashlib
import hmac

def _get_atlas_userhash(user_id):
    secret = config['ATLAS_USER_HASH_KEY']
    key = secret.encode('ascii')
    message = str(user_id).encode('ascii')
    return hmac.new(key, message, hashlib.sha256).hexdigest()


import { createHmac } from "crypto";

export const generateAtlasUserObject = (user: User) => {
  if (!user) {
    return {};
  }
  const atlasSecret = process.env.ATLAS_SECRET || "";
  const hmac = createHmac("sha256", atlasSecret);
  hmac.update(user.id);
  const userHash = hmac.digest("hex");
  return {
    userId: user.id,
    name: user.name,
    email: user.email,
    userHash,
  };
};

 For other languages, you find an example 

And on the front end, you would pass this information to Atlas as follows:

window.Atlas.call("identify", {
   userId: this.user.id,
   name: this.user.name,
   email: this.user.email,
   userHash: this.user.atlasHash,
})

 and enable Authentication by enabling  "Authenticate Users".

After authentication is enabled, atlas chat won't start for anyone trying to spoof a user. 

User Authentication

We’ve built a few different modes for notifications to let you know when you should come back to Atlas to help out a customer.

There are now four different ways to be notified when important changes to tickets are made:

To adjust your notification settings, go to 

 at which point you’ll receive notifications based off of your 

Below are instructions for setting up browser notifications in Chrome on Mac and Windows. If you are using another browser or run into any issues, drop us a line via chat or email (support@atlas.so) and we can help you get notifications setup for your configuration.

Generally, you'll need to enable notifications in two places: (1) on your operating system (ie, Mac or Windows), and (2) on your browser (eg, Chrome).

Enable notifications on Mac by going to the Apple menu  > System Preferences, then click Notifications & Focus. Select "Google Chrome" from the list of apps and then set it as shown below (you can find more info for troubleshooting 

Enable notifications in Chrome by going to 

chrome://settings/content/notifications?search=notifications

 (enter this URL into your browser search bar) and clicking the "Add" button next to "Allowed to send notifications." Add "https://app.atlas.so:443" and you should see the below 

You can test whether your notifications are working by going to a test site (like 

) and using one of their test options. If you don't see notifications here, try checking your Notification Center which you can access by clicking on the clock in the upper right hand side of your screen.

Enable notifications on Windows by going to the Start menu  > Settings, then click System and then select Notifications. Turn notifications on and select "Google Chrome" from the list of apps and make sure it is enabled (you can find more info for troubleshooting 

Enable notifications in Chrome by going to  chrome://settings/content/notifications?search=notifications  (enter this URL into your browser search bar) and clicking the "Add" button next to "Allowed to send notifications." Add "https://app.atlas.so:443" and you should see the below

You can test whether your notifications are working by going to a test site (like  Clever Push ) and using one of their test options. If you don't see notifications here, try checking your Notification Center which you can access by clicking on the clock in the upper right hand side of your screen.

Below are instructions for setting up browser notifications in Chrome on Mac and Windows. If you are using another browser or run into any issues, drop us a line via chat or email (support@atlas.so) and we can help you get notifications setup for your configuration.Generally, you'll need to enable notifications in two places: (1) on your operating system (ie, Mac or Windows), and (2) on your browser (eg, Chrome).

Enable notifications on Mac by going to the Apple menu  > System Preferences, then click Notifications & Focus. Select "Google Chrome" from the list of apps and then set it as shown below (you can find more info for troubleshooting  here ):

Enable notifications in Chrome by going to  chrome://settings/content/notifications?search=notifications  (enter this URL into your browser search bar) and clicking the "Add" button next to "Allowed to send notifications." Add "https://app.atlas.so:443" and then select it from the list of approved apps by clicking on the 🔽 button to the right of the app, where you should see the following:

On the "Sound" option, make sure you have it set to "Allow" (see  this site  for additional troubleshooting).

Enable notifications on Windows by going to the Start menu  > Settings, then click System and then select Notifications. Turn notifications on and select "Google Chrome" from the list of apps and make sure it is enabled with sound notifications enabled (see below):

On the "Sound" option, make sure you have it set to "Allow" (see 

How to setup notifications for new messages and ticket updates

Notifications

Setting up notifications

To migrate your Help Scout data to Atlas, follow these steps to generate API access credentials. Once created, you'll share these credentials with us and we will migrate your Help Scout data into your Atlas account.

From your Help Scout dashboard, click on your profile picture in the top right and then click on "Your Profile"

Next, from the navigation on the left side, click on "My Apps"

Now you'll create an app to share access with Atlas. Click on "Create My App"

and then create an app named "Atlas" with the Redirection URL set to "https://www.atlas.so":

This will create an app called Atlas. Share the App ID and App Secret with us via Slack or email (support@atlas.so) and we'll migrate your Help Scout data. Once we have these credentials, it typically takes 24-48 hours for us to migrate your data (depending on your data volumes due to Help Scout API rate limits).

Getting started

Installing Atlas

Javascript SDK configuration and methods

User Authentication

Setting up notifications

Migrating from Help Scout