Zakat al-Fitr Calculator

You add the Zakat al-Fitr Calculator to your website like any other Element — generate the embed code in your Dashboard and paste it into your site HTML. It appears as a form inside your page content.

The form shows four parts:

• Family members and guests: A row of options — 1, 2, 3, 4, and Other. The option 3 is selected when the page loads.
• Amount per person: The rate your organization set. Supporters cannot change it.
• Total: The number of people multiplied by the rate.
• Give: The button that opens checkout.

Supporters who pay for more than four people can select Other and type the number up to 1,000.

When the linked campaign detects the location of the supporter, the calculator converts the rate and shows both the rate and the total in the local currency of that supporter. Otherwise it shows both in the default currency of the campaign.

When clicked, the Give button opens the Checkout Modal with the donation amount set to the Total. Supporters cannot edit this amount during checkout. The donation goes to the campaign you linked to the Element, under the designation you selected.

To create the calculator:

1. Go to Elements.
2. Click New element.
3. Select Zakat al-Fitr Calculator from the Forms list.
4. Enter the internal Element name to help you find it later. For example, Zakat al-Fitr 2027.
5. Select the Default language. This language appears when the preferred language of the supporter is unavailable or cannot be detected automatically.
6. Configure the Behavior tab:
   1. Open campaign: Select the campaign that receives Zakat al-Fitr donations. Consider creating a dedicated campaign for Zakat al-Fitr.
   2. Frequency: Select how often the donation repeats. Match campaign settings applies the frequency of the linked campaign.
   3. Designation: Select the designation for donations made through this Element. Match campaign settings applies the designation of the linked campaign.
   4. Rate per person: Enter the amount that one person owes, based on the ruling of your imam or of the authority your organization follows.
7. Configure the Form, Controls, and Button tabs to match the colors, borders, and Give button to your website design.
8. Configure the Localization tab to add translations for the form labels in other languages you support. The Element works with right-to-left languages like Arabic.
9. Click Create element.
10. Copy the HTML code from the pop-up window, for example: <a href="#XXXXXXXX" style="display: none"></a>
11. Paste this code on your website where you want the calculator to appear.

You can copy the code again later by clicking the Element in the Dashboard. When you change the rate, the calculator on your website picks it up within a minute or two. Supporters who already have your page open see the new rate after they reload it.

The campaign you link to the calculator controls what happens after supporters click Give. Check these settings on that campaign:

• Designations. Create a designation for Zakat al-Fitr so that you can track and report these funds separately. Learn how to create designations →
• Upsells. Turn off the upsells that ask supporters to switch to a recurring donation, both before and after payment.
• Transaction costs. Decide whether supporters cover the payment processing fees or your organization covers them from other funds.