Panduan Pemasangan & Integrasi PushNotif

PushNotif dirancang agar bisa dipasang oleh siapa saja dalam waktu kurang dari 3 menit — tanpa perlu mengubah pengaturan DNS domain Anda.

Langkah 1: Tambahkan Website & Unggah Logo Anda

1. Masuk ke Dashboard PushNotif dan buka menu Pengaturan Merek.
2. Pada bagian 01. Tambah Website / Merek Baru, isi Nama Bisnis dan URL Website Anda.
3. Pilih file gambar Logo langsung dari HP/Laptop Anda (PNG/JPG/WebP/SVG maks 500 KB), lalu klik Simpan & Buat Kunci Website.

Langkah 2: Taruh File Service Worker (pushnotif-sw.js)

Unduh file pushnotif-sw.js dan letakkan di folder paling luar (root) website Anda sehingga bisa diakses di https://domain-anda.com/pushnotif-sw.js.

Kenapa ini penting? Karena dengan adanya file tersebut di domain Anda, browser Chrome, Safari, dan Android akan menampilkan 100% Nama dan Logo Website Anda sendiri tanpa perlu menyentuh pengaturan DNS!

Langkah 3: Tempelkan Baris Kode HTML

Salin kode berikut tepat sebelum tag penutup </body> di website Anda:

<script src="https://pushnotif.biz.id/sdk/pushnotif.js"></script>
<script>
  PushNotif.init({
    appId: "APP_ID_WEBSITE_ANDA",
    apiBase: "https://pushnotif.biz.id",
    autoPrompt: true
  });
</script>

Cara Pasang 10 Detik dengan AI Coding Assistant (Cursor / Claude Code)

Jika Anda membangun website menggunakan AI Coding Assistant (seperti Cursor, Claude Code, Windsurf, atau GitHub Copilot), Anda cukup menyalin perintah satu baris dari menu Pengaturan Merek → 02. Pasang & Integrasikan:

Pasang PushNotif Web Push SDK ke dalam codebase project ini.
Ikuti instruksi teknis lengkap di: https://pushnotif.biz.id/api/v1/apps/APP_ID_ANDA/ai-guide.md

AI Anda akan otomatis mengunduh file pushnotif-sw.js ke folder public/ dan memasang script inisialisasi sesuai framework Anda (Next.js, Laravel, WordPress, atau Vue/Nuxt).

Mengirim Notifikasi Otomatis dari Aplikasi / Backend Anda

Setiap akun memiliki Secret API Key unik (berawalan pn_live_...) yang dapat dilihat di menu API & Profil Akun. Setiap 1 pesan yang berhasil terkirim ke perangkat pelanggan memotong 1 Kredit.

Contoh Request JSON Standar (cURL / Node.js / Python / Go)

curl -X POST https://pushnotif.biz.id/api/v1/notifications   -H "Content-Type: application/json"   -H "Authorization: Bearer pn_live_API_KEY_UNIK_ANDA"   -d '{
    "app_id": "app_xxxxxxxx",
    "title": "Pesanan #INV-204 Telah Dikirim!",
    "body": "Paket Anda sedang dibawa kurir menuju alamat tujuan.",
    "url": "https://app.cakrawalacloud.id/orders/204"
  }'

Contoh Request Form PHP / WordPress / Webhook Tanpa JSON

curl -X POST https://pushnotif.biz.id/api/v1/notifications   -H "Authorization: Bearer pn_live_API_KEY_UNIK_ANDA"   -d "app_id=app_xxxxxxxx&title=Info+Terbaru&body=Klik+untuk+membuka&url=https://app.cakrawalacloud.id"

Menyalakan Pengingat Rutin (Pagi & Sore / Jadwal Harian) dari Aplikasi Anda

Untuk notifikasi yang berjalan rutin setiap hari (misalnya pengingat pagi pukul 06:00 & sore pukul 18:00, atau jadwal operasional/laporan harian), pasang salah satu kode berikut di server/aplikasi Anda:

