Javascript SDK configuration and methods

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

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

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()