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.

JavaScript integration

Jak używać?

Niestandardowe metody javascript pozwolą Ci osiągnąć zamierzone cele poprzez działania frontendowe. Metody wymienione poniżej są dostępne poprzez globalny obiekt o nazwie UE. Istnieje wiele sposobów na przekazywanie danych z Twoich systemów do aplikacji User.com. Dzięki metodom widgetu będziesz w stanie przekazywać i aktualizować dane użytkownika przy każdej odsłonie strony, inicjalizować widget przy nowym użytkowniku czy usunąć instancję widgetu.
Następnie możesz przejść do wywołań zwrotnych (widget callbacks). Te metody pozwolą Ci na wyzwalanie danych akcji, kiedy wydarzy się określony scenariusz.
Ostatnia część instrukcji dotyczy metod widgetu userengage dla wysyłania eventów i aktualizacji atrybutów użytkownika.
Zwróć uwagę, że jest to dokumentacjaJavaScript API/SDK. Dokumentacja REST API znajduje się pod tym url.
Pamiętaj, że by móc korzystać z metod opisanych poniżej wymagane jest podanie apiKey.

Metody widgetu


UE.pageHit()

Dzięki UE.pageHit()UE.pageHit()możesz użyć tych samych atrybutów co w obiekcie window.civchat (uwzględniając atrybuty niestandardowe).

Jak to działa?

pageHit() pageHit() wysyła zapytanie do naszego serwera i aktualizuje URL (wywołuje nową odsłonę strony) i przekazuje atrybuty użytkownika o określonej wartości. Jest to równoznaczne z przejściem do nowej strony w instalacji "standard" HTTP.

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

W przypadku niektórych atrybutów niestandardowych musisz przekazać dane w określony sposób:

- atrybut typu fixed: { fixed_attr: "value1" } lub { fixed_attr: ["value1"] }

- atrybut typu fixed z możliwością wielokrotnego wyboru: { fixed_attr: ["value1", "value2"] }

- format datetime: zgodny z formatem ISO 8601, tzn: { datetime_attr: "2016-08-03 12:00:00+00:00" }

- data (RRRR-DD-MM): { date_attr: "2016-08-03" }

UE.resetAuth()

Ta funkcja resetuje __ca__chat cookie, po czym tworzy nowe, co w rezultacie oznacza stworzenie nowego użytkownika. Parameter data to tutaj obiekt z api key. Pamiętaj, że to działanie resetuje również globalne cookie. Wykorzystaj tą funkcję, jeśli zależy Ci na najwyższym poziomie zabezpieczenia prywatności użytkowników. Po tym jak użytkownik wyloguje się z Twojego systemu, możesz wykonać tą funkcję – wtedy użytkownik nie będzie miał dostępu do historii konwersacji na czacie bez ponownego zalogowania.

UE.resetAuth({
  apiKey: "YOUR_API_KEY"
});

Przy użyciu tej funkcji możesz też przesłać dodatkowe informacje o nowym użytkowniku (np. adres email):

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

UE.destroy()

Usuń aktualną instancję widgetu i usuń okienko z DOM. Ta metoda nie przyjmuje żadnych argumentów (parametrów). Po tym, jak aktualna instancja widgetu zostanie usunięta, nie będziesz mógł zastosować metod widgetu userengage.

UE.destroy({}); 

Zapytania zwrotne (widget callbacks)


Po tym jak okno widgetu załaduje się możesz wywołać określone działanie w zależności od wybranej przez Ciebie metody.

onLoad()

Wyzwalanie kiedy otwierane jest okienko widgetu.

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

Działa dla każdej przychodzącej wiadomości. Obiekt wiadomości będzie przekazany wewnątrz wyzwolonej funkcji.

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!");
  }
});

Przykłady obiektu wiadomości:

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

Jeśli isAdmin jest ustawiony na true, oznacza to, że wiadomość przyszła od strony backendu, w przeciwnym razie będzie to ustawione jako False i oznacza to, że wiadomość przyszła od front-endowego widżetu.

onOpen()

Włączony kiedy otwierane jest okienko widgetu.

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

Włączony kiedy zamykane jest okienko widgetu.

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

onPayloadReceived()

Może obsługiwać dane wysyłane przez kostkę automatyzacji Send code. Zawartość kostki jest przekazywana jako argument do tej metody.

UE.pageHit({
  apiKey: "YOUR_API_KEY",
  onPayloadReceived: function(message) {
    console.log(message);
  }
});

Zdarzenia UserEngage


Eventy

userengage("event.name",{
  event_attr1: "value1",
  event_attr2: "value2"
});

Wyślij zdarzenia z własną nazwą i pożądanymi atrybutami tego zdarzenia. Pamiętaj, aby utworzyć atrybuty zdarzeń z określonym typem, przed wysłaniem ich do User.com. Aby dowiedzieć się więcej o zdarzeniach, kliknij tutaj.

Eventy produktowe

userengage("product_event",{
  product_id: "value1",
  event_type: "add to cart",
  name: "product name",
  description: "this product description"
});

Za pomocą tej metody można wyzwolić zdarzenie produktu przy określonej akcji. Aby dowiedzieć się więcej o zdarzeniach produktowych, kliknij tutaj.

Zarządzanie stanem widżetu

userengage("widget.{{state}}");

Odnosząc się do obiektu widżetu, możesz łatwo zarządzać stanem widżetu. Możesz ustawić jeden z poniższych stanów:

StanOpis
hideZmień stan widżetu na ukryty
openZmiana stanu widżetu na rozszerzony
showZmiana stanu widżetu na standardowy
closeZamyka otwarte okno czatu

Aktualizacja danych klienta

userengage("client.update",{
  attribute: "value"
});

Za pomocą tej metody można również aktualizować atrybuty użytkownika. Nie każdy atrybut może jednak zostać zmieniony przy użyciu tej metody. Proszę, sprawdź listę atrybutów tutaj.