Daftar Rumus Jadwal, Trigger Event, & Segmen Kustom (Siap Pakai di Dashboard & MCP)

Opsi A: Linux Crontab (Server VPS)

# Jalan otomatis setiap jam 06:00 Pagi dan 18:00 Sore
0 6,18 * * * curl -s -X POST "https://pushnotif.biz.id/api/v1/notifications"   -H "Authorization: Bearer pn_live_API_KEY_UNIK_ANDA"   -d "app_id=app_xxxxxxxx&title=Pengingat+Rutin&body=Waktunya+cek+jadwal+hari+ini&url=https://app.cakrawalacloud.id"

Opsi B: Node.js / Next.js (node-cron)

import cron from "node-cron";

cron.schedule("0 6,18 * * *", async () => {
  await fetch("https://pushnotif.biz.id/api/v1/notifications", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer pn_live_API_KEY_UNIK_ANDA"
    },
    body: JSON.stringify({
      app_id: "app_xxxxxxxx",
      title: "Pengingat Jadwal Hari Ini",
      body: "Ketuk untuk membuka rincian jadwal terbaru.",
      url: "https://app.cakrawalacloud.id"
    })
  });
});

Opsi C: PHP / Laravel Task Scheduling (routes/console.php)

use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Schedule;

Schedule::call(function () {
    Http::withToken('pn_live_API_KEY_UNIK_ANDA')
        ->post('https://pushnotif.biz.id/api/v1/notifications', [
            'app_id' => 'app_xxxxxxxx',
            'title'  => 'Pengingat Jadwal Hari Ini',
            'body'   => 'Ketuk untuk membuka rincian jadwal terbaru.',
            'url'    => 'https://app.cakrawalacloud.id',
        ]);
})->twiceDaily(6, 18);

Pindah ke PushNotif Tanpa Perlu Ubah Kode Lama Anda

Jika website atau aplikasi Anda sebelumnya memakai OneSignal atau Firebase (FCM), Anda tidak perlu membongkar ulang kode yang sudah ada. Cukup ganti alamat URL pengiriman Anda ke https://pushnotif.biz.id/api/v1/notifications, maka format pesan lama Anda tetap langsung terbaca otomatis:

{
  "app_id": "app_xxxxxxxx",
  "headings": { "en": "Judul Pesan Lama Anda" },
  "contents": { "en": "Isi pesan format OneSignal tetap langsung terkirim!" },
  "url": "https://app.cakrawalacloud.id"
}

Kunci Rahasia (API Key) Khusus Akun Anda & Cara Menggantinya

• 1 Akun = 1 Kunci Rahasia Sendiri: Setiap pengguna mendapatkan kunci API unik (berawalan pn_live_...) yang hanya bisa mengirim pesan ke website milik Anda sendiri.
• Cara Matikan & Ganti Kunci Baru (Revoke): Kalau kunci API Anda tidak sengaja terlihat orang lain atau ingin diganti baru, buka menu API & Profil Akun di Dashboard lalu klik tombol merah Revoke / Ganti Key Baru. Kunci yang lama akan langsung mati detik itu juga dan diganti dengan kunci baru.

Cara Pasang di Aplikasi HP (Android Play Store, iOS App Store, Flutter, & React Native)

Selain untuk Website biasa, PushNotif juga bisa mengirim notifikasi langsung ke aplikasi HP Android (.apk) dan iPhone (iOS). Jadi Anda cukup memakai 1 dashboard PushNotif untuk mengirim kabar ke pengunjung Website sekaligus pengguna aplikasi HP Anda.

Langkah 1: Masukkan File Kunci Firebase / Apple di Dashboard (Cukup Sekali)

1. Buka menu Pengaturan Merek di Dashboard PushNotif, lalu klik bagian Konfigurasi Aplikasi HP Native (Android APK & iOS).
2. Untuk Aplikasi Android (APK / Flutter): Ambil file service-account.json gratis dari akun Firebase aplikasi Anda (menu Project Settings → Service Accounts → Generate New Private Key), lalu pilih/unggah file tersebut di kolom nomor 1.
3. Untuk Aplikasi iPhone (iOS): Isi Key ID, Team ID, Bundle ID, dan unggah file kunci AuthKey.p8 dari akun Apple Developer Anda.

