JavaScript integration

JavaScript SDK will let you integrate with React, Meteor, AngularJS and more. Enter to see how to use widget methods, enable events etc.

Integración JavaScript

How to set it up?

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:
Dentro UE.init(), UE.refresh() and UE.pageHit() métodos que se utilizan los mismos atributos que en window.civchat 'objeto' (incluyendo atributos personalizados).
Here’s a list of just a few attributes you could use (default ones):
Methods:

Deprecated methods:

UE.init() y UE.refesh(). 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: "myemail@example.org",
    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. After current widget instance has been destroyed, you cannot refer to the ue methods.

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.

Así que técnicamente, puedes eliminar las cookies con esta función y crear una nueva inmediatamente.

UE.resetAuth({
  apiKey: "YOUR_API_KEY",
  email: "johndoe@mydomain.com"
});

Eventos

onLoad()

Se dispara cuando se carga la ventana del widget

UE.pageHit({
  apiKey: "YOUR_API_KEY",
  email: "johndoe@example.com",
  name: "John Doe",
  phone_number: "+48123456789",
  source_context: {
    foo: "bar",
    john: "doe"
  },
  onLoad() {
    alert("Widget loaded!");
  }
});

onMessage()

Se desencadena para cada mensaje entrante. El objeto de mensaje se pasará a la función activada.

UE.init({
  apiKey: "YOUR_API_KEY",
  email: "johndoe@example.com",
  name: "John Doe",
  phone_number: "+48123456789",
  source_context: {
    foo: "bar",
    john: "doe"
  },
  onMessage() {
    alert("Received a message!");
  }
});

Objeto de mensaje de muestra:

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

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

Se dispara al abrir la ventana del widget

UE.pageHit({
  apiKey: "YOUR_API_KEY",
  email: "johndoe@example.com",
  name: "John Doe",
  phone_number: "+48123456789",
  source_context: {
    foo: "bar",
    john: "doe"
  },
  onOpen() {
    alert("Opened a chat!");
  }
});

onClose()

Se dispara al cerrar la ventana del widget

UE.pageHit({
  apiKey: "YOUR_API_KEY",
  email: "johndoe@example.com",
  name: "John Doe",
  phone_number: "+48123456789",
  onClose() {
    alert("Closed a chat!");
  }
});