HTML Content Approach
If you prefer custom branding control over the default web component widget, you can implement Amwal installment messaging using custom HTML elements, banners, and CSS styles.
1. Custom Product Page Banner
Create a branded promo strip beneath your product price:
<div class="amwal-promo-banner" style="display: flex; align-items: center; gap: 8px; padding: 12px; border: 1.5px solid #16a34a; border-radius: 12px; background: rgba(22, 163, 74, 0.05);">
<img src="/images/marketing-toolkit/installment-html-1.png" alt="Bank Installments" style="height: 20px;" />
<p style="font-size: 13px; font-weight: 600; margin: 0; color: #000;">
Split into <strong>6 monthly installments of 200 SAR</strong> at 0% interest with top Saudi banks.
</p>
<button id="open-amwal-info" style="margin-left: auto; background: none; border: none; color: #16a34a; font-weight: 700; font-size: 12px; cursor: pointer; text-decoration: underline;">
Learn More
</button>
</div>2. Triggering the Modal Programmatically
Trigger the official Amwal bank details modal from any custom button click:
<script type="module" src="https://cdn.jsdelivr.net/npm/@amwaljs/checkout-button@latest/dist/checkout/checkout.esm.js"></script>
<amwal-widget id="hidden-amwal-widget" style="display: none;"></amwal-widget>
<script>
document.getElementById('open-amwal-info').addEventListener('click', () => {
const widget = document.getElementById('hidden-amwal-widget');
if (widget && typeof widget.openModal === 'function') {
widget.openModal();
}
});
</script>3. Brand Assets & Logos
When designing custom promotional graphics:
- Maintain original aspect ratios for partner bank logos (Al Rajhi Bank, SNB, Alinma, Riyad Bank).
- Always pair installment messaging with the text "0% Interest & Zero Processing Fees".