How to: Consume Payloads Using Webhooks

This how-to guide demonstrates how to configure an application to consume payloads using webhooks, using SendGrid to send an email when the payload is complete. For this configuration, you'll need a Postback module that listens for the Google Forms webhook.

Configure the Postback Module

Begin by creating a Postback module that runs when it receives the webhook request. When finished, it sends an email with the contents of the Google Form. To use a webhook, you need to set up an API module.

These instructions assume you have a workspace open, saved, and with a title.

To create an API module in your application:

1. At the top right of your Application page, click + Create New.

2. Select Module. The Create Module modal displays.

3. In the Module Name* field, enter postbackConsumePayloadModule.

4. From the Module Type* drop-down, select API.

5. Click Create.

By default, the API module contains four Panel components to help with an API setup: panelInfo, panelRequest, panelResponse, and panelConfig.

Update the panelInfo Panel Component

Here you'll update the panelInfo Panel component.

Update the description HTML Element Component

The panelInfo Panel component contains an HTML Element component that describes its purpose. You can update this component to display any information you want when building or using the webhook.

1. In the panelInfo Panel component, hover over the description HTML Element component.

   A 5-button toolbar displays above the component on hover-over.

2. Using the toolbar, click the (Settings) button.

3. In the Content field, enter Postback module to recive webhooks from Google Forms and send Email for each response..

4. Click the Save Component.

Update the method Hidden Component

1. In the panelInfo Panel component, hover over the method Hidden component.

   A 5-button toolbar displays above the component on hover-over.

2. Using the toolbar, click the (Settings) button.

3. In the Default Value field, enter POST.

4. Click Save Component.

Update the panelRequest Panel Component

1. In the panelRequest Panel component, hover over to the requestParameter Hidden component.

   A 5-button toolbar displays above the component on hover-over.

2. Using the toolbar, click the (Settings) button.

3. In the Property ID and Label Text fields, enter _request.

4. Set Store Data in Database (ON).

5. Click Save & Close.

Configure the panelConfig Panel Component

Now, configure a Hidden component in the panelConfig Panel component.

Configure a Hidden Component

1. Drag and drop a Hidden component inside the panelConfig Panel component.

2. In the Property ID and Label Text fields, enter answerText.

3. In the Default Value field, enter Default.

4. Click Save Component.

Configure the Data Workflow Component

Next, configure a Data Workflow component that receives the request from your Google Form and outputs it into a Hidden component.

1. Drag and drop a Data Workflow component inside the panelConfig Panel component, below the answerText Hidden component.

2. In the Property ID and Canvas Label Text fields, enter dwfGetAnswer.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	_request
   Required	Yes
   Source	Default

Configure the Get Operator

1. Drag and drop a Get operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Get
   Label
   Path	body.body

3. Connect the output port (right) of the Input operator to the input port (left) of the Get operator.

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Output
   Component	answerText
   Action	value

3. Connect the output port (right) of the Get operator to the input port (left) of the Output operator.

   

4. Click Save Component.

Update the pluginCreateSubmission Plug-In Component

This Plug-In component takes the text retrieved from your Google Form and sends an email using SendGrid.

1. In the panelConfig Panel component, hover over the pluginCreateSubmission Plug-In component.

   A 5-button toolbar displays above the component on hover-over.

2. Using the toolbar, click the (Settings) button.

3. In the Property ID and Canvas Label Text fields, enter pluginSendEmail.

4. From the Service Type drop-down, select External.

5. From the External Service drop-down, select SendGrid.

6. In the Data Source URL field, enter mail/send.

7. From the Request Type drop-down, select Post.

8. In the Inputs table, enter the following:

   Property ID	Mapping	Required
   'no-reply@unqork.io'	from.email	(checked)
   '<enter your email address>'	personalizations[0].to[0].email	(checked)
   'A new response has been received!'	subject	(checked)
   'text/html'	content[0].type	(checked)
   answerText	content[0].value	(checked)

   

9. Drag and drop the pluginCreateSubmission Plug-In component component below the answerText Hidden component.

