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 openIncoming as 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, 
    openIncoming: false
  }
})

Chat callback to Agent/Customer Actions

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

Open chat widget with pre set message

Atlas.call('showNewChat', { text: 'Hello' })

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

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

Enable Chat for only specific countries

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

Disable chat for specific countries

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

Styling the widget

To control the style of chat widget

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

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

Helpcenter Options

To open up help center in chat widget

window.Atlas.call('openHelpCenter')

To open up a help center category in chat widget

window.Atlas.call('openArticlesCategory', 'category')

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

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

To open up helpcenter search

window.Atlas.call('openArticlesSearch', 'how to setup helpcenter')

Start Chatbot

If you have created several chatbots you may want to open specific one for your user conditionally:

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

The 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.