Do you want to connect Thrive Architect with your favorite apps or automate tasks without any manual work? Webhooks serve as a powerful tool for integrating your Thrive Architect forms with various external services, thereby automating workflows and enhancing data management capabilities.
In this article, we’ll be showing you an example of how easy it gets to use webhooks in webpages created using Thrive Architect.
Implementing Webhooks in Thrive Architect
In this example, we’ll be using a dummy webhook URL to show you the implementation. Also, here we’ll show you how you can set up a webhook integration while using a form on a page built using Thrive Architect. This will give you an idea of any other integrations you want to build.
To use a webhook in Thrive Architect, first open the page you want to add it to in the Thrive Architect editor.
Since we are showing you how you can add a webhook connection to a form, the next step here is to add a form to the page.
While in the Thrive Architect editor, in the right panel, click on the plus (+) icon to open the list of elements you want to add.
Clicking the plus icon will open the list of elements you can choose from. From this list of elements, drag and drop the Contact Form element on the page.
When you drag and drop the Contact Form element on the page, select a template you want to use and see it added at the selected location.
Once on the page, click on the Contact Form to open its options in the left column.
Note: Before you proceed to add a webhook, please ensure you’ve added all the fields you need in the form. Adding any new fields after extablishing a webhook connection will delete the connection you’ve built.
In the left column options, under the Main Options, scroll down to Connections and click on Webhook.
Once you click Webhook, you’ll see a section where you can add and manage the Webhook settings.
Under the Webhook settings, the first thing you add here is the Webhook URL.
After you’ve entered the Webhook URL, the next setting here lets you select a Request Type and the Request Format.
Note: The third-party service you’re sending data to with your webhook will tell you exactly how they want to receive the information (how to send it, in what format, and what details to include). You just need to set up your form to match what they ask for. This is the kind of data you’ll need to set in the Request Type and the Request Format fields.
You can select one of the following Request Types:
- POST: Sends new data to another system or server, usually to create a new entry.
- GET: Requests or retrieves specific information or data from another system. This is a default behavior depending on the third-party service you use.
- PUT: Updates existing data completely with new information in another system.
- PATCH: Updates only certain fields or parts of existing data in another system.
- DELETE: Removes or deletes data from another system.
In this example, since we are accepting submissions through a form and sending it to the connection you are building with, select the Request Type as POST.
After selecting the Request Type, the next field lets you select the Request Format among the following options.
Here, you can select any format depending on how the third-party service expects it to be. The available format options are as follows.
- Form: Sends the data in the same format as a typical web form submission (key-value pairs), often used for simple integrations.
- JSON: Sends the data in JavaScript Object Notation, a popular and easy-to-read format for exchanging structured data between systems.
- XML: Sends the data in Extensible Markup Language, a format that uses tags to organize and share data, often used in older or enterprise systems.
In this example, we select the Request Format as FORM.
Once you select the request type and format, the next section lets you map the fields by selecting the keys and values.
After mapping the fields, the next section lets you decide whether you want to pass custom values to the Header.
If you don’t want to do it, proceed with the default selection, None.
To pass custom values, click to select Custom.
Passing custom values to the header when using a Webhook means sending extra information (like API keys or tokens) along with your form data. This helps the receiving system know who you are or gives special instructions for how to handle your request.
After selecting to add a custom value to the header, you’ll see a section where you can select the key and value you want to pass.
In this example, we’ll send information about when was the last time the user (submitting the form) logged in to a website. To do so, select the value and enter the key just like you did while mapping form fields.
Just like we set this custom value, you can use this to send in user consent that’ll by default be recorded as false.
Once you’ve done passing the custom values through the header, click the Send test button to test the webhook connection.
If the connection is well set, you’ll see a message saying the Webhook was sent successfully. To finalize these settings, click the Done button.
Benefits of Integrating Webhooks in Thrive Architect
Integrating Webhooks into your Thrive Architect forms unlocks several advantages, streamlining your data handling and external service interactions:
- Automated Data Transfer: Webhooks facilitate the automatic and real-time transmission of form submission data to external applications or services. This eliminates the need for manual data export and import, ensuring that your connected systems are always up-to-date.
- Customizable Data Mapping: Users gain precise control over which form fields are transmitted and how they are mapped to the data structure expected by the receiving webhook. This flexibility ensures compatibility with a wide array of external platforms and custom data requirements.
- Enhanced Data with Custom Headers: Beyond standard form data, Webhooks allow for the inclusion of additional, custom information within the request headers or the body. This feature can be utilized to pass contextual data, such as a user’s last logged-in date or other relevant metadata, enriching the information sent to external systems.
- User Consent Management: Thrive Architect’s Webhooks are equipped to handle user consent statuses, such as those related to GDPR compliance. This information can be passed to external systems even if a visible GDPR checkbox is not present on the form, aiding in maintaining legal compliance and respecting user privacy settings.
- Flexible Configuration: Each form within Thrive Architect can have its own unique Webhook configuration. This granular control allows for tailored integrations specific to the purpose and data requirements of individual forms.
- Compatibility with Templates and Symbols: Webhooks are designed to work seamlessly with Thrive Architect’s template and symbol functionalities. When forms are present within a template, each instance will possess its own independent Webhook configuration. Conversely, forms placed in a symbol will share a single, unified Webhook, providing distinct options for managing replicated content.
We’ve just seen how you can implement Webhooks to add custom integrations in Thrive Architect without having to use an automator plugin separately.