Pemasangan manual

Tag ini adalah seluruh integrasinya. Ganti kunci dengan milik Anda, tempel sekali, dan jangan ubah apa pun yang lain: tidak ada atribut tambahan pada produk Anda, tidak ada tombol buatan Anda sendiri, tidak ada ID produk.


<script
  src="https://www.cabina.io/widget.iife.js"
  crossorigin="anonymous"
  async
  data-api-key="cab_live_API_KEY_ANDA">
</script>

Jangan tambahkan atribut integrity. URL bundle tidak diberi versi, sehingga hash yang dipatok akan membuat browser menolak skrip pada rilis kami berikutnya — tanpa suara, dan tanpa cara bagi kami untuk memperingatkan Anda.

Letakkan di mana saja di dalam <head>, atau tepat sebelum </body>. Keduanya berfungsi: skrip ini async dan menunggu halaman dengan sendirinya.

Pertama-tama: domain Anda

Sebelum menempel apa pun, izinkan domain toko Anda di dasbor Cabina: halaman Widget , bagian Domain yang diizinkan. Selama daftar itu kosong, widget tidak muncul di situs mana pun, bahkan dengan tag atau plugin yang terpasang dengan benar — dan ia tidak mengatakan alasannya.

Masukkan origin yang persis: https://shop.com dan https://www.shop.com adalah dua origin yang berbeda; jika toko menjawab di keduanya, tambahkan keduanya. Shopify dan Wix tidak memerlukan langkah ini: aplikasinya mendaftarkan domain dengan sendirinya saat dipasang.

Di mana menempelnya, per platform

Shopify

Themes

Di admin Shopify Anda, buka Online Store → Themes.

Edit code

Pada tema yang aktif, buka menu ⋯ dan pilih Edit code.

theme.liquid

Buka layout/theme.liquid.

Tempel

Tempel tag tepat sebelum tag penutup </head>.

Simpan

Simpan. Perubahan langsung aktif — tidak ada tema yang perlu dipublikasikan.

Shopify mengeluarkan gambar Open Graph di setiap halaman produk, sehingga pakaian ditemukan tanpa perlu apa pun lagi dari Anda.

WooCommerce

Di WooCommerce ada plugin: plugin ini mengerjakan tugas tag untuk Anda, dan tetap bertahan saat tema diganti.

Pasang plugin

Di WordPress buka Plugin → Tambah Baru, cari Cabina dan klik Pasang Sekarang, lalu Aktifkan. Ini adalah plugin di WordPress.org , dan pembaruannya datang dari sana seperti plugin lainnya. Dibutuhkan WordPress 6.5 atau lebih baru, dengan WooCommerce aktif.

Jika situs Anda tidak bisa memasang dari direktori, unduh cabina-woocommerce.zip dan unggah dari Plugin → Tambah Baru → Unggah Plugin.

Konfigurasikan

Buka Pengaturan → Cabina dan tempel API key cab_live_… Anda: Anda menemukannya di dasbor Cabina, di halaman Pemasangan, tab WooCommerce.

Selesai

Tombol muncul di halaman produk. Tidak ada yang perlu ditempel ke tema. Jika tidak muncul, hampir selalu domainnya yang belum ada: lihat bagian atas halaman ini.

Sebagai alternatif, tag dimasukkan ke tema:

Plugin snippet

Di WordPress, pasang plugin snippet kode (WPCode, Code Snippets) — atau gunakan child theme Anda.

Buat snippet

Buat snippet yang berjalan di header situs dan tempel tag di sana.

Atau child theme

Dengan child theme, tambahkan ke functions.php pada hook wp_head.

Periksa

Simpan dan buka sebuah halaman produk.

WooCommerce tidak mengeluarkan og:image tanpa plugin SEO. Cabina beralih ke gambar galeri — lihat Gambar pakaian.

Wix

Di Wix tidak ada tag yang ditempel: aplikasinya ada di Wix App Market, dan itu satu-satunya jalur.

App Market

Di dasbor Wix Anda, buka App Market dan cari “Cabina”.

Tambahkan

Tambahkan aplikasi dan izinkan situs: API key dikonfigurasi untuk Anda, tidak ada yang perlu disalin.

Publikasikan

Publikasikan situs — di Wix tidak ada yang aktif sampai Anda mempublikasikannya. Tombol muncul di halaman produk Wix Stores, ditempatkan di sana oleh aplikasi.

PrestaShop

Di PrestaShop ada modul: modul ini mengerjakan tugas tag untuk Anda, dan tetap bertahan saat tema diganti.

Unduh modul

Unduh cabina.zip . Berfungsi di PrestaShop 8 dan 9.

Unggah

Di back office buka Modules, klik Upload a module dan letakkan filenya.

Konfigurasikan

Klik Configure dan tempel API key cab_live_… Anda: Anda akan menemukannya di dasbor Cabina, di halaman Pemasangan, tab PrestaShop.

Selesai

Tombol muncul di halaman produk Anda. Tidak ada yang perlu ditempel ke tema, tidak ada cache yang perlu dibersihkan. Jika tidak muncul, hampir selalu domainnya yang belum ada: lihat bagian atas halaman ini.

