Make (Integromat) Webhook Redirect after Call API Button?

Custom Coding
1

Hi Softr users,

Is it possible to redirect users after a Call API button is clicked and data is submitted to a webhook? Ideally, this would be possible by a Make webhook response.

Or, at least to reload the page after 1 - 2 seconds after the button is clicked?

I tried several methods posted in the following threads:

Sadly, none of them worked.

Some info on the setup:

I have four record lists on one page, each with four buttons. The buttons are used to move the records shown in these lists between them (each list is a different user category) or “delete them” (which means unlinking the record from the main record). All lists show only records that are linked to a main record that’s handled by a list detail block.

I can’t use record update buttons because the records linking to each other are all in one table and users are only supposed to see the records that are linked to them. So, hence why I use a Make backend automation to handle this but I can’t find a way to use a webhook response redirect or reload the page.

Thanks,
Jacek

2

up ?

3

Would also like to know if redirecting is possible using the Call API function, rather than Open external URL. Would simplify the setup.

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>