JAVASCRIPT INTEGRATION

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

UE.init()

Initialize widget with given options. Options are exactly the same as for window.civchat object if widget should be activated statically.

<script>
  UE.init({
    apiKey: 'YOUR_API_KEY',
    name: "John Doe",
    email: "[email protected]",
    gender: 2,
    status: 2,
    phone_number: "+48754123434", // Must be a valid E.164 format
    first_seen: "2016-11-22T11:47:40.957983Z", // Must be a valid ISO 8601 format
    last_seen: "2016-11-22T11:47:40.960405Z", // Must be a valid ISO 8601 format
    page_views: 1,
    last_ip: "84.10.12.178",
    timezone: "America/Los_Angeles",
    city: "Montebello",
    country: "United States",
    emails_enabled: true,
    browser_language: "en",
    score: 0,
    browser: "Chrome",
    os_type: "Windows",
    resolution: "1373x933",
    notifications: true,
    company: {
      revenue: "$239.9 billion",
      employees: 32
    },
    source_context: {
      foo: "bar",
      john: "doe"
    }
  });
</script>

UE.pageHit()

Send PING signal to main server. Equivalent of navigating to new page in "standard" HTTP installations. This method does not require any arguments.

<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
    first_seen: "2016-11-22T11:47:40.957983Z", // Must be a valid ISO 8601 format
    last_seen: "2016-11-22T11:47:40.960405Z", // Must be a valid ISO 8601 format
    page_views: 1,
    last_ip: "84.10.12.178",
    timezone: "America/Los_Angeles",
    city: "Montebello",
    country: "United States",
    emails_enabled: true,
    browser_language: "en",
    score: 0,
    browser: "Chrome",
    os_type: "Windows",
    resolution: "1373x933",
    notifications: true,
    company: {
      revenue: "$239.9 billion",
      employees: 32
    },
    source_context: {
      foo: "bar",
      john: "doe"
    }
  });
</script>

UE.refresh()

Update widget configuration and reload it. Only desired config values to update are required, all others remains untouched. Really handy if you're using Single Page Application.

<script>
  UE.refresh({
    apiKey: 'YOUR_API_KEY',
    name: "John Doe",
    email: "[email protected]",
    gender: 2,
    status: 2,
    phone_number: "+48754123434", // Must be a valid E.164 format
    first_seen: "2016-11-22T11:47:40.957983Z", // Must be a valid ISO 8601 format
    last_seen: "2016-11-22T11:47:40.960405Z", // Must be a valid ISO 8601 format
    page_views: 1,
    last_ip: "84.10.12.178",
    timezone: "America/Los_Angeles",
    city: "Montebello",
    country: "United States",
    emails_enabled: true,
    browser_language: "en",
    score: 0,
    browser: "Chrome",
    os_type: "Windows",
    resolution: "1373x933",
    notifications: true,
    company: {
      revenue: "$239.9 billion",
      employees: 32
    },
    source_context: {
      foo: "bar",
      john: "doe"
    }
  });
</script>

Or empty refresh:

UE.refresh({});

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 by this function and create new one immediately.

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

Events

onLoad()

Triggered when widget window is loaded, afterwards executes init and refresh.

UE.init({
  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.init({
  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.init({
  apiKey: "By8msspZFE9XB95ZSkuepSUWxZfuqV5w7rjdSTlJBVMjixn24aNlsjDALKsdazSd",
  email: "[email protected]",
  name: "John Doe",
  phone_number: "+48123456789",
  source_context: {
    foo: "bar",
    john: "doe"
  },
  onClose() {
    alert("Closed a chat!");
  }
});

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

This website uses cookies.