Jika Anda lebih suka tidak memasang modul, tag dimasukkan ke tema:

Theme & Logo

Buka Design → Theme & Logo, lalu buka file tema Anda (atau gunakan FTP).

head.tpl

Buka templates/_partials/head.tpl di tema aktif Anda.

Tempel

Tempel tag sebelum {/block} penutup dari blok head.

Bersihkan cache

Simpan, lalu bersihkan cache di Advanced Parameters → Performance.

Tema lain apa pun

Temukan templatnya

Temukan templat yang menghasilkan <head> setiap halaman — nama filenya berbeda menurut platform.

Tempel

Tempel tag di mana saja di dalam <head>, atau tepat sebelum </body>.

Sekali saja

Tempel sekali saja. Salinan kedua akan berhenti sendiri dan memberi peringatan di konsol, tetapi tetap layak dihapus.

Muat ulang

Muat ulang sebuah halaman produk.

Cabina tidak memerlukan variabel templat, ID produk, maupun markup tambahan. Satu tag script adalah seluruh integrasinya.

Cara mengetahui bahwa ini berhasil

Buka sebuah halaman produk. Cabina menemukan blok pembelian Anda dan menaruh tombolnya tepat di bawahnya — Anda tidak menulis markup apa pun untuk ini.

Sebuah halaman produk: tombol Cabina berada tepat di bawah tombol Tambah ke keranjang.

Tombol mengambil teks dan warnanya dari pengaturan dasbor Anda, dan mewarisi font tema Anda.

Tidak ada tombol? Buka konsol browser Anda — Cabina mengatakan alasannya, dalam satu baris. Lompat ke Pemecahan masalah.

Memindahkan tombol

Cabina mencari blok pembelian menggunakan daftar di bawah, secara berurutan, dan menyisipkan tombolnya tepat setelah kecocokan pertama.

Titik jangkar	Platform umum
`.product-form__buttons`	Shopify
`form[action*="/cart/add"] .product-form__submit`	Shopify
`form[action*="/cart/add"]`	Shopify
`form.cart`	WooCommerce
`.single_add_to_cart_button`	WooCommerce
`.product-add-to-cart`	PrestaShop
`#add-to-cart-or-refresh`	PrestaShop

Pada tema kustom biasanya tidak ada satu pun yang cocok. Maka tombol ditambahkan ke ujung halaman — di bawah footer, di luar pandangan. Tidak ada yang rusak; tombol hanya berada di tempat yang salah.

Tema yang tidak dikenali Cabina: tombol mendarat di bagian paling bawah halaman, di bawah footer.

Perbaikannya adalah satu elemen kosong di templat produk Anda, di mana pun Anda menginginkan tombolnya:


<div data-cabina-target></div>

Atribut itu mengalahkan semua titik jangkar di atas, dan tombol ditempatkan di dalam elemen, bukan di sebelahnya.

Tema yang sama setelah menambahkan data-cabina-target: tombol kembali di bawah Tambah ke keranjang.

Gambar pakaian

Cabina membaca pakaian langsung dari halaman produk Anda. Ia mencoba, secara berurutan: og:image, lalu twitter:image, lalu gambar pertama yang cocok dengan salah satu selektor ini:

Selektor galeri	Platform umum
`.woocommerce-product-gallery__image img`	WooCommerce
`img.wp-post-image`	WooCommerce
`.wp-block-woocommerce-product-image img`	WooCommerce
`.product__image img`	Shopify
`.product-image img`	Shopify
`.product-photo img`	Shopify
`.product-single__photo img`	Shopify
`[data-product-image] img`	Shopify
`.product-featured-image img`	Shopify
`.product-gallery img`	Shopify
`.product-img img`	Shopify
`.product__media img`	Shopify
`.main-product-image img`	Shopify

Jika tak satu pun dari ketiganya menemukan gambar, tombol tetap muncul dan percobaan gagal di tengah jalan. Inilah satu-satunya kegagalan yang disadari pembeli Anda sebelum Anda.

Perbaikan umum, yang berlaku di platform apa pun, adalah mengeluarkan gambar Open Graph di templat produk Anda:


<meta property="og:image" content="https://toko-anda.com/gambar/produk.jpg">

Ini layak dilakukan bagaimanapun juga: tag yang sama dipakai Facebook, WhatsApp, dan Slack untuk pratinjau tautan produk Anda.

Apa yang dilihat pembeli Anda

Kamar pas Cabina terbuka di atas halaman produk, meminta foto atau model yang sudah tersedia.

Tidak ada yang meninggalkan perangkat mereka sampai mereka mencentang kotak persetujuan, dan model yang sudah tersedia sama sekali tidak memerlukan foto.

Teks tombol adalah milik Anda, dipilih di dasbor: itu bukan terjemahan dari Cabina. Antarmuka kamar pas, sebaliknya, memang mengikuti bahasa halaman.

Untuk agen AI

Kontrak yang sama, ditulis untuk mesin dan disajikan sebagai markdown mentah — tanpa tangkapan layar, ditambah pohon keputusan dan perintah untuk memverifikasi pemasangan dari terminal: cabina.io/en/docs/agent.md .