# Webhook

Dengan Webhook Anda dapat memantau pertukaran data secara real-time dari satu aplikasi ke aplikasi lainnya setiap kali **event** (peristiwa) tertentu terpicu. Dengan adanya penangkap event, Anda dapat mengintegrasikan aplikasi Anda dengan maxchat.

## Istilah dalam Webhook

Berikut istilah dalam webhook:

* **Trigger Event**: suatu peristiwa yang terjadi di aplikasi sumber (dalam hal ini adalah maxchat). Contohnya, chat baru terkirim.
* **Webhook URL**: aplikasi sumber (dalam hal ini adalah maxchat) akan mengirimkan data tentang event (peristiwa) ke alamat webhook yang telah ditentukan ke aplikasi tujuan.
* **Payload**: Data yang dikirim biasanya dalam format JSON atau XML, berisi detail tentang peristiwa tersebut.

## Cara Kerja Webhook

Berikut adalah cara kerja webhook:

1. **Menentukan Trigger Event**: Tentukan event apa yang akan memicu webhook. Misalnya, ketika ada chat baru yang terkirim ke pelanggan.
2. **Membuat URL Webhook**: Buat URL di aplikasi tujuan yang akan menerima data dari aplikasi sumber. URL ini harus dapat menerima permintaan HTTP POST. Contohnya, Anda dapat mendapatkan URL webhook melalui situs <https://webhook.site>

<figure><img src="/files/PSaK8cKnhd5EvVq8Q9pE" alt=""><figcaption></figcaption></figure>

3. **Mengonfigurasi Webhook di Aplikasi Sumber**: Di aplikasi sumber, konfigurasikan webhook dengan memasukkan URL yang telah Anda buat. \
   Pada tahap ini, silakan akses menu Integration, lalu pada sub-menu App Services Anda akan melihat bagian Webhook.\
   Silakan copy-paste URL webhook Anda ke dalam text area yang disediakan. Anda dapat memasukkan lebih dari satu URL.

<figure><img src="/files/mVY1u3kDLqZwUhoEHjnm" alt=""><figcaption></figcaption></figure>

4. **Mengirim Data**: Ketika peristiwa pemicu terjadi, aplikasi sumber akan mengirimkan permintaan HTTP POST ke URL webhook yang telah ditentukan, dengan payload yang berisi data tentang peristiwa tersebut.

{% code title="Contoh payload" lineNumbers="true" %}

```json
{
  "from": "628xxxxxxxxxx",
  "timestamp": 1724728411000,
  "id": "17247",
  "msgType": "text",
  "serviced": "654dac",
  "text": "Halo",
  "username": "Aisya"
}
```

{% endcode %}

5. **Menerima dan Memproses Data**: Aplikasi tujuan menerima data tersebut dan memprosesnya sesuai kebutuhan. Misalnya, memperbarui database atau mengirim notifikasi.

Berikut adalah contoh sederhana dalam kode PHP untuk menerima webhook:

{% code lineNumbers="true" %}

```php
<?php
// Mendapatkan data dari webhook
$payload = file_get_contents('php://input');
$data = json_decode($payload, true);

// Memproses data
if ($data['event'] == 'new_comment') {
    // Lakukan sesuatu, misalnya menyimpan komentar ke database
    saveComment($data['comment']);
}

function saveComment($comment) {
    // Logika untuk menyimpan komentar ke database
    // ...
}
?>
```

{% endcode %}

## Events

Platform Maxchat Omnichannel dapat menyediakan fitur untuk mengkustomisasi penggunaan webhook sesuai dengan kebutuhan Bisnis dengan cara menghubungkan event ke beberapa URL yang berbeda (dapat terhubung sampai ke 5 alamat URL ).

<figure><img src="/files/VWtbTCLDKzw0CCpFgJQ5" alt=""><figcaption></figcaption></figure>

Saat ini terdapat 5 event yang yang tersedia di platform Maxchat Omnichannel;

### 1. Incoming Message

Event ini akan tertrigger ketika ada pesan masuk (pesan dari pelanggan ke nomor WABA bisnis), payload datanya akan seperti ini:

```json
{
  "from": "628xxxxxxxxxx",
  "timestamp": 1732506641000,
  "id": "1732506642262aKBp3GaVoiet5DdfC7cih",
  "msgType": "text",
  "serviceId": "659d15320e794e7fefee1516",
  "text": "this is a sample text",
  "username": "a_customer",
  "chatId": "65a4cabff27103ca23545021"
}
```

### 2. Outgoing Message

Event ini akan tertrigger ketika ada pesan keluar (pesan dari nomor WABA bisnis ke pelanggan), payload datanya akan seperti ini:

```json
{
  "to": "628xxxxxxxxxx",
  "fromMe": true,
  "status": "queue",
  "id": "5nPS6g5usYlVN5Tc_7pT8-1732509850296",
  "msgType": "text",
  "serviceId": "659d15320e794e7fefee1516",
  "timestamp": 1732509850422,
  "channel": "whatsapp",
  "mimeType": null,
  "chatId": "65a4cabff27103ca23545021",
  "text": "Test message"
}
```

### 3. Message Status

Event ini akan tertrigger ketika ada perubahan status pesan keluar (pesan dari nomor WABA bisnis ke pelanggan), payload datanya akan seperti ini:

#### Sent

```json
// Some code
{
  "id": "9UPKez1WBvYZVBJ1AR-V3-1732509963755",
  "status": "sent",
  "timestamp": 1732509964000,
  "serviceId": "659d15320e794e7fefee1516"
}
```

#### Delivered

```json
// Some code
{
  "id": "9UPKez1WBvYZVBJ1AR-V3-1732509963755",
  "status": "delivered",
  "timestamp": 1732509965000,
  "serviceId": "659d15320e794e7fefee1516"
}
```

#### Read

```json
// Some code
{
  "id": "9UPKez1WBvYZVBJ1AR-V3-1732509963755",
  "status": "read",
  "timestamp": 1732510071000,
  "serviceId": "659d15320e794e7fefee1516"
}
```

### 4. Resolved

Event ini akan tertrigger ketika ada&#x20;

pesan keluar (pesan dari nomor WABA bisnis ke pelanggan), payload datanya akan seperti ini:

```json
// Some code
{
  "ticketId": "67440322b4db347c8aeddd45",
  "chatId": "65a4cabff27103ca23545021",
  "agentId": "662600a2f215d43c28e3e1ac",
  "resolved": true
}
```

### 5. Login/Logout Activity

#### Login

```json
// Some code
{
  "email": "supportmax@maxchat.id",
  "activity": "logout",
  "device": "Chrome",
  "name": "Maxchat",
  "role": "admin"
}
```

#### Logout

```json
// Some code
{
  "email": "supportmax@maxchat.id",
  "activity": "login",
  "device": "Chrome",
  "name": "Maxchat",
  "role": "admin"
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://maxchat.gitbook.io/v3/integration/app-service/webhook.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.