# Webhooks

{% embed url="<https://youtu.be/N7PaFFs0zMM>" %}

## What are **Webhooks**

Webhooks are a way for applications to send real-time notifications or data to other applications. They are used to automate the exchange of information between different systems. When an event or trigger occurs in one application, it sends a POST request to another application's specific URL (the webhook), providing data about the event. The receiving application can then process this data and take appropriate actions.

Webhooks integration lets you contact your calculator with applications like [Zapier](https://zapier.com/), [Make](https://www.make.com/), and [IFTTT](https://ifttt.com/). These automation tools enable you to automate repetitive tasks by connecting two or more apps.

## Advantages, Features, and Practical Use Cases

* Collect user emails and send newsletters.&#x20;
* Send a lead to a specific employee based on the services selected in the cost calculator.
* Deliver automated text messages to your potential customers.
* Export orders, and quotations to Google Sheets.
* Arrange leads and quotation forms within Google Sheets.
* Generate a contact in your CRM.
* Get notified on Slack.com about a new lead.
* Personalize the Email Quote form by deactivating the default Contact form and instead send it manually using Zapier. Utilize the information from the webhook to structure the email according to your preferences.

## **How to Activate** and Utilize This Functionality

Webhooks can be added for [**Calculator Settings**](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings) by editing their settings:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FSbeccEzHeS1OOcPlaD04%2Fimage.png?alt=media&#x26;token=4e56183c-beb1-46d9-9594-9ece8c90deb0" alt=""><figcaption></figcaption></figure>

To use the Webhooks feature simply navigate to calculator settings and enable one of the available events:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FYp3hhYIikWWe9cjRQo3n%2Fimage.png?alt=media&#x26;token=899edd8b-65fc-44e6-a529-62b76a89dd69" alt=""><figcaption></figcaption></figure>

Enter the received link from the automation service and send the demo data to check the connection

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F8OGL4bzy7RBucniMzvuv%2Fimage.png?alt=media&#x26;token=17d668eb-4d91-4f18-91db-7f31a30026f7" alt=""><figcaption></figcaption></figure>

The integration works with the following events:

* [When a user submits Order Form](#when-contact-form-submitted)
* [When a user clicks the Payment button](#when-a-user-clicks-the-payment-button)
* [When a user sends an Email quote](#when-pdf-quote-is-emailed)

{% hint style="info" %}
Each event requires certain settings to be enabled on the calculator. When corresponding settings was disabled you will be informed in the form of a notice.
{% endhint %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F6HsqWN6Q7vcwW3JPVQZW%2Fimage.png?alt=media&#x26;token=6895beee-6621-45d7-9ee8-685538c5d6b7" alt=""><figcaption></figcaption></figure>

### **When Order Form Submitted**

The Data will be sent to the external application when a user submits the contact form:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F1oGSfpX9b0XssIc7onBG%2FWebhooks%20-%20submit%20button.png?alt=media&#x26;token=37a10d81-303c-4cc7-b1c3-03553c4a2cb0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This event requires the Order Form to be enabled.
{% endhint %}

{% content-ref url="order-form" %}
[order-form](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/order-form)
{% endcontent-ref %}

{% hint style="warning" %}
If you are using Contact Form 7, our webhooks won't work. Contact Form 7 can integrate with other systems and platforms with the webhook plugins. [Read more about the webhooks in Contact Form 7](https://usebasin.com/blog/configure-contact-form-7-with-cf7-webhooks).
{% endhint %}

### When a user clicks the Payment button

The event will run when the user makes a payment through one of the available payment methods such as Stripe and Paypal:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F6TXuCYzYvgH7P9ZIA1Hv%2FWebhooks%20-%20throuh%20payment%20gateways.png?alt=media&#x26;token=eb56df37-91c6-4891-b5f2-b049913a4b6d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This event requires one of the payment methods: Stripe or PayPal checkout to be enabled.
{% endhint %}

{% content-ref url="../../payments/stripe" %}
[stripe](https://docs.stylemixthemes.com/cost-calculator-builder/payments/stripe)
{% endcontent-ref %}

{% content-ref url="../../payments/paypal" %}
[paypal](https://docs.stylemixthemes.com/cost-calculator-builder/payments/paypal)
{% endcontent-ref %}

{% hint style="warning" %}
The event "When a user clicks the Payment button" is not available when WooCoommerce checkout is enabled.
{% endhint %}

### When PDF Quote is emailed

The Data will be sent to the external application when users send email generated pdf quotes:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FZRFzbzzWB0lCNZ9eKUhL%2FWebhooks%20-%20submit%20button%20pdf%20quote.png?alt=media&#x26;token=1cb0bc28-45fc-4a13-a5e3-968bb1b307f3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This event requires the PDF Entries to be enabled.
{% endhint %}

{% content-ref url="../global-settings/pdf-entries" %}
[pdf-entries](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/global-settings/pdf-entries)
{% endcontent-ref %}

## How to export Calculator Data to Google Sheets using Zapier

Let's review real-life examples that demonstrate the usage of Webhooks. Imagine, you are going to save all orders that were made using the Cost Calculator in Google Sheets to access it everywhere.

To do this, you need to follow simple steps and configure the applications involved.

### Step 1. Google Sheet preparation to receive data

Once logged into your Google account, [create a spreadsheet](https://docs.google.com/spreadsheets/u/0/) based on your business needs.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FsTiCCguiI6k1ZdF6MT9S%2FWebhooks%20-%20Google%20sheet%20created.png?alt=media&#x26;token=d9a59247-1f84-47f4-b126-5bf2d8c92b4d" alt=""><figcaption></figcaption></figure>

Our table above almost duplicates with additional columns default Cost Calculator orders.

### Step 2. Getting Webhook from Zapier

Zapier is an online automation tool that allows users to connect various web applications together and automate workflows. We will use this service to get webhooks, so you should authorize on the site or register if you have not an account yet.

{% embed url="<https://zapier.com/>" %}

After logging in to Zapier, we should create a new "**Zap**" from the dashboard:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fwt0IhLvqPEVinD6ZIAOT%2FWebhooks%20-%20new%20zap.png?alt=media&#x26;token=68d647ab-f811-4246-9e1e-f79eec31590d" alt=""><figcaption></figcaption></figure>

From the triggers list select "**Webhooks by Zapier**"

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F3mEihgqUg6vkLspMCFyi%2FWebhooks%20-%20new%20zap%20trigger%20select.png?alt=media&#x26;token=861befc9-a594-47fc-9d85-173fc1c61404" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
"**Webhooks by Zapier**" is available in the Premium plan of Zapier, and you can check the pricing by clicking the link below.
{% endhint %}

{% embed url="<https://zapier.com/app/pricing>" %}

Next, choose "**Catch Hook**" as an event and click on the "**Continue**" button.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FJ6W0UbDuL2G2tQEF8HoR%2FWebhooks%20-%20new%20zap%20event%20select.png?alt=media&#x26;token=42f518f3-1f59-4d90-978b-599510eb0b9a" alt=""><figcaption></figcaption></figure>

In the triggers tab, leave empty "Pick off a Child Key" and click on the "**Continue**" button:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F3ip5LjO9c4qgubNhmngG%2FWebhooks%20-%20Pick%20off%20a%20Child%20Key.png?alt=media&#x26;token=fd8f889c-ce75-47d7-8c21-a2e9a08ed9ee" alt=""><figcaption></figcaption></figure>

On the opened "Test" tab copy out the webhook URL:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FghGKiW7JW9oDsyJpi5NY%2FWebhooks%20-%20webhook%20copied.png?alt=media&#x26;token=eebde13a-d997-4b45-9427-c470a4d08c9e" alt=""><figcaption></figcaption></figure>

Done, now this webhook should be added to our calculator. Click on the **"Test trigger"** button and wait for dem data after adding the webhook into the calculator.

### Step 3. How to Add Custom Webhook into Calculator

On the Cost Calculator dashboard, simply edit the calculator where you want to add webhooks:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fq0qqfrzFjAvHiE0KdG0E%2FWebhooks%20-%20edit%20ccb.png?alt=media&#x26;token=87954653-d3c9-41b9-aee1-25f73b683a6d" alt=""><figcaption></figcaption></figure>

Navigate to calculator settings and enable one of the available events. We will send data when the user makes a payment. So we enabled the "When user clicks **Payment button**" event and added the webhook URL that was copied in the previous step:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FBODbGy7N1qnM0V9FlwXm%2Fimage.png?alt=media&#x26;token=8e141aaa-08ca-4264-b87a-87ce210eb187" alt=""><figcaption></figcaption></figure>

Click on the **"Send demo data"** button to complete the connection between Zapier and Calculator by sending sample data.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FPjtoGoXTTDQePf5qYrYW%2Fimage.png?alt=media&#x26;token=98536e9e-a570-4e69-b839-36ca22f8f3a4" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Important!** If you add or remove fields in your calculator, you must resubmit the data and update the settings in the automation service.
{% endhint %}

Go to the Zapier and make sure that you received demo data successfully:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FWzs3lT5hwZdnPox18yBO%2FWebhooks%20-%20webhook%20demo%20data%20revieved.png?alt=media&#x26;token=2f443142-ebe9-4bbf-ac57-33f9c6ca55e3" alt=""><figcaption></figcaption></figure>

Next, simply click on the "Continue with selected record" button to continue working on Zapier and add Actions to utilize the received demo.

### Step 4. Adding Actions into Zapier to send data Google Sheet&#x20;

From the actions list select "**Google Sheets**":

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fo1JuSREPSyV89c82J3eZ%2FWebhooks%20-%20zapier%20actions%20list.png?alt=media&#x26;token=52adbaf1-9d3b-402c-86d0-37195ad73cf5" alt=""><figcaption></figcaption></figure>

From the events list select "**Create Spreadsheet Row**" to automatically add new rows to our table when users create new orders:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FiL9sNVpBs8aHnX6fjTAJ%2FWebhooks%20-%20zapier%20actions%20selected.png?alt=media&#x26;token=772a515a-e93b-4ddf-81fe-3c184c4ec58a" alt=""><figcaption></figcaption></figure>

Connect your Google Account to access the sheet that was created in the 1st step. if connected click on the "**Continue**" button:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FuE4NecnVgXf8UwjzFoap%2FWebhooks%20-%20google%20account%20connected.png?alt=media&#x26;token=fcddf789-2dec-4dc8-bb6a-04915995de09" alt=""><figcaption></figcaption></figure>

Next, find the Spreadsheet from your Google Drive and select Worksheet, where data will be added:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F2bbNTeGACRKBqjgEpPMq%2FWebhooks%20-%20spreadsheet%20found.png?alt=media&#x26;token=32168e2d-b867-4161-9a49-2a174578fe71" alt=""><figcaption></figcaption></figure>

As soon as you find Worksheet, the rows will be available to fill with our data:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F9QFKmjHJYOpYVzn1jGzL%2FWebhooks%20-%20spreadsheet%20rows%20%20found.png?alt=media&#x26;token=bc3c549a-ceaa-40cf-9d52-845e5bacc907" alt=""><figcaption></figcaption></figure>

Fill in the fields with demo data by simply clicking on them and selecting the corresponding variables:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FaooGwTKnR2Kk0Ag7xY4V%2FWebhooks%20-%20spreadsheet%20rows%20%20filled%20out.png?alt=media&#x26;token=fdb347c8-23da-4557-b650-7fdc97b5c626" alt=""><figcaption></figcaption></figure>

After filling out rows click on the "**Test action**" button to send the sample date to our Spreadsheet.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FvpAcruv2i97vpHM0nY6X%2FWebhooks%20-%20spreadsheet%20rows%20test%20actuion.png?alt=media&#x26;token=549534f1-66b2-4ebf-bd9f-ae3b65a74ae0" alt=""><figcaption></figcaption></figure>

If the test passed successfully, you can "**Publish**" the Zap.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FF4SBFVi6PT2trjbdaCpW%2FWebhooks%20-%20spreadsheet%20rows%20test%20passed.png?alt=media&#x26;token=ccd09dbf-d33f-4c2d-86e6-752b6b81b0d4" alt=""><figcaption></figcaption></figure>

The sample data can be seen in Googe Spreadsheet.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FfyjJOjLMdJ2aFXCgvlA2%2FWebhooks%20-%20spreadsheet%20works.png?alt=media&#x26;token=1435aab6-31c3-4555-b318-379301d46d46" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The "Zap" that was created can be managed in the Zapier user account dashboard. You can make edits by adding new actions or disable.
{% endhint %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fc5G3KN3oa4005kDdxkhC%2FWebhooks%20-%20Zapier%20dahboard%20with%20Zaps.png?alt=media&#x26;token=9f0a4037-91ee-4f59-bbe3-918c24073ed9" alt=""><figcaption></figcaption></figure>

### Step 5. Testing Webhook from on page with Calculator

Let's make final tests by creating order as a regular user on your website:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FGHjvAiy5zr81ogCOTyVz%2FWebhooks%20-%20Zapier%20live%20test.png?alt=media&#x26;token=0efe816b-0771-4ba9-a9b9-1bf4a4c02699" alt=""><figcaption></figcaption></figure>

If we check our spreadsheet, we can see that a new row has been added with order details:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fsgv5mzb7hCETwDPmXPrl%2FWebhooks%20-%20spreadsheet%20last%20test.png?alt=media&#x26;token=4f75e0d2-f336-4c63-a5ee-4a2fb91e21af" alt=""><figcaption></figcaption></figure>

## Additional Information

Using webhooks, you can experiment with various actions utilizing diverse automation tools. Integration extends beyond the mere transmission of order details to Google Spreadsheets via Zapier.