Webhook Response - Close Window

pb84 · August 28, 2022, 9:15am

Describe the issue/error/question

Hi Everyone - I am trying to set the following workflow up:

User clicks a button to send Webhook GET request (on Notion; to act like a button)
New Window opens for the GET request (although ideally, if there was a workaround for this, even better)
Webhook accepted
Window closes (back at notion)

I have tried this with the following code in the Respond to Webhook node, but no luck:

<script>window.open('', '_self', ''); window.close();</script>

The window stays open (although the webhook works fine)

Please share the workflow

BillAlex · August 28, 2022, 6:44pm

Hi @pb84,

First: I have no experience with “Notion”.
Second: Close a tab/window with javascript works only if the window is open with javascript - not by a response html page with js: window.close().

If you can use html, there are 2 ways:
I prefer working asynchronously with ajax (fetch(), axios, jQuery, etc…). The page can continue to be used and data from the server can be processed.

The second: Open a pop-up and close it with javascript, but Pop-ups are not a nice thing (in my world )

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Call the Webhook...</h1>
    <h2>... and close the window</h2>
    <input id="url" type="text" />
    <button onclick="ajax()">AJAX</button>
    <button onclick="closePopUp()">PopUp</button>

    <script>
      function getUrl() {
        return document.getElementById("url").value;
      }

      async function ajax() {
        const url = getUrl();
        console.log("Call URL: " + url);
        const response = await fetch(url);
        console.log(response);
      }

      function closePopUp() {
        const url = getUrl();
        const popUp = window.open(url, "_blank", "width=200, height=100");
        setTimeout(function () {
          popUp.close();
        }, 300);
      }
    </script>
  </body>
</html>

With this html, you have an input field to fill in an url and two buttons for ajax and pop-up. The pop-up function has a timeout. Here you have to check how low this can be so that the webhook is executed and not aborted (user/js close window).

Your n8n webhook need additional header: Access-Control-Allow-Origin: * (or better the page-url) to call with XHR from other origins and an immidiately callback with 204 “No content” (or other) so that the process is not aborted when closing tab/pop-up/window.

I hope this brings you a little further in your search for a solution.

pb84 · August 28, 2022, 10:39pm

Thank you for the quick reply @BillAlex - yes so essentially notion just allows you to insert a link and then will open a new tab with that link (doesn’t work like a real button in any way unfortunately).

With that in mind (I do hope that I haven’t missed anything in the post above), is there then a way to close that new window that has been opened once the webhook request has been received and accepted.

BillAlex · August 29, 2022, 11:24am

Pages opened by link cannot be closed by JavaScript. This would also be a major security risk. Not for nothing are pop-ups blocked by many.

The only possibility would be to reply with a redirect back to the notion page.

However, notion opens all links in a new tab, so the user ends up with many tabs open.

pb84 · August 29, 2022, 10:17pm

When I try above, it causes n8n to crash (self hosted via digital ocean droplet)

BillAlex · August 31, 2022, 8:04am

Unfortunately, I use n8n directly via npm, so I can’t help here unfortunately.

But I would try to build the webhook node step by step, so the problem could be narrowed down more precisely.

I seem to remember that there were problems with RAW output. But is needed here to be able to output html.

Jean_M · November 8, 2022, 1:36pm

Hi !!

I have the same scenario, I’m trying to rebuild an automation made with Make. I’ve set up a button in Airtable with the webhook url and I want that once triggered the open tab close automatically. I’ve tried to set a respond webhook with a body but didn’t work If some one have an idea to how to fix that.

Ps: I retested the process with Airtable and Nocodb and both worked with Make

Thnak’s

Edit: Found the solution, I just forgot to link the webhook node and the “respond to webhook” node