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="beramalquran" 
	data-type="Donasi" 
	data-title="#BeramalQuran - Sedekah Al-Qur’an Untuk Pelosok Indonesia" 
	data-headline="#BeramalQuran Berburu Pahala Jariyah Dengan Wakaf Quran Untuk Pelosok Indonesia" 
	data-image="https://amalsholeh-s3.imgix.net/cover/5NpMSSPv9xnqXoGNBj5kUevNo1610oNgJXIQjpM9.jpg?w=385&fit=crop&auto=format,compress" 
	data-ref="fundraiser-id" 
	data-user="Amalsholeh.com" 
	data-avatar="https://amalsholeh-s3.imgix.net/avatar/gxp4Ik3ZRchdNhjjpW8fMbXNv7NQQlH5AEHTUW3s.jpeg?ar=1:1&w=80&fit=crop&auto=format,compress?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. Jika Anda sebagai fundraiser, tambahkan data attribute data-ref dengan nilai atribut kode id fundraiser Anda.

<button data-slug="gerakanwakafquran" data-ref="fundraiser-id">
  <svg 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"><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:
Wakaf sekarang

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-slug-slugprogram. Jika Anda sebagai fundraiser, silahkan tambahkan custom class as-ref-kodefundraiser ubah kodefundraiser jadi kode id Anda.

Contoh: as-btn-donate as-slug-masjidkarimata as-ref-gOpA0

Button donasi Elementor

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"
  }
}