Integrating Advanced JavaScript Events with eCardWidget
eCardWidget's JavaScript API provides developers with the tools to integrate and manipulate the eCard sending process dynamically. This guide will focus on how to utilize specific JavaScript events to enhance user interactions, particularly in donation scenarios.
Using JavaScript Events for Dynamic Customization
Event: ecwWidgetLoaded
Purpose: This event is triggered when the eCardWidget fully loads, making it ideal for initializing any adjustments or setting up functions that depend on the widget’s presence.
Example:
document.addEventListener('ecwWidgetLoaded', function(e) {
window.ecwStore = e.detail.store();
console.log(window.ecwStore.state); // Review modifiable options
window.ecwStore.state.form.optedIn = true;
window.ecwStore.state.shareForm.optedIn = true;
});
Event: ecwOpenEcardForm
Purpose: Triggered when the eCard form is opened (usually when someone chooses an ecard), this event allows for dynamic modifications to form fields or other settings in real time.
Example:
document.addEventListener('ecwOpenEcardForm', function(e) {
window.ecwStore = e.detail.store();
console.log(window.ecwStore.state); // Discover adjustable features
window.ecwStore.state.form.optedIn = true;
window.ecwStore.state.shareForm.optedIn = true;
});
Practical Example: Customizing eCard Send Limits Based on Donations
Imagine integrating the eCardWidget on a donation "Thank You" page. Suppose each $1 donation allows the donor to send one eCard. You can dynamically set the limitEmailsPerSession based on the donation amount to control how many eCards a donor can send.
Scenario: A donor has just contributed $5.
Implementation:
document.addEventListener('ecwWidgetLoaded', function(e) {
window.ecwStore = e.detail.store(); // Assuming the donation amount is dynamically fetched and stored in a variable 'donationAmount'
var donationAmount = 5; // For illustration, this would be dynamically set
window.ecwStore.state.wconfig.limitEmailsPerSession = donationAmount; // Allows sending one eCard per dollar donated
console.log('Updated eCard send limit to:',
window.ecwStore.state.wconfig.limitEmailsPerSession);
});
Advanced Usage: ecwShareSuccess Event
For tracking and actions post eCard sharing, the ecwShareSuccess event offers the perfect hook.
Further Information:
Function: Allows execution of custom actions post-share.
Example:
document.addEventListener('ecwShareSuccess', function(e) { console.log('Received data:', e.detail); });
Explore in-depth usage in our article: Trigger Custom Actions When eCards are Shared.
Developer Recommendations
While these features require advanced JavaScript knowledge, they open up extensive possibilities for customization and interaction within your eCardWidget setup. We recommend logging the ecwStore.state object to understand the adjustable parameters available within the app. This insight allows for precise and effective customizations tailored to your specific requirements. Example console.log(ecwStore.state):
Conclusion
By harnessing the power of eCardWidget’s JavaScript API, developers can create customized and dynamic eCard sending experiences tailored to specific interactions like donations. This approach not only enhances user engagement but also aligns the functionality of eCardWidget with organizational goals such as increasing donor participation and appreciation.