Langkah 1: Dapatkan widget key Photta Anda
Masuk ke Dashboard Photta Business di business.photta.app. Buka Pengaturan → API Keys dan salin kunci yang dapat dipublikasikan (publishable key) Anda, yang dimulai dengan pk_live_. Ini adalah satu-satunya kredensial yang Anda butuhkan. Sebelum kunci berfungsi, tambahkan domain toko WooCommerce Anda (misalnya, mystore.com) ke Pengaturan → Allowed Domains. Pemeriksaan domain berjalan pada setiap permintaan try-on, jadi daftar domain yang diizinkan harus diatur sebelum Anda mengaktifkannya.
Jika Anda melakukan pengujian secara lokal pada subdomain seperti localhost atau URL staging, tambahkan domain tersebut ke daftar yang diizinkan secara terpisah. Anda dapat menambahkan hingga 10 domain pada paket berbayar apa pun. Akun uji coba mengizinkan satu domain. Setelah domain Anda terdaftar, permintaan dari asal tersebut akan segera diterima — tidak ada penundaan propagasi.
Langkah 2: Pilih shortcode vs tag skrip
WooCommerce memberi Anda dua jalur integrasi yang rapi. Pendekatan shortcode ([photta_widget pk="pk_live_..."]) memungkinkan Anda menempelkan widget ke lokasi tertentu di dalam template halaman produk atau hook WooCommerce khusus — ideal jika Anda ingin tombol muncul tepat di antara galeri produk dan tombol Tambahkan ke Keranjang. Untuk menggunakan shortcode, tempelkan langsung ke file template produk WooCommerce single-product/add-to-cart/simple.php, atau gunakan blok pembuat halaman (page builder).
Pendekatan tag skrip memasukkan SDK secara global melalui file functions.php tema Anda menggunakan wp_enqueue_script. Tambahkan kode berikut ke functions.php tema anak Anda: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Ini merender tombol widget di setiap halaman produk secara otomatis, tanpa perubahan per template. Sebagian besar pedagang lebih menyukai pendekatan tag skrip karena kesederhanaannya.
Langkah 3: Tempel dan simpan cuplikan pilihan Anda
Untuk jalur shortcode: buka override template WooCommerce tema anak Anda untuk halaman produk tunggal. Tempelkan [photta_widget pk="pk_live_..."] pada posisi vertikal yang tepat di mana Anda ingin tombol muncul. Simpan file tersebut. Perender shortcode didaftarkan oleh helper ringan Photta — tidak diperlukan file plugin, karena SDK itu sendiri yang mendaftarkan handler shortcode saat dimuat.
Untuk jalur tag skrip: buka Tampilan → Editor Berkas Tema di admin WordPress Anda, navigasikan ke functions.php tema anak Anda, dan tambahkan cuplikan tindakan wp_footer yang ditunjukkan pada Langkah 2. Klik Perbarui Berkas untuk menyimpan. Verifikasi bahwa cuplikan telah disimpan dengan menyegarkan editor dan mengonfirmasi bahwa kode tersebut ada. Jika Anda menggunakan plugin caching (WP Rocket, W3 Total Cache), bersihkan cache sekarang agar skrip footer baru dapat ditampilkan.
Langkah 4: Verifikasi widget muncul di toko Anda
Navigasikan ke halaman produk di toko WooCommerce Anda di jendela browser pribadi. Anda akan melihat tombol 'Coba secara virtual' di dekat bagian Tambahkan ke Keranjang. Klik tombol tersebut, unggah foto uji, dan verifikasi hasil try-on yang dirender. Jika tombol tidak muncul, buka konsol browser (F12) dan cari kesalahan photta. Kesalahan domain 403 berarti domain Anda belum ada dalam daftar Allowed Domains.
Periksa juga apakah tag skrip SDK muncul di sumber HTML halaman dengan menekan Ctrl+U (Lihat Sumber) dan mencari photta. Jika tag tidak ada tetapi Anda telah menambahkan hook wp_footer, periksa kembali apakah tema Anda memanggil wp_footer() di template footer-nya — beberapa tema lama atau yang dikustomisasi secara besar-besaran mengabaikan panggilan ini. Menambahkan <?php wp_footer(); ?> sebelum penutup </body> di footer.php Anda akan memperbaiki hal ini.
Langkah 5: Konfigurasikan visibilitas per kategori
Secara default, tombol widget muncul di semua halaman produk. Untuk membatasinya pada kategori tertentu, tambahkan atribut data-categories ke tag skrip Anda dengan daftar slug kategori WooCommerce yang dipisahkan koma: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>. SDK membaca data kategori WooCommerce halaman saat ini dan menyembunyikan tombol pada halaman yang tidak cocok secara otomatis.
Untuk pengguna shortcode, tempatkan shortcode hanya di template yang terkait dengan kategori target, atau bungkus shortcode dalam kondisional WooCommerce: gunakan fungsi PHP has_term() untuk memeriksa apakah produk saat ini termasuk dalam kategori target sebelum mengeluarkan shortcode. Pola ini memberi Anda kontrol bedah atas jenis produk mana yang menampilkan opsi try-on tanpa menduplikasi template.