@extends('root') @section('title', 'API Tester') @section('content')
@include('components.breadcrumb', [ 'title' => 'API Tester (V1)', 'links' => [ ['url' => route('client.dashboard'), 'label' => 'Dashboard'], ], 'current' => 'API Tester' ])
Generic Messaging API Playground

Gunakan halaman ini untuk mensimulasikan pengiriman pesan melalui API V1.

Request Configuration

Authorization: Bearer <API_KEY>

Tipe Button hanya mendukung tombol Reply (maks. 3). URL/Copy Code memerlukan template terpisah.

List Button menampilkan menu pilihan. Saat pengguna memilih item, ID item dikirim ke webhook Anda — gunakan ID tersebut untuk aksi khusus (payload ke server). Item list bisa di-generate dinamis dari database atau input.

ID = payload yang dikirim ke webhook saat item diklik. Title = teks yang tampil. Description = opsional.

Edit manual untuk format khusus. Data dari Builder akan disinkronkan ke sini.

Response Console

Pending 
// Response will appear here...
Contoh Script Siap Pakai

Salin script sesuai bahasa pemrograman Anda. Ganti API_KEY, BASE_URL, dan NOMOR_TUJUAN sesuai kebutuhan.

<?php
$apiKey = '{{ $apiKey }}';
$baseUrl = '{{ $baseUrl }}';
$to = '628123456789';

// Kirim pesan teks
$payload = [
    'to' => $to,
    'type' => 'text',
    'message' => 'Halo, ini pesan dari API!'
];

// Contoh: Kirim tombol interaktif
// $payload = [
//     'to' => $to,
//     'type' => 'interactive',
//     'interactive' => [
//         'type' => 'button',
//         'body' => ['text' => 'Silakan pilih opsi:'],
//         'action' => [
//             'buttons' => [
//                 ['type' => 'reply', 'reply' => ['id' => 'btn_1', 'title' => 'Ya']],
//                 ['type' => 'reply', 'reply' => ['id' => 'btn_2', 'title' => 'Tidak']]
//             ]
//         ]
//     ]
// ];

$ch = curl_init($baseUrl . '/messages');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode($payload),
    CURLOPT_HTTPHEADER => [
        'Authorization: Bearer ' . $apiKey,
        'Content-Type: application/json',
        'Accept: application/json'
    ],
    CURLOPT_RETURNTRANSFER => true
]);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
echo "HTTP $httpCode: " . $response;
const API_KEY = '{{ $apiKey }}';
const BASE_URL = '{{ $baseUrl }}';
const to = '628123456789';

// Kirim pesan teks
const textPayload = {
  to,
  type: 'text',
  message: 'Halo, ini pesan dari API!'
};

// Kirim tombol interaktif
const interactivePayload = {
  to,
  type: 'interactive',
  interactive: {
    type: 'button',
    body: { text: 'Silakan pilih opsi:' },
    action: {
      buttons: [
        { type: 'reply', reply: { id: 'btn_1', title: 'Ya' } },
        { type: 'reply', reply: { id: 'btn_2', title: 'Tidak' } }
      ]
    }
  }
};

(async () => {
  const res = await fetch(BASE_URL + '/messages', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + API_KEY,
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify(interactivePayload)
  });
  const data = await res.json();
  console.log('HTTP', res.status, data);
})();
import requests

API_KEY = '{{ $apiKey }}'
BASE_URL = '{{ $baseUrl }}'
to = '628123456789'

# Kirim pesan teks
# payload = {'to': to, 'type': 'text', 'message': 'Halo dari API!'}

# Kirim tombol interaktif
payload = {
    'to': to,
    'type': 'interactive',
    'interactive': {
        'type': 'button',
        'body': {'text': 'Silakan pilih opsi:'},
        'action': {
            'buttons': [
                {'type': 'reply', 'reply': {'id': 'btn_1', 'title': 'Ya'}},
                {'type': 'reply', 'reply': {'id': 'btn_2', 'title': 'Tidak'}}
            ]
        }
    }
}

r = requests.post(
    f'{BASE_URL}/messages',
    json=payload,
    headers={
        'Authorization': f'Bearer {API_KEY}',
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    }
)
print(r.status_code, r.json())
// Browser atau Node.js (fetch)
const API_KEY = '{{ $apiKey }}';
const BASE_URL = '{{ $baseUrl }}';
const to = '628123456789';

const payload = {
  to,
  type: 'interactive',
  interactive: {
    type: 'button',
    body: { text: 'Silakan pilih opsi:' },
    action: {
      buttons: [
        { type: 'reply', reply: { id: 'btn_1', title: 'Ya' } },
        { type: 'reply', reply: { id: 'btn_2', title: 'Tidak' } }
      ]
    }
  }
};

