proca generates custom events that can be listened to from the page embedding the widget
All the events are sent on the dom node "#proca" (the script dom), but they bubble up so you can handle them on the window object.
to make it easier to debug and find the event triggered, you can add in your page:
window.addEventListener("proca", function(e){console.log(e.detail.message,e.detail);});
it will list all the events triggered
each event.detail has two parameters :
- message, the name action, of instance that the user finished a step and it going to the next one
- value: the (optional) details of the action, for instance the amount if the event is a contribution
Called once when the widget is displayed. you can customise the widget from there, for instance change the primary color and the general style (variant):
window.addEventListener("proca", e => {
if (e.detail.message === "init") {
proca.set("layout", "variant", "outlined");
proca.set("layout","primaryColor","#f90");
}
if (e.detail.message === "register:complete") {
// do something after petition signature (or mtt)
}
});
end of the journey.
window.addEventListener("proca", function(e){
if (e.message !== "complete") return;
alert("THAT'S ALL, FOLKS");
window.location.href = "https://proca.app"; // your thank you page
});
note: If you do not handle that event and change the page, the widget is looping back to the first step.
When there is an issue with an entry from the user
window.addEventListener("proca", function (e) { if (e.message !== "inputerror") return; console.log(e.message.type /"captcha" /, e.message.message: /"captcha: challenge expired"_/); });
for privacy/security reasons, we avoid returning the erroneous input, just the error
We do not recommend to completely skip our share step, it is highly optimised and increases the number of signatures by up to 10%, nearly all of them will be new supporters for you
window.addEventListener("proca", e => {
if (e.detail.message === "register:complete") {
// do something after petition signature (or mtt)
window.location.href = "https://proca.app"; // your thank you page with donation
}
});
window.addEventListener("proca", e => {
if (e.detail.message === "share") {
/_ event.detail.value: { uuid, payload: {medium:"twitter/facebook..."}, tracking: {location: url} } _/
}
});