Kalau Anda sudah punya situs web sendiri (WordPress, Wix, Squarespace, HTML biasa, jenisnya tidak terlalu penting), kode sematan memungkinkan Anda menempatkan fitur bergabung, acara, dan donasi Anggota langsung di situs itu, dan semua yang dilakukan orang di sana tetap mengalir kembali ke akun Anggota Anda.

Dua cara menempatkan Anggota di web

Anda bisa memakai situs web terbitan Anggota, yang sudah bawaan dan tidak perlu kode (lihat pembuat situs web), atau sematkan widget ke situs web yang sudah Anda kelola, menggunakan kode di bawah. Keduanya berkomunikasi dengan akun yang sama, jadi anggota, acara, pembayaran, dan pesanan tetap di satu tempat, apa pun yang Anda pilih.

Membuat kunci sematan

1. Buka Lainnya → Pengaturan → Kode Sematan.
2. Tambahkan alamat web tempat widget akan berjalan ke Origin yang diizinkan, satu per baris, misalnya https://www.asosiasianda.org. Widget hanya berjalan di domain yang Anda cantumkan di sini.
3. Simpan untuk mendapatkan kunci publik Anda (diawali pk_).

Menyalin cuplikan widget

Pengaturan → Kode Sematan memberi Anda cuplikan siap pakai untuk setiap widget (bergabung ke level keanggotaan, login anggota, daftar acara, kalender acara, formulir donasi, dan toko jika toko aktif), yang sudah terisi dengan kunci Anda. Salin yang Anda inginkan dan tempel ke dalam HTML situs web Anda di tempat widget harus muncul.

Tombol bergabung keanggotaan (satu per level keanggotaan):

<div id="join-gold"
  data-checkout="membership"
  data-mode="join"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  data-membership-level-id="12"
  data-payment-method="online"
  data-api-base="https://anggota.app/api"></div>
<script src="https://anggota.app/embed/anggota.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>Anggota.boot(document.getElementById('join-gold'));</script>

Daftar acara:

<div id="ac-events"
  data-checkout="events"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  data-site-base="https://anggota.app"
  data-api-base="https://anggota.app/api"
  data-limit="10"
  data-desktop-cards="3"
  data-slider="true"></div>
<script src="https://anggota.app/embed/anggota.js"></script>
<script>Anggota.boot(document.getElementById('ac-events'));</script>

Formulir donasi:

<div id="ac-donate"
  data-checkout="donate"
  data-publishable-key="YOUR_PUBLISHABLE_KEY"
  data-currency="IDR"
  data-api-base="https://anggota.app/api"></div>
<script src="https://anggota.app/embed/anggota.js"></script>
<script>Anggota.boot(document.getElementById('ac-donate'));</script>

Tersedia juga widget login anggota (data-checkout="login"), toko (data-checkout="shop"), galeri foto (data-checkout="gallery"), dan direktori (data-checkout="directory"). Selalu salin cuplikan persis dari Pengaturan → Kode Sematan, karena cuplikan itu sudah berisi kunci asli Anda. Baris js.stripe.com hanya diperlukan untuk widget yang menerima pembayaran kartu secara online.

Login anggota tersedia dalam dua bentuk, keduanya tercantum di Pengaturan → Kode Sematan: bawaannya adalah tombol yang mengarahkan anggota ke halaman masuk yang dihosting; menambahkan data-mode="inline" akan menampilkan kolom email langsung di halaman Anda, tanpa pengalihan.

Widget galeri foto

Widget galeri menampilkan galeri foto Anda - galeri yang sama yang Anda kelola di ruang kerja - di situs Anda sendiri. Bawaannya menampilkan seluruh galeri dengan satu tab per bagian; pemilih di halaman Kode Sematan menulis ulang cuplikannya untuk menampilkan satu bagian saja. Tata letak, kolom, dan perilaku klik mengikuti pengaturan tampilan galeri Anda, jadi perubahan di Anggota juga mengubah sematannya.

Widget direktori

