Sambungkan WhatsApp ke Sistem Anda Sendiri

Contoh Integrasi Laravel — Halaman Scan QR Sendiri

Bangun halaman "Hubungkan WhatsApp" di website Laravel Anda sendiri, ditenagai endpoint generate-qr di atas. Alurnya: tampilkan gambar QR → polling tiap beberapa detik untuk cek status → otomatis pindah tampilan begitu status jadi "Terhubung".

1. Route (routes/web.php)

Route::get('/hubungkan-whatsapp', [WhatsAppController::class, 'tampilQr']);
Route::get('/hubungkan-whatsapp/cek-status', [WhatsAppController::class, 'cekStatus']);

2. Controller (app/Http/Controllers/WhatsAppController.php)

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\Http;

class WhatsAppController extends Controller
{
    // Simpan di file .env Laravel Anda, JANGAN hardcode di kode:
    // WAGATEWAY_BASE_URL=https://ruangnotif.web.id/    // WAGATEWAY_API_KEY=API_KEY_ANDA
    public function tampilQr()
    {
        return view('whatsapp.scan');
    }

    // Dipanggil berulang oleh JS (polling) dari Blade view di bawah
    public function cekStatus()
    {
        $response = Http::get(config('services.wagateway.base_url') . '/api/v1/generate-qr', [
            'api_key' => config('services.wagateway.api_key'),
            // 'device_id' => 12, // opsional, kalau akun punya lebih dari 1 perangkat
        ]);

        if ($response->failed()) {
            return response()->json(['ok' => false, 'error' => 'Gagal menghubungi RuangNotif.'], 502);
        }

        return response()->json($response->json());
    }
}

3. Tambahkan ke config/services.php

'wagateway' => [
    'base_url' => env('WAGATEWAY_BASE_URL'),
    'api_key'  => env('WAGATEWAY_API_KEY'),
],

4. View (resources/views/whatsapp/scan.blade.php)

<div class="text-center">
    <div id="wadahQr">
        <img id="gambarQr" src="" alt="QR Code" class="mx-auto w-64 h-64 hidden">
        <p id="teksMuat">Memuat QR Code...</p>
    </div>
    <div id="wadahTerhubung" class="hidden">
        <p class="text-green-600 font-bold">✅ WhatsApp berhasil terhubung!</p>
        <p id="teksNomor"></p>
    </div>
</div>

<script>
    let timerPolling = null;

    async function cekStatusQr() {
        const res = await fetch('/hubungkan-whatsapp/cek-status');
        const data = await res.json();

        if (!data.ok) return; // coba lagi di polling berikutnya

        if (data.status === 'Terhubung') {
            clearInterval(timerPolling);
            document.getElementById('wadahQr').classList.add('hidden');
            document.getElementById('wadahTerhubung').classList.remove('hidden');
            document.getElementById('teksNomor').textContent = 'Nomor: ' + data.phone_number;
            return;
        }

        // Masih "Belum Terhubung" -> tampilkan/refresh gambar QR-nya
        if (data.qr_image) {
            document.getElementById('teksMuat').classList.add('hidden');
            const img = document.getElementById('gambarQr');
            img.src = data.qr_image;
            img.classList.remove('hidden');
        }
    }

    cekStatusQr(); // panggil sekali di awal
    timerPolling = setInterval(cekStatusQr, 4000); // lalu tiap 4 detik cek ulang
</script>

💡 QR Code WhatsApp berlaku sekitar 20-60 detik lalu kadaluarsa — makanya polling di atas terus mengambil gambar terbaru tiap 4 detik, otomatis dapat QR baru kalau yang lama sudah basi, sampai akhirnya user berhasil scan.

Route::post('/hubungkan-whatsapp/putuskan', [WhatsAppController::class, 'putuskanKoneksi']);

public function putuskanKoneksi()
{
    $response = Http::post(config('services.wagateway.base_url') . '/api/v1/putuskan-koneksi', [
        'api_key'   => config('services.wagateway.api_key'),
        'device_id' => 12, // ganti sesuai Device ID akun Anda (lihat halaman Scan WA)
    ]);

    if ($response->failed()) {
        return response()->json(['ok' => false, 'error' => 'Gagal memutus koneksi.'], 502);
    }

    return response()->json($response->json());
}

<div id="wadahTerhubung" class="hidden">
    <p class="text-green-600 font-bold">✅ WhatsApp berhasil terhubung!</p>
    <p id="teksNomor"></p>
    <button onclick="putuskanKoneksi()" class="text-red-600 font-semibold mt-3">Putuskan Koneksi</button>
</div>

<script>
    async function putuskanKoneksi() {
        if (!confirm('Yakin putuskan koneksi WhatsApp ini?')) return;

        const res = await fetch('/hubungkan-whatsapp/putuskan', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json',
            },
        });
        const data = await res.json();

        if (data.ok) {
            alert(data.message); // "Koneksi WhatsApp berhasil diputuskan..."
            location.reload(); // muat ulang halaman -> otomatis tampil QR baru lagi
        } else {
            alert('Gagal: ' + data.error);
        }
    }
</script>

Ide Penggunaan di Sistem Anda

Endpoint di atas cukup sederhana, tapi bisa jadi fondasi untuk banyak sekali kebutuhan notifikasi bisnis Anda. Beberapa contoh nyata yang bisa langsung Anda terapkan: