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/@amwaljs/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 = 'en';
          widget.tabsVariant = 'cards';
          widget.showExtendedStep4 = true;
          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.

Installment Widget

Installment Modal

Updated 18 days ago