Widget Direktori menempatkan salah satu direktori Anda di situs Anda: kisi gambar sampul dengan filter kategori dan pencarian langsung, setiap kartu tertaut ke halaman lengkap entrinya. Cuplikannya muncul di Pengaturan → Kode Sematan setelah direktori diaktifkan, sudah disetel ke warna aksen situs Anda (data-accent-color), dan data-columns mengatur jumlah kolom kisi di desktop.

Setiap cuplikan menampilkan satu direktori, yang ditentukan oleh data-directory="alamat-webnya". Jika Anda punya lebih dari satu direktori publik, pilih di Direktori mana di samping cuplikan dan kodenya ikut berubah. Cuplikan tanpa baris data-directory menampilkan direktori bawaan Anda (direktori bisnis, jika Anda punya), jadi cuplikan yang dipasang sebelum ada banyak direktori tetap berfungsi.

Widget ini hanya bekerja untuk direktori yang pengaturan Siapa yang bisa melihat-nya Publik - direktori hanya anggota menolak tampil di situs eksternal.

Widget Portal anggota

Widget Portal anggota (data-checkout="member-portal") memberi anggota yang sudah masuk panel akun mereka sendiri di situs Anda, dengan empat tab:

• Membership (Keanggotaan) - level dan status mereka, dengan tombol Renew now (Perpanjang sekarang) saat perpanjangan jatuh tempo
• My events (Acara saya) - acara yang sudah mereka daftari
• Invoices (Faktur) - faktur mereka dan status lunas masing-masing
• Profile (Profil) - nama depan, nama belakang, telepon, dan organisasi, yang bisa mereka ubah sendiri

Widget ini hanya soal mereka, jadi dengan sengaja tidak menampilkan acara mendatang atau donasi (itu tugas widget lain).

Pengunjung yang belum masuk hanya melihat pesan singkat dan tautan Log in here (Masuk di sini), jadi widget ini aman ditempatkan di halaman publik.

Widget formulir kontak

Widget Formulir kontak (data-checkout="contact") menempatkan formulir pertanyaan di situs Anda. Pertanyaan masuk lewat email dan balasan langsung kembali ke orang yang menulis. Anda menentukan ke mana pertanyaan itu mendarat di Pengaturan → Kode Sematan → Pengaturan Kontak, dan di sana Anda juga bisa menambahkan pilihan subjek jika ingin pertanyaan tersortir.

Anggota yang sudah masuk

Begitu seorang anggota masuk melalui widget Anggota mana pun, widget lainnya mengenali mereka selama 24 jam berikutnya, hanya di domain Anda:

• Tombol bergabung berhenti menawarkan level yang sudah mereka miliki. Sebagai gantinya, tombol menampilkan Renew (Perpanjang) saat perpanjangan jatuh tempo, menandai current plan (paket mereka saat ini), atau mengajak mereka menghubungi Anda untuk berganti paket.
• Formulir datang sudah terisi dengan detail mereka, dengan email terkunci pada akun tempat mereka masuk.

Mengembalikan anggota ke situs Anda

Beberapa langkah (membayar dengan kartu, instruksi pembayaran offline, formulir pendaftaran yang lebih panjang) diserahkan ke halaman Anggota yang dihosting. Beri tahu Anggota di mana situs Anda berada agar halaman-halaman itu bisa mengantar orang pulang lagi:

1. Buka Pengaturan → Kode Sematan.
2. Di bagian Situs web utama, masukkan alamat situs Anda (harus salah satu origin yang Anda izinkan).
3. Simpan.

Setelah itu, tautan "Kembali ke…" mengarah ke situs Anda, bukan ke situs yang dihosting Anggota, dan anggota yang menyelesaikan pembayaran akan melihat halaman terima kasih yang beberapa detik kemudian mengembalikan mereka ke halaman persis tempat mereka memulai.

Tips: Anda bebas menata halaman di sekitarnya sesuka Anda - widget dirender di dalam <div> yang Anda tempatkan, sehingga menyatu rapi dengan tata letak Anda sendiri.

Selanjutnya: lebih suka halaman siap pakai? Lihat pembuat situs web.