Dynamic Messaging Based On Donation Amount

We've added in a new event that can be used to provide a dynamic message based on the amount given by a patron. We've provided the code here and instructions on how to use it. Feel free to change the styles to meet your needs.

There are 2 parts:

1. Code that goes in the body of the form
2. Code that goes in the Scripts & Styles collapsible of your Presentation Manager

In this example, for every $50 donated, the patron will receive a limited-edition holiday card.

What is displayed when the donation is below the required amount:

What is displayed when the donation is above the required amount and indicating how many holiday cards they will receive.

The following code will be put on your form, most likely at the bottom of the Body Field

<div class="dynamic-banner"><div id="dynamic-message"></div></div>

The following code will be put on your form Style and JavaScript into your Scripts & Styles window in your Presentation Manager.

You can customize the function names and the overall wording as needed.

.dynamic-banner {
padding: 15px; 
border: 1px solid #a6d95f; 
background: #f3faea; 
border-radius: 0.5rem;
color: #5e802f;
}


</style>

<script type="text/javascript">
window.addEventListener('AmountChanged', function(event) {

const container = document.getElementById('dynamic-message');
if (!container) return;

let cards = 0;
if (event.detail.amount >= 50) {
cards = Math.floor(event.detail.amount / 50);
if (cards > 20) cards = 20;
}

container.textContent = cards
? `You’ll receive ${cards} holiday card${cards > 1 ? 's' : ''} with your donation.`
: "Donate $50 or more to receive holiday cards (limit: 20 cards per transaction).";
});

</script>