Langkah 2: Contoh Kode di Aplikasi Flutter (Android & iOS)

Tambahkan kode singkat ini di aplikasi Flutter Anda agar nomor token HP pengguna otomatis terdaftar ke PushNotif:

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> daftarNotifikasiHP() async {
  final messaging = FirebaseMessaging.instance;
  await messaging.requestPermission(alert: true, badge: true, sound: true);
  final tokenHP = await messaging.getToken();
  if (tokenHP == null) return;

  await http.post(
    Uri.parse('https://pushnotif.biz.id/api/v1/subscribe/mobile'),
    headers: {'Content-Type': 'application/json'},
    body: jsonEncode({
      'app_id': 'APP_ID_ANDA',
      'platform': 'android_fcm', // ganti 'ios_apns' jika di iPhone
      'device_token': tokenHP,
      'tags': 'all',
    }),
  );
}

Langkah 3: Contoh Kode di React Native / Expo

import * as Notifications from 'expo-notifications';

export async function daftarNotifikasiExpo() {
  const { data: tokenExpo } = await Notifications.getExpoPushTokenAsync();
  await fetch('https://pushnotif.biz.id/api/v1/subscribe/mobile', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      app_id: 'APP_ID_ANDA',
      platform: 'expo',
      device_token: tokenExpo,
      tags: 'all'
    })
  });
}

Tempat Terbaik Memasang Tombol Notifikasi & Aturan Saat Upload Ratusan Data

Supaya pengunjung website/aplikasi Anda senang menerima notifikasi dan tidak merasa terganggu, ikuti 2 tips sederhana ini:

1. Pasang Tombol "Aktifkan Notifikasi" di Tempat yang Pas (Jangan Menutupi Layar)

• Di Bagian Atas Website (Sebelah Menu / Pencarian): Taruh 1 ikon lonceng kecil di bagian atas halaman. Jadi kapan pun pengunjung ingin berlangganan info terbaru, mereka tinggal klik ikon lonceng tersebut tanpa terganggu popup besar yang menutupi bacaan.
• Di Dekat Daftar Produk / Jadwal / Info Penting: Pasang tombol kecil seperti Ingatkan Saya Jika Ada Info Baru tepat di atas tabel jadwal, halaman status pesanan, atau halaman kategori yang memang sering ditunggu pengunjung.

2. Penting: Jangan Kirim Notifikasi Otomatis Saat Sedang Upload Ratusan File Sekaligus!

Misalnya suatu hari Anda mengunggah 100 produk, dokumen, atau file baru sekaligus ke website Anda. Jangan mengatur sistem agar otomatis mengirim notifikasi setiap kali 1 file berhasil diunggah — karena HP pelanggan Anda akan berbunyi 100 kali berturut-turut (dianggap spam) dan saldo kredit Anda akan langsung terkuras habis.

Cara yang Benar & Hemat Kredit:

1. Biarkan Proses Upload Berjalan Tenang Tanpa Notifikasi: Matikan pengiriman notifikasi otomatis saat Anda sedang memasukkan banyak data/file sekaligus.
2. Cukup Kirim 1 Pesan Rangkuman Saja Setelah Selesai Upload: Setelah ke-100 file atau produk baru selesai diunggah semuanya, barulah kirim 1 kali pesan pengumuman kepada pelanggan Anda (cukup keluar 1 kredit per pelanggan!):

   {
     "app_id": "app_xxxxxxxx",
     "title": "100+ Koleksi & Konten Baru Telah Tersedia!",
     "body": "Kami baru saja menambahkan koleksi terbaru minggu ini. Ketuk untuk melihat semuanya.",
     "url": "https://app.cakrawalacloud.id/terbaru"
   }

Kendalikan PushNotif Cukup dengan Ngobrol Biasa ke AI Agent Anda

