JavaScript integration

JavaScript SDK to integrate with React, Meteor, Angular.JS and more...


Widget

Widget methods are available through global window object UE. To enable events, pass them as properties for main widget configuration object.

Please note that this is a JavaScript API/SDK documentation, for the REST API please head to this url.

Use attributes

Within UE.init(), UE.refresh() and UE.pageHit() methods you can use the same attributes as in window.civchat object (including custom attributes).

Here's a list of just a few attributes you could use (default ones)

Methods

Deprecated methods:
UE.init() and UE.refresh(). Those has been merged into one method: UE.pageHit(). The rest remain as it is.

UE.pageHit()

Initialize the widget or send PING signal to main server. Equivalent of navigating to new page in "standard" HTTP installations.

<script>
  UE.pageHit({
    apiKey: 'YOUR_API_KEY',
    name: "John Doe",
    email: "[email protected]",
    gender: 2,
    status: 2,
    phone_number: "+48754123434", // Must be a valid E.164 format
    score: 0,
    company: {
      revenue: "$239.9 billion",
      employees: 32
    },
    source_context: {
      foo: "bar",
      john: "doe"
    }
  });
</script>

UE.destroy()

Destroy current widget instance and remove window from DOM. This method takes no arguments.

UE.destroy({});

UE.resetAuth(data)

This function resets __ca__chat cookie, then creating new one or assigning existing one based on email adress (if provided). Parameter data is an JSON object with email key and value.

So technically, you can delete cookie with this function and create new one immediately.

UE.resetAuth({
  email: "[email protected]"
});

Events

onLoad()

Triggered when widget window is loaded.

UE.pageHit({
  apiKey: "By8msspZFE9XB95ZSkuepSUWxZfuqV5w7rjdSTlJBVMjixn24aNlsjDALKsdazSd",
  email: "[email protected]",
  name: "John Doe",
  phone_number: "+48123456789",
  source_context: {
    foo: "bar",
    john: "doe"
  },
  onLoad() {
    alert("Widget loaded!");
  }
});

onMessage()

Triggered for every incoming message. Message object will be passed into triggered function.

UE.init({
  apiKey: "By8msspZFE9XB95ZSkuepSUWxZfuqV5w7rjdSTlJBVMjixn24aNlsjDALKsdazSd",
  email: "[email protected]",
  name: "John Doe",
  phone_number: "+48123456789",
  source_context: {
    foo: "bar",
    john: "doe"
  },
  onMessage() {
    alert("Received a message!");
  }
});

Sample message object:

{
  content: "Hello, world!",
  isAdmin: false
}

If isAdmin is set to true, it means that message came from backend side, otherwise it will be set to false and it means that message came from front-end widget.

onOpen()

Triggered when opening widget window.

UE.pageHit({
  apiKey: "By8msspZFE9XB95ZSkuepSUWxZfuqV5w7rjdSTlJBVMjixn24aNlsjDALKsdazSd",
  email: "[email protected]",
  name: "John Doe",
  phone_number: "+48123456789",
  source_context: {
    foo: "bar",
    john: "doe"
  },
  onOpen() {
    alert("Opened a chat!");
  }
});

onClose()

Triggered when closing widget window.

UE.pageHit({
  apiKey: "By8msspZFE9XB95ZSkuepSUWxZfuqV5w7rjdSTlJBVMjixn24aNlsjDALKsdazSd",
  email: "[email protected]",
  name: "John Doe",
  phone_number: "+48123456789",
  onClose() {
    alert("Closed a chat!");
  }
});

If you have any issues with this integration - feel free to contact us. We're here for you!

Big Cartel logo
Your API KEY can be found here:
Get my api key

Ready to try UserEngage?

Sign up to start a 14-day free trial.

Start free trial
CTA Men