When implementing a double opt-in process with the code option (where users enter a six-digit code), you may encounter an issue where the modal closes after the user enters the code manually, without any further action taking place. This documentation article provides a solution to reload the page automatically after the user enters the code, ensuring a seamless user experience.
To reload the page after the user manually enters the six-digit code, you can utilize the following JavaScript code, allowing you to perform actions based on the event data received. Here's an example of how to implement the solution:
window.addEventListener("message", function(event) {
if (event.data) {
try {
var data = JSON.parse(event.data);
if (data.event === "successDOI" || (data.event === "pianoIdEvent" && data.params.event === "successDOI")) {
location.reload();
}
} catch (e) {}
}
});
Where you would replace with one of the following values, based on the dashboard's locale your application is located on:
US dashboard - https://id.tinypass.com
EU dashboard - https://id-eu.piano.io
AP dashboard - https://id-ap.piano.io
AU dashboard - https://id-au.piano.io
Sandbox - https://sandbox.tinypass.com
The implementation of the solution can be done in either the JS card within Composer or directly within your website's script. Both approaches are valid, and you can choose the one that best fits your workflow.