AtlasGo to Atlas↗️

No results

Help CenterGetting startedJavascript SDK configuration and methods

Javascript SDK configuration and methods

Last updated June 6, 2024

Starting/Stopping Atlas Widget

Starting Atlas Widget

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

Stopping Atlas Widget

window.Atlas.shutdown()

Proxying Atlas APIs to your own server

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 userhash into identify call (read more about it  here )

Passing other customer details

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  create custom fields  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',
    }
})

Passing Company Information

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',
        }
    }
})

Chat Startup Options

Don't start chat on Atlas widget startup

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

Start chat when Atlas chat was disabled on startup

window.Atlas.chat.start()

Stop Atlas chat

window.Atlas.chat.stop()

Chat Bubble visibility options

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.

window.Atlas.chat.openWindow()

Hiding Atlas bubble programmatically

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.

window.Atlas.chat.hideBubble() 

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

window.Atlas.chat.showBubble() 

If you want to stop Atlas window from auto opening when new agent message comes to Customers, you can pass showIncoming to false. 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, 
    showIncoming: false
  }
})

Chat callback to Agent/Customer Actions

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

Positioning Options

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]
    }
});

Layout Options

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!')
    },
})

Updating Chat Settings dynamically

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

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

Session Recording Options

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

Don't start session by default

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

Start session recording on specific pages/paths

window.Atlas.recording.start()

Stop session recording on specific pages/paths

window.Atlas.recording.stop()

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

window.Atlas.recording.getSessionId()
💡

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

Helpcenter Options

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"
});
Was this article helpful?