10. Click Save Component.

Update the initCreateSubmission Initializer Component

Next, update the Initializer component to trigger the pluginSendEmail Plug-In and dwfGetAnswer Data Workflow components.

1. In the panelConfig Panel component, hover over the initCreateSubmission Initializer component.

   A 5-button toolbar displays above the component on hover-over.

2. Using the toolbar, click the (Settings) button.

3. In the Property ID and Canvas Label Text fields, enter initSendEmail.

4. In the Outputs table, enter the following:

   Property ID	Type	Value
   dwfGetAnswer	trigger	GO
   pluginSendEmail	trigger	GO

   

5. Drag and drop the initCreateSubmission Initializer component above the pluginSendEmail Plug-In component.

6. Click Save Component.

7. Save the module.

Enable Execute via Proxy

Now you'll access the Module Settings in your new module. The point of these setting changes is to enable the Execute via Proxy endpoint for the webhook, and setting the Anonymous role's permissions to Write. Once enabled, you can receive requests from your webhook service.

1. In the Module Builder, click the  (ellipsis) button.

2. Select Module Settings.

3. To the left of the modal, click Module Settings.

4. Set Act as Super-user When Server Side Executing to (ON).

   This step is for demonstration purposes only.

5. To the left of the modal, click User Permissions.

6. Set Allow Access to Anonymous Users to (ON).

7. From the Anonymous role's Permission drop-down, select Write.

   

8. Click Save & Close.

9. Save your module.

Here’s how the completed Postback module looks in the Module Builder:

Copy the Unqork Environment URL and Module ID

To set up the Google Form, copy the environment domain and the module ID from the address bar and save them for use in the next steps.

Configure the Google Form

Now, create and configure the Google Form.

Create the Google Form

1. Open a Google Form.

2. At the top left of the page, enter Unqork Webhook Test.

3. Replace Untitled Form with Test Question.

4. From the question type drop-down, select Paragraph.

Configure the Google Form Apps Script

1. At the top right, click the (More).

2. Select Apps Script.

3. At the top left, in the Project Title Field, rename the project to Unqork Webhook Test.

4. Copy the following code and paste it into the Script Editor:

   function onFormSubmit(e) {
                       var url = "https://{environment}x.unqork.io/fbu/uapi/modules/{moduleId}/api/{path}";
                       var form = FormApp.openById('{form Id}');
                       var formResponses = form.getResponses();
                       var formResponse = formResponses[formResponses.length - 1];
                       var itemResponses = formResponse.getItemResponses();
                       var answerText = itemResponses[0].getResponse();
                       var data = {
                       "body": answerText
                       }
                       var options = {
                       "method": "post",
                       "headers": {
                       "Content-Type": "application/json"
                       },
                       "payload": JSON.stringify(data)
                       };
                       var response = UrlFetchApp.fetch(url, options);
                   }

5. In the var url line, replace the following items with the environment domain and module ID you copied in the Copy the Unqork Environment and Module ID section of this article:

   After pasting the values, ensure the curly braces ({}) are removed.

   Setting	Value
   {environment}	Enter your environment name.
   {moduleId}	Enter your module ID.
   {path}	Enter a path. This can be anything you want. This should be descriptive based on what the webhook accomplishes.

6. In the var form line, replace the following:

   Setting	Value
   {form ID}	Enter your form ID. The form ID is the string of characters in the Google Form URL between the d and edit.

7. Click Save Project to Drive.

8. Click the Deploy drop-down.

9. Select New Deployment.

10. Click the (gear) icon.

11. Select Web App.

12. In the Description field, enter Unqork webhook test.

13. Click Deploy. If a pop-up displays asking you to authorize access, click Authorize Access, then click Done.

Configure the Google Form Apps Script Triggers

1. From the menu to the left, select Triggers (clock icon).

2. Click + Add Trigger. A pop-up modal displays.

3. Set the following settings:

   Setting	Value
   Choose which function to run	onFormSubmit
   Choose which deployment should run	Head
   Select event source	From form
   Select event type	On form submit

4. Click Save.