Promotional Widget

Instructions for integrating Amwal Installments user-Guideline using Amwal Promotional widget.

Step-by-Step Guide

Include the Checkout Script: Add this script to your HTML <head> to load the Amwal Checkout script.

<script type="module" src="https://cdn.jsdelivr.net/npm/amwal-checkout-button@latest/dist/checkout/checkout.esm.js"></script>

Add the Widget Element: Place the widget element in your HTML where you want the installment widget to appear.
```
<amwal-widget id="amwal-widget"></amwal-widget>
```

Configure the Widget: Use a script to set up the widget's configuration, such as the number of installments, price, currency, and additional UI options.

<script>
  const widgetConfig = {
    installmentsCount: 6,
    price: 270.36,
    currency: "SAR"
  };
  const widget = document.getElementById('amwal-widget');
  if (widget) {
    widget.config = widgetConfig;
    widget.showSocialProof = true;
    widget.showPopularBadge = true;
    widget.showMonthlyPayment = true;
    widget.showGreenBorder = true;
    widget.locale = 'ar';
    widget.socialProofText = "⭐ Trusted by 50,000+ happy customers";
  }
</script>

Key Options

installmentsCount: Number of installments (e.g., 3, 6, 12, 24).
price: Transaction amount.
currency: ISO currency code (e.g., SAR).
showSocialProof, showPopularBadge, showMonthlyPayment, showGreenBorder: Optional UI features.
locale: Language setting (e.g., ar, en).
socialProofText: Custom message.

Widget placement

The Widget can be placed on Product, Cart, or Checkout pages. When clicked, it displays a popup modal with more information about how Amwal installments work with banks and the accepted installment timeframes.

Product page

Cart page

Installment modal

Updated 12 days ago