Kalau Anda memakai asisten AI seperti Claude Code, Cursor, Windsurf, atau Google Antigravity, Anda tidak perlu menghafal kode atau membuka dashboard. Cukup sambungkan PushNotif MCP Server satu kali di pengaturan editor AI Anda, lalu perintahkan AI dengan kalimat bahasa Indonesia sehari-hari!

1. Pasang Sekali Saja di Pengaturan MCP Editor AI Anda

Buka menu Settings → MCP Servers di aplikasi AI Anda (misal: .cursor/mcp.json atau claude_desktop_config.json), tempel konfigurasi ini, lalu ganti pn_live_... dengan Secret API Key milik akun Anda:

{
  "mcpServers": {
    "pushnotif": {
      "url": "https://pushnotif.biz.id/mcp",
      "headers": {
        "Authorization": "Bearer pn_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

2. Apa Saja yang Bisa Anda Perintahkan ke AI? (12 Kemampuan Otomatis)

Anda tidak perlu mengetik nama fungsi teknisnya di chat. Cukup ketik perintah biasa seperti contoh di bawah ini, dan AI Anda yang akan memanggil tool-nya secara otomatis di belakang layar:

• 1. Cek Saldo Kredit & Daftar Website Anda (Tool: list_apps)
  Contoh chat ke AI: "Cek sisa saldo kredit dan daftar website saya di PushNotif"
• 2. Daftarkan Website atau Aplikasi Baru (Tool: create_app)
  Contoh chat ke AI: "Tolong daftarkan website baruku https://app.cakrawalacloud.id ke PushNotif"
• 3. Pasang Tombol Lonceng & SDK Otomatis ke Kodingan Proyek (Tool: get_integration_guide)
  Contoh chat ke AI: "Ambil panduan integrasi PushNotif dan pasang tombol lonceng notifikasi di header website ini"
• 4. Kirim Pesan Notifikasi Saat Itu Juga (Tool: send_push_notification)
  Contoh chat ke AI: "Kirim push notifikasi ke semua pelanggan: Diskon Gajian 50% sudah dibuka hari ini!"
• 5. Jadwalkan Pengiriman Notifikasi (Sekali atau Rutin Harian) (Tool: schedule_push_notification)
  Contoh chat ke AI: "Jadwalkan pengingat otomatis setiap hari jam 08:00 pagi ke pelanggan aplikasi saya"
• 6. Lihat Laporan Hasil Pengiriman & Jumlah Klik (CTR) (Tool: get_campaign_analytics)
  Contoh chat ke AI: "Berapa orang yang menerima dan mengeklik notifikasi yang kita kirim kemarin?"
• 7. Cek Daftar Perangkat Pelanggan yang Aktif (Tool: list_subscribers)
  Contoh chat ke AI: "Cek sudah ada berapa perangkat Android, iPhone, dan Web yang berlangganan notifikasi"
• 8. Ganti Logo Notifikasi & Kalimat Pesan Sambutan (Tool: update_app_branding)
  Contoh chat ke AI: "Ubah pesan sambutan otomatis saat orang baru klik Izinkan di website saya"
• 9. Ubah Nama Perusahaan / Profil Workspace (Tool: update_profile)
  Contoh chat ke AI: "Ganti nama perusahaan di profil PushNotif saya menjadi PT Cakrawala Teknologi"
• 10. Hubungkan Kunci Aplikasi HP Android (APK) & iPhone (iOS) (Tool: configure_mobile_credentials)
  Contoh chat ke AI: "Baca file service-account.json Firebase di folder ini dan sambungkan ke akun PushNotif saya"
• 11. Buat Tagihan Isi Saldo Kredit via QRIS (Tool: create_qris_invoice)
  Contoh chat ke AI: "Buatkan tagihan isi saldo Paket Growth Rp 50.000 via QRIS di PushNotif"
• 12. Cek Status Pembayaran QRIS & Ambil Faktur Resmi (Tool: check_billing_and_qris_status)
  Contoh chat ke AI: "Saya sudah scan QRIS-nya barusan, coba cek apakah kreditnya sudah masuk dan minta link fakturnya"