How to Send an HTTP Response Back to Webflow and Include the Necessary Script Code?

Help
1

This topic was automatically generated from Slack. You can find the original thread here.

Can you show me how to send a HTTP response back to Webflow so that I can display it on my website? Please include the code I will need to insert in my webflow page(s)

2

To send an HTTP response back to Webflow, you can use Pipedream’s “Return HTTP Response” action. Here’s how to set it up: 1. Create a new Pipedream workflow with an HTTP trigger. 2. Add the “Return HTTP Response” action from the HTTP / Webhook app. 3. Configure the Response Status Code, Response Headers, and Response Body as needed. Now, to display the response on your Webflow site, you can use JavaScript to make a request to the Pipedream workflow’s endpoint URL. Add the following <script> code to your Webflow page, replacing YOUR_ENDPOINT_URL with the actual endpoint URL of your Pipedream workflow: ```

3

very helpful - what if I POST to a HTTP trigger and return a custom response to Webflow. Can you explain those steps?

4

To POST data to a Pipedream HTTP trigger and return a custom response to Webflow, follow these steps: 1. Create a new Pipedream workflow with an HTTP trigger. 2. Add the “Return HTTP Response” action from the HTTP / Webhook app. 3. Configure the Response Status Code, Response Headers, and Response Body as needed. Now, to send a POST request from your Webflow site, you can use JavaScript to make a request to the Pipedream workflow’s endpoint URL. Add the following <script> code to your Webflow page, replacing YOUR_ENDPOINT_URL with the actual endpoint URL of your Pipedream workflow: ```

5

when I do this with the following I get “Uncaught (in promise) SyntaxError: Unexpected token ‘<’, “

Succ”… is not valid JSON” in the browser console. can you help me debug?

<script>
  document.getElementById('sign-up-form-submit-button').addEventListener('click', () => {
    const formData = new FormData(document.getElementById('wf-form-New-User-Sign-Up-Form'));
    async function sendData() {
      const data = {};
      formData.forEach((value, key) => {
        data[key] = value;
      });

      const response = await fetch("https://eo3xyyrutbvpblh.m.pipedream.net", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });

      const responseData = await response.json();
      // Display the responseData on your Webflow site as needed
      console.log(responseData);
    }
    sendData();
  });
</script>
6

It looks like the response from your Pipedream workflow is not in JSON format, which is causing the error when you try to parse it using response.json(). To fix this issue, you need to make sure your Pipedream workflow returns a JSON response. In your Pipedream workflow, add the “Return HTTP Response” action from the HTTP / Webhook app after the steps you have. Configure the Response Status Code as 200, set the Content-Type header to application/json, and set the Response Body to a valid JSON object. For example: ```
on { “message”: “Success” }