Integracja JavaScript

Jak to skonfigurować?

Niestandardowe metody javascript pozwalają osiągnąć pożądane cele przy użyciu tylko działań frontend. Metody wymienione poniżej są dostępne za pośrednictwem globalnego obiektu okna UE. W zależności od przypadku użycia możesz przekazywać dane do aplikacji User.com na wiele sposobów. Korzystając z metod widgetów, będziesz mógł znacznie bliżej wchodzić w interakcje z użytkownikiem, aktualizując jego dane w ramach trafienia strony, inicjalizując widżet z nowym użytkownikiem lub niszcząc całą instancję widżetu.

‍

Następnie możesz przejść do wywołań zwrotnych widżetu, aby łatwo wchodzić w interakcję z widżetem czatu. Te metody umożliwiają uruchamianie działań w przypadku wystąpienia określonego scenariusza.

‍

Ostatnia część opisuje metodę userengage do wysyłania zdarzeń lub aktualizacji atrybutów użytkownika.

‍

Należy pamiętać, że jest to dokumentacja JavaScript API/SDK, dla interfejsu API REST przejdź do tego adres URL.

‍

Pamiętaj, że ApiKey jest wymagany do korzystania z metod wymienionych poniżej.

‍

Metody widżetów

‍

UE.pageHit()

‍

W metodach UE.pageHit() można zaktualizować użytkownika o te same atrybuty co w obiekcie window.civchat (w tym atrybuty niestandardowe).

‍

Jak to działa?

‍

pageHit() wysyła żądanie do naszego serwera i aktualizuje adres URL (generuje nowy widok strony) i przekazane atrybuty użytkownika z określonymi danymi. Jest to odpowiednik nawigacji do nowej strony w „standardowych” instalacjach 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 typów danych atrybutów niestandardowych należy przekazać dane w określony sposób:

‍

- fixed: { fixed_attr: „value1" } lub { fixed_attr: [" value1"] }

‍

- fixed z włączoną możliwością wielokrotnego wyboru: { fixed_attr: ["value1", „value2"] }

‍

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

‍

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

‍

UE.resetAuth()

‍

Ta funkcja resetuje plik cookie __ca__chat, a następnie tworzy nowy, co skutkuje utworzeniem nowego użytkownika. Dane parametru są obiektem z kluczem api. Pamiętaj, że resetuje również globalny plik cookie. Możesz go użyć, aby utrzymać priorytet użytkowników na wyższym poziomie. Po wylogowaniu użytkownika z aplikacji możesz uruchomić tę funkcję i bez logowania, ten użytkownik nie będzie mógł sprawdzić historii rozmów na czacie.

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

‍

Możesz również podać więcej informacji o nowym użytkowniku (tj. adres e-mail):

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

‍

UE.destroy()

‍

Zniszcz bieżącą instancję widżetu i usuń okno z DOM. Ta metoda nie wymaga argumentów. Po zniszczeniu bieżącej instancji widżetu nie można odwołać się do metod ue.

UE.destroy({});

Widget callbacks

‍

Po załadowaniu widżetu okna możesz wykonać określone działania w zależności od metody, której chcesz użyć. Metoda wywołuje natychmiast. Zapewnia, że kod widżetu został już zakończony. Wszystkie z nich są wymienione poniżej.

‍

onLoad()

‍

Wyzwalane po załadowaniu okna widżetu.

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

‍

Wyzwalane dla każdej przychodzącej wiadomości. Obiekt wiadomości zostanie przekazany do funkcji wyzwalanej.

UE.pageHit({
  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ładowy obiekt wiadomości:

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

‍

Jeśli wartość IsAdmin jest ustawiona na true, oznacza to, że wiadomość pochodzi ze strony zaplecza, w przeciwnym razie zostanie ustawiona na false i oznacza to, że wiadomość pochodzi z widżetu front-end.

‍

onOpen()

‍

Wyzwalane podczas otwierania okna widżetu.

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

‍

Wyzwalane podczas zamykania okna widżetu.

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

‍

onPayloadReceived()

‍

Potrafi obsługiwać dane wysyłane za pośrednictwem modułu automatyzacji Wyślij kod. Zawartość modułu Wyślij kod jest przekazywana jako argument do tej metody.

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

Metoda Userengage

‍

Eventy

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

‍

Wyślij zdarzenie z niestandardową nazwą i żądanymi atrybutami zdarzenia. Pamiętaj, aby utworzyć atrybuty zdarzeń z określonymi typami danych przed wysłaniem ich do User.com. Aby dowiedzieć się więcej o wydarzeniach, 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 wywołać zdarzenie produktu w określonej akcji. Aby dowiedzieć się więcej o wydarzeniach produktowych, kliknij tutaj.

‍

Zarządzanie stanem widgetu

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

‍

Odwołując się do obiektu widżetu, możesz łatwo zarządzać stanem widżetu. Możesz skonfigurować jeden z następujących stanów: