Embed di website

Pasang widget booking Termilo di website apa pun: mode inline atau modal, sebuah custom element yang sudah CSS-isolated, dan opsi atribut yang ringkas. Booking lewat embed memakai API yang sama dengan halaman hosted.

Lihat .md

Cara kerja#

Embed adalah satu tag <script> yang mendaftarkan custom element <termilo-booking>. Element itu di-render di dalam Shadow DOM, jadi gaya situs Anda dan gaya widget tidak saling bocor. Widget memanggil API booking yang sama dengan halaman hosted — alur yang sama (pilih layanan → pilih jam → isi data → konfirmasi), penguncian slot yang sama, audit yang sama — dan booking yang dibuat lewat embed ditandai source: "embed".

Tanpa rahasia di browser

Widget tidak pernah menyentuh D1/KV/R2 secara langsung dan tidak membawa token tenant apa pun. Semua aksi melewati route Worker yang origin-checked.

Pasang dengan script#

Tempelkan dua baris ini di tempat widget harus muncul. Skrip auto-init dari atribut data-termilo-* pada tag <script> yang memuatnya — tidak perlu kode JS tambahan untuk kasus umum.

<div id="booking"></div>  <script src="https://embed.termilo.id/widget.js" data-termilo-tenant="studio-rapi" data-termilo-mode="inline" data-termilo-target="#booking" data-termilo-accent="#087C70" async ></script>

Target widget

Untuk mode inline, set data-termilo-target ke selector container Anda. Bila atribut itu kosong, widget disisipkan tepat setelah tag <script>.

Atribut data-termilo-*#

Atribut auto-init yang dibaca dari tag <script> yang memuat widget. Hanya data-termilo-tenant yang wajib.

PARAMETERTIPEWAJIBKETERANGAN

data-termilo-tenantstringwajibSlug akun (tenant). Menentukan layanan & ketersediaan yang tampil. Tanpa ini widget tidak akan tampil.

data-termilo-mode"inline" | "modal"opsionalTata letak widget. Bawaan "inline" (tertanam di halaman). "modal" memunculkan tombol pemicu + overlay.

data-termilo-targetCSS selectoropsionalSelector elemen tempat widget dipasang, mis. "#booking". Jika kosong, widget disisipkan tepat setelah tag <script>.

data-termilo-accentwarna CSSopsionalWarna aksen tombol & kontrol, mis. "#087C70". Kosongkan untuk tampilan netral white-label.

Bila Anda menulis custom element <termilo-booking> langsung (lihat tab di atas), element itu memakai atribut tanpa awalan data-:

PARAMETERTIPEWAJIBKETERANGAN

tenantstringwajibSlug tenant. Bawaan "demo" bila tidak diisi.

accentwarna CSSopsionalDisetel ke variabel --tm-accent di dalam Shadow DOM.

powered-by"true" | "false"opsionalTampilkan footer "Powered by Termilo". Setel "false" untuk menyembunyikannya (white-label). Bawaan tampil.

Mode inline & modal#

Atribut data-termilo-mode memilih tata letak:

inline (bawaan) — widget tertanam langsung di dalam container data-termilo-target.
modal — skrip memasang sebuah tombol pemicu; mengkliknya membuka widget dalam overlay layar penuh yang bisa ditutup lewat klik di luar atau tombol Esc.

Label tombol modal

Label tombol pemicu modal diambil dari triggerLabel saat memanggil Termilo.init (bawaan "Pesan sekarang"). Atribut auto-init tidak mengekspos label ini; pakai pemanggilan JavaScript untuk mengubahnya.

Pasang via JavaScript#

Untuk kontrol penuh, panggil API global window.Termilo sendiri alih-alih mengandalkan auto-init. Berguna untuk SPA, pemasangan kondisional, atau saat menentukan elemen target lewat referensi DOM.

// Pasang inline ke dalam sebuah container. window.Termilo.init({ tenant: "studio-rapi", mode: "inline", selector: "#booking", // atau: target: el (HTMLElement) accent: "#087C70", poweredBy: true, });

Termilo.init menerima { tenant, mode, accent, selector, target, triggerLabel, poweredBy }. Beri salah satu dari selector (string) atau target (HTMLElement) sebagai induk; bila keduanya tidak ditemukan, init berhenti diam-diam. Termilo.openModal membuka overlay langsung tanpa tombol pemicu.

Event booking#

Setelah booking terkirim, widget men-dispatch sebuah CustomEvent bernama termilo:booking. Event ini bubbles dan composed (menembus batas Shadow DOM), jadi Anda bisa mendengarkannya di document.

// Widget men-dispatch CustomEvent "termilo:booking" (bubbles + composed) // saat booking terkirim. detail = { code, serviceName, startMs }. document.addEventListener("termilo:booking", (e) => { const { code, serviceName, startMs } = e.detail; console.log("Booking baru:", code, serviceName, new Date(startMs)); // mis. kirim event ke analytics / pixel konversi });

Bentuk event.detail:

termilo:bookingevent.detail

{

"code": "TRM-2026-4821",

"serviceName": "Haircut + Cuci",

"startMs": 1782900000000

}

Event yang sama dengan halaman hosted

Booking dari embed menempuh lifecycle yang identik dengan booking halaman hosted (held → confirmed → …) dan menulis audit yang sama. Yang membedakan hanya source: "embed" pada record booking.

White-label#

Widget netral secara bawaan agar cocok dipasang reseller di brand mereka sendiri:

Set data-termilo-accent (atau accent) ke warna brand untuk mewarnai tombol & kontrol. Kosongkan untuk tampilan netral.
Set powered-by="false" pada custom element (atau poweredBy: false di Termilo.init) untuk menyembunyikan footer "Powered by Termilo".
Shadow DOM menjaga isolasi gaya, jadi widget tidak mewarisi CSS situs induk dan sebaliknya.

← Sebelumnya

Booking grup & kelas

Berikutnya →

Google Calendar & Meet