Need Help with 3rd Party API Integration Using HTTP Functions on Wix

itai39144 · November 17, 2024, 11:48am

I’m currently facing a challenge integrating a 3rd party API (Make.com) into my Wix site using HTTP functions and could use some guidance.

Overview:

I am trying to setup a workflow where:

A custom webhook in Make receives data.
Make processes this data and sends a response to my Wix site using an HTTP POST request.
My Wix site’s backend function is supposed to receive this POST request and process the data.

What I’ve Tried:

I’ve set up an HTTP function (responseHandler.web.js) in the backend section of my Wix site to handle incoming POST requests.
The function is designed to parse incoming JSON data, process it, and send back a response.
I’ve used Postman to simulate the POST requests to ensure the function receives and processes the data correctly.
Permissions for the HTTP function have been set to public (I hope I did it right…).

Issue:

Despite these configurations, every time Make tries to send data to the specified endpoint, I receive a 404 error indicating that the resource could not be found. This occurs even through Postman tests (I get there 404 errors too).

Attempts to Resolve:

Double-checked and ensured the URL used in Make’s HTTP module is correct:

https://mysite/_functions/responseHandler

Ensured the backend function is published and accessible publicly.
Enhanced logging within the function to capture incoming requests and debug the issue.

Screenshots and Codes:

Code of the responseHandler.web.js file with the HTTP function setup in the Wix backend:

import {ok, badRequest, serverError} from ‘wix-http-functions’;

export async function post(request) {
let responseHeaders = {
“Content-Type”: “application/json”
};

try {
    const body = await request.body.json();
    console.log("Received body:", body);  // Log the received body for debugging

    if (!body || !body.query) {
        console.error("Query not provided or body is empty");
        return badRequest({
            headers: responseHeaders,
            body: JSON.stringify({
                error: "Query parameter is missing from the request."
            })
        });
    }

    const processedResponse = `Processed query: ${body.query}`;
    
    // Return a successful response with the processed data
    return ok({
        headers: responseHeaders,
        body: JSON.stringify({
            message: "Data processed successfully",
            responseText: processedResponse
        })
    });
} catch (error) {
    console.error("Error in processing request:", error);
    return serverError({
        headers: responseHeaders,
        body: JSON.stringify({
            error: "Error processing request",
            details: error.message
        })
    });
}

}

Screenshot of the 404 error received when Make attempts to send data:

I am looking for insights or suggestions on what might be going wrong or any steps I might have missed. Any help would be greatly appreciated!

Thank you in advance for your assistance!

giri-zano · November 17, 2024, 9:46pm

Let me get this straight: you are posting to this URL: https://mysite/_functions/responseHandler?

itai39144 · November 17, 2024, 10:12pm

Yes, except instead of mysite I put of course the real address of my site

Pratham · November 18, 2024, 5:07am

Hey Itai

HTTP functions can only be written inside a specific file in the backend called http-functions.js

I’d recommend you go through the Wix Velo developer documentation first to learn more about it.

Here are some additional tutorials:

itai39144 · November 18, 2024, 9:49am

I tried what you said, and it doesn’t help either. It simply doesn’t work.

Current codes are:

Backend file named “makeApi.jsw”:


