Make (Integromat) Webhook Redirect after Call API Button?

Custom Coding
4

Hi, everyone would like to share a workaround for redirecting on “Call API” Action button

We will use the event listner for success message when the “Make an API Call” button is clicked on a Softr list item, which is the call-api-success event listener.

window.addEventListener('call-api-success-BLOCKNAME', (e) => {
    console.log('call-api-success', e.detail);
});

Replace BLOCKNAME with your block name, now using this event listner as trigger we can perform different tasks using javascript, so if we want to redirect to a url with a load screen time counter we can use the following script, Hope this helps !! Happy 2025 :rocket: :rocket:

<script>
window.addEventListener('call-api-success-BLOCKNAME', (e) => {
    console.log('API call successful:', e.detail);

    // Show a loading screen before redirect
    const loadingScreen = document.createElement('div');
    loadingScreen.innerHTML = `
        <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; font-family: Arial, sans-serif;">
            <h2>Recreating Your Scenes...</h2>
            <p>Please wait while we process your request.</p>
            <div id="loading-timer">30 seconds remaining...</div>
        </div>
    `;
    document.body.appendChild(loadingScreen);

    // Countdown timer
    let countdown = 30;
    const timer = document.getElementById('loading-timer');
    const countdownInterval = setInterval(() => {
        countdown--;
        timer.textContent = `${countdown} seconds remaining...`;
        if (countdown === 0) {
            clearInterval(countdownInterval);
            window.location.href = 'https://www.google.com';
        }
    }, 1000);
});
</script>