fetch(BASE_URL + '/messages', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer ' + API_KEY,
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: JSON.stringify(payload)
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
Contoh Script: List Button

Kirim list pilihan interaktif. Item list bisa di-generate dinamis dari database atau array. Saat pengguna memilih item, ID item dikirim ke webhook — gunakan untuk aksi server.

<?php
$apiKey = '{{ $apiKey }}';
$baseUrl = '{{ $baseUrl }}';
$to = '628123456789';

// Data dinamis: dari database atau array (maks. 10 section, total 10 item)
$items = [
    ['id' => 'opt_layanan_a', 'title' => 'Layanan A', 'description' => 'Deskripsi singkat'],
    ['id' => 'opt_layanan_b', 'title' => 'Layanan B', 'description' => 'Deskripsi singkat'],
    ['id' => 'opt_layanan_c', 'title' => 'Layanan C', 'description' => ''],
];
// Contoh dari DB: $items = $pdo->query("SELECT id, name AS title, desc AS description FROM services LIMIT 10")->fetchAll(PDO::FETCH_ASSOC);

$sections = [['title' => 'Pilih Layanan', 'rows' => array_map(fn($r) => ['id' => $r['id'], 'title' => $r['title'], 'description' => $r['description'] ?? ''], $items)]];

$payload = [
    'to' => $to,
    'type' => 'interactive',
    'interactive' => [
        'type' => 'list',
        'body' => ['text' => 'Silakan pilih opsi di bawah ini:'],
        'action' => ['button' => 'Lihat pilihan', 'sections' => $sections]
    ]
];

$ch = curl_init($baseUrl . '/messages');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_POSTFIELDS => json_encode($payload),
    CURLOPT_HTTPHEADER => ['Authorization: Bearer ' . $apiKey, 'Content-Type: application/json', 'Accept: application/json'],
    CURLOPT_RETURNTRANSFER => true
]);
$response = curl_exec($ch);
echo $response;
// Saat user pilih item, webhook menerima interactive.button_reply dengan payload = row id
const API_KEY = '{{ $apiKey }}';
const BASE_URL = '{{ $baseUrl }}';
const to = '628123456789';

// Data dinamis: dari database atau input (maks. 10 section, total 10 item)
const items = [
  { id: 'opt_1', title: 'Opsi 1', description: 'Keterangan' },
  { id: 'opt_2', title: 'Opsi 2', description: '' },
  { id: 'opt_3', title: 'Opsi 3', description: '' },
];
// Dari DB: const items = await db.query('SELECT id, title, description FROM options LIMIT 10');

const sections = [{ title: 'Pilihan', rows: items.map(i => ({ id: i.id, title: i.title, description: i.description || undefined })) }];

const payload = {
  to,
  type: 'interactive',
  interactive: {
    type: 'list',
    body: { text: 'Silakan pilih opsi di bawah ini:' },
    action: { button: 'Lihat pilihan', sections }
  }
};

const res = await fetch(BASE_URL + '/messages', {
  method: 'POST',
  headers: { 'Authorization': 'Bearer ' + API_KEY, 'Content-Type': 'application/json', 'Accept': 'application/json' },
  body: JSON.stringify(payload)
});
console.log(await res.json());
// Webhook: interactive.list_reply.payload = id item yang dipilih
import requests

API_KEY = '{{ $apiKey }}'
BASE_URL = '{{ $baseUrl }}'
to = '628123456789'

# Data dinamis: dari database atau list (maks. 10 section, total 10 item)
items = [
    {'id': 'opt_1', 'title': 'Opsi 1', 'description': 'Keterangan'},
    {'id': 'opt_2', 'title': 'Opsi 2', 'description': ''},
]
# Dari DB: items = [dict(row) for row in conn.execute('SELECT id, title, description FROM options LIMIT 10').fetchall()]

sections = [{'title': 'Pilihan', 'rows': [{'id': r['id'], 'title': r['title'], 'description': r.get('description') or ''} for r in items]}]

payload = {
    'to': to,
    'type': 'interactive',
    'interactive': {
        'type': 'list',
        'body': {'text': 'Silakan pilih opsi di bawah ini:'},
        'action': {'button': 'Lihat pilihan', 'sections': sections}
    }
}

r = requests.post(f'{BASE_URL}/messages', json=payload, headers={'Authorization': f'Bearer {API_KEY}', 'Accept': 'application/json'})
print(r.status_code, r.json())
# Webhook: interactive.list_reply.payload = id item yang dipilih
// List Button - payload dinamis (dari API/DB/array)
const API_KEY = '{{ $apiKey }}';
const BASE_URL = '{{ $baseUrl }}';
const to = '628123456789';

// Generate list dari array/DB (maks. 10 section, total 10 item)
function buildListPayload(items) {
  const rows = items.map(i => ({ id: i.id, title: i.title, description: i.description || undefined }));
  return {
    to,
    type: 'interactive',
    interactive: {
      type: 'list',
      body: { text: 'Silakan pilih opsi di bawah ini:' },
      action: { button: 'Lihat pilihan', sections: [{ title: 'Pilihan', rows }] }
    }
  };
}

const items = [
  { id: 'opt_1', title: 'Opsi 1', description: 'Keterangan' },
  { id: 'opt_2', title: 'Opsi 2', description: '' }
];
const payload = buildListPayload(items);

fetch(BASE_URL + '/messages', {
  method: 'POST',
  headers: { 'Authorization': 'Bearer ' + API_KEY, 'Content-Type': 'application/json', 'Accept': 'application/json' },
  body: JSON.stringify(payload)
}).then(res => res.json()).then(console.log);
// Saat user pilih item: webhook mendapat interactive.list_reply dengan payload = id
@endsection @push('scripts') @endpush