export function sendDataToMake(data) {
    const url = 'MY WEBHOOK URL';
    return fetch(url, {
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(processedData => {
        return processedData; 
    })
    .catch(err => {
        console.error('Failed to send data:', err);
        throw new Error('Failed to send data: ' + err.message);
    });
}

Backend http-functions.js file:

import {ok, serverError} from 'wix-http-functions';

export function post_responseHandler(request) {
    return request.body.json()
        .then(body => {

            console.log("Received data:", body);

            const responseData = {
                message: "Data processed successfully",
                yourData: body  
            };

            return ok({
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(responseData)
            });
        })
        .catch(error => {
            console.error("Failed to process request:", error);
            return serverError({
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify({error: "Server error occurred", details: error.message})
            });
        });
}

And the front end code on the page itself:


import { sendDataToMake } from 'backend/makeApi';

$w.onReady(function () {
    $w("#searchButton").onClick(function () {
        const question = $w("#searchInput").value;
        if (question && question.trim().length > 0) {
            sendDataToMake({ query: question.trim() })
            .then(data => {
                $w('#responseTextField').text = data.responseText; 
            })
            .catch(err => {
                console.error('Error:', err);
                $w('#responseTextField').text = "Error retrieving answer";
            });
        } else {
            console.log('Invalid input. Please enter a question.');
            $w('#responseTextField').text = "Please enter a question.";
        }
    });
});

Pratham · November 18, 2024, 10:31am

What are you trying to achieve here?

If the webhook that you are creating using HTTP functions on your Wix site is supposed to receive data, then why are you using post in your http-function?

Looking at the code you’ve provided, your frontend page code sends a question to Make, and you’re calling a fetch in the backend for that… are you using the wix-fetch API here?
And when you get the response, you’re returning it back to the frontend?

Then where and how does the HTTP function come into play here?

Even if the HTTP function receives the processed data from Make, how is it supposed to return it back to the frontend?

I don’t see any console log statements anywhere in the code. I’d suggest you do that at every step, and first try creating a simple webhook using http-functions as shown in this video by @thewixwiz:

Once you successfully develop this and test it out, you can then try building it further and integrating it with Make.

There’s only so much I can help without knowing exactly what you’re trying to achieve and if this is the right flow even.

itai39144 · November 18, 2024, 10:51am

What I’m trying to achieve is to create a sort of “dynamic question and answer” feature in the WIX site.

The user writes his question in one text field
This question is sent to Make via a webhook (this is working perfectly)
Then after processing a reply in Make, I am sending via HTTP module the reply back to the WIX site. The reply should be sown in a different text field. This is what I fail to achieve. I always get an 404 error message in Make’s HTTP module.

Pratham · November 18, 2024, 10:59am

So that’s the reason why you’re creating this webhook using http-functions, if I understand correctly. Make will process the reply, and post it to your Wix site’s webhook and then you want to display this in a text field on the frontend, correct?

itai39144 · November 18, 2024, 1:13pm

Exactly. That’s what I am trying to do.

Pratham · November 18, 2024, 1:55pm

Well unfortunately you cannot communicate with backend events such as data hooks, or as in your case - webhook triggers directly from the site’s frontend.

You can try bridging this gap with more complicated workarounds involving Wix Realtime, etc but that might not be the most reliable way to achieve this.

If the third party service that you’re using does not send back the requested data in the initial fetch request itself, but instead sends it as a POST request to another webhook (which is kinda funny), then you should consider reframing your logic flow or look into alternative options that will let you achieve your desired functionality.

P.S. If you want to test out your webhooks, you can try out webhook.site or other similar tools available online.

itai39144 · November 18, 2024, 7:16pm

Is it possible to fetch the reply after being processed on the third-party with the same webhook that sends the data from the WIX site?

Pratham · November 18, 2024, 7:58pm

That’s how it technically should be… but without knowing about the specific third party service that you are using, I can’t comment for sure. You should be able to find that out in that particular service’s documentation.

Phil_Kochan · November 25, 2024, 1:40am

I really struggled getting my first HTTP call ‘into’ Wix to work. In the end, I couldn’t get POST to work, but I did get PUT to work.

So in the Backend http-functions.js file: (notice the ‘put_’ in front!

export async function put_YOUR_HTTP_METHOD_NAME(request) {
let options = {
“headers”: {
“Content-Type”: “application/json”
}
};
// The ‘await’ here is critical! It fails without it!
const theJSONDataPassedIn = await request.body.json();
// Log the JSON data to MyLogCollection which has TWO text fields called ‘In’ and ‘Error’
await wixData.insert(“MyLogCollection”, { In: “Starting put_YOUR_HTTP_METHOD_NAME()”, Error: JSON.stringify(theJSONDataPassedIn ) });

// just resend back the JSON passed in.
options.body = "Exception: " + JSON.stringify(theJSONDataPassedIn );
return ok(options); // this ‘ok’ function is ‘built into’ http-functions.js there are other functions for different error conditions.
} // end of method

Then to call this from an external host you MUST make sure the HTTP call is a ‘PUT’! That’s done differently depending on the calling host.

Then the HTTP call is:

https://mysitexxx/_functions/YOUR_HTTP_METHOD_NAME

NOTE: There is NO ‘put_’ at the front of the call! This is not documented well in Wix (that I could find). Again, post doesn’t work!

I don’t check this forum really at all… if you email questions to philkochan
at
msn
dot
com

I might be able to help. Again, I pulled my hair out for a half a day on this!

Phil_Kochan · November 25, 2024, 2:00am

Not sure about web hooks, not needed in your case (I think)… unless the time to process your HTTP call is very long (like 1/2 hour or more)… The http example below I gave will return any JSON you want back in the HTTP header.

Topic		Replies	Views
http function as Webhook url code 404 Ask the community code , question	0	82	October 15, 2022
Post with http functions Ask the community code , question	4	2518	March 5, 2018
Http-functions from python Ask the community code	3	21	January 16, 2025
help with Http Functions & Wix Backend Ask the community code , question	5	224	January 12, 2021
Basic backend wix-data query problem Ask the community code , question	8	736	February 15, 2021

Need Help with 3rd Party API Integration Using HTTP Functions on Wix

Related topics