Amalsholeh Widget

AmalSholeh widget adalah script yang berfungsi untuk menyematkan program dan payment gateway amalsholeh ke dalam situs pengguna.

Penggunaan

Untuk mulai menggunakan widget, panggil script berikut sebelum penutup tag body

<script src="https://donasi.amalsholeh.com/widget/script.js" async defer></script>

Program card

Widget Program card digunakan untuk meng-embed program AmalSholeh ke dalam situs anda

<article
  class="as-program-card"
  data-slug="sapalu"
  data-type="Donasi"
  data-title="Wakaf Pesantren Tahfidz Quran Cinta Quran Center"
  data-headline="Cukup dengan 1 sak semen atau setara Rp 50.000, alirkan pahala jariyah tanpa henti berkontribusi membantu Indonesia bebas buta aksara Qur'an"
  data-image="https://amalsholeh-s3.imgix.net/cover/ZDzEJqSAy4fBLsXZXdP1qlTWb39xEbdj3TVtqSLw.jpeg?w=385&fit=crop&auto=format,compress"
  data-user="Yayasan Cinta Dakwah"
  data-avatar="https://amalsholeh-s3.imgix.net/avatar/mhlhtk0kQ74EEFwkRQp7QcIP2Gb4kC5OnxpwDNB5.png?ar=1:1&w=80&fit=crop&auto=format,compress">
</article>

Tombol Donasi

Jika anda ingin menggunakan style sendiri, anda dapat menggunakan widget tombol donasi, yang anda perlukan adalah sebuah button dengan class as-btn-donate dan data-slug dengan nilai atribut adalah slug dari program.
<button class="as-btn-donate" data-slug="gerakanwakafquran">
  <svg class="as-loader" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-svg feather feather-rotate-cw"><polyline data-v-4c034fe6="" points="23 4 23 10 17 10"></polyline><path data-v-4c034fe6="" d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
  Wakaf sekarang
</button>

Klik tombol donasi berikut:

Button donasi yang dibuat menggunakan elementor free atau page builder lainnya yang tidak dapat menambahkan custom attribut, bisa menambahkan custom class as-btn-donate as-btn-slug-slugprogram. Contoh: as-btn-donate as-btn-slug-masjidkarimata

Event Callback

Anda dapat menambahkan callback untuk menghandle data yang diterima ketika modal pembayaran ditutup. Setiap modal pembayaran ditutup, maka callback akan mendapatkan data donatur (jika user sempat mengisi data)

<script src="https://donasi.amalsholeh.com/widget/script.js" async defer></script>
<script>
  amalsholehWidget.callback = function(data) {
    console.log(data)
  }
</script>

Pada contoh di atas, kita menambahkan callback untuk menampilkan data callback pada console. Data yang diterima ada status dan data form dalam modal pembayaran

{
  "status": "cancel",
  "data": {
    "name": ""
    "email": ""
    "phone": ""
    "anonymous": false
    "message": ""
    "amount": "0"
    "invoice_code": null
    "paymentMethod": null
    "shared": true
    "view": "amount"
  }
}
Back to top button
Close