Sending order details from website form to Integromat via Webhook

Updated: 08.04.2023

In this post, I’ll tell you how I send order form data from my site to Integromat and what I do with it afterwards.

In my case, the site is on WordPress, and I use the popular Contact Form 7 plugin for the order form. There are other advanced plugins, but this one is somehow closer to me. It’s, you might say, old-school.

Whatever CMS or service you have, all you have to do is set up to send all the variables to the Webhook URL. This is a unique URL that Integromat generates when you create a Custom Webhook module.

Creating a scenario and Webhook in Integromat

• Sign up
• Create a new scenario
• Add the modules that we will need in the scenario (this is not necessary, you can add them later directly in the scenario itself)
• Continue and proceed to the diagram itself.
• Add the first module.

The first module is always the module where the entire scenario starts. For the first module, there should always be a setting for which schedule to check/receive data (icon of clock or lightning).

• The clock icon means that scenario is scheduled. Also modules that support this mode have ACID label. For example, module Trello -> Watch Cards Moved to a List. If you set the schedule every 15 minutes, the module will check if the cards have been moved to a particular list. This is an easy-to-set-up scheme, but it will consume a lot of operations (because every 15 minutes there will be at least 1 check operation).
• The lightning icon means Webhook principal when the scenario starts only when the module is triggered. For some modules, it is the default option and created automatically (e.g. Trello -> Watch Activities).
• Also, this module has the label INSTANT, which says that it can work as a Webhook, working in listening mode and triggered only when a request comes in.

Now we need to create the first Custom Webhook module. Give our webhook a name, if necessary, specify valid IP addresses and save.

After creation, the module will generate an URL, which we will need next.

Setting up data sending to Webhook in your CMS

Let’s go back to our WordPress site. Integromat has no direct integration with Contact Form 7 (but it does with WPForms). For CF7 we need an additional plugin CF7 to Webhook or others like it.

UPDATE: Integromat has already added Contact Form 7 module, you can use it now. There is also a webhook plugin in the documentation called CF7 Redirections, Integrations and Database, so it can be used as an alternative to the CF7 to Webhook plugin.

After installing the plugin, a Webhook tab will appear in our form settings in CF7, where we’ll make a couple of adjustments.

1. Insert the link that Integromat generated into the Webhook URL field.
2. Check Send to Webhook.
3. I recommend check Send CF7 mail as usual, so that CF7 sends orders to the mail by default, as before. I think there should be a duplicate notification channel for orders. If you have an error in the scenario, Integromat will stop it and all subsequent requests will not be executed until you fix the error in the scenario. Also, some of the modules may fail, some global failure may occur, and the scenario will stop too. And the old-fashioned email always works and you can see incoming orders on it if Integromat is unavailable. In general, use mail as a safety net.
4. Optionally, you can add Special Mail Tags for your Webhook and email.

Process the input and run the scenario

Make a test run of the scenario. Webhook will start “listening” for the data. At this point, you need to submit an order form and see how that data arrives in the module.

This is what it will look like:

Further, when you attach new modules, you will be able to use variables from previous modules. In this case, it is the Webhooks module.

What to do next with the incoming data? To do this, it’s important to understand the problem you want to solve. Often these data need to come into the CRM system and then work with them. Integromat has many CMS with which integration is directly configured. A cursory search for the key “CRM” revealed more than a dozen systems.

In my example, I’ll show you how you can make a semblance of a CRM system in Trello, and agents can even work in it. Trello has a lot of customization and integration options, and it’s also relatively free. It’s better to use the platform for a while and understand its essence before configuring a scenario in Integromat.

Creating a card in Trello

1. Add Trello -> Create a Card module (need to create a user in Trello, Integromat will do all the actions on his behalf, in fact, it will be a bot-user, so you can call it that. Also create a board, where all orders will be). All this we specify in the module.
2. Then specify in which list to create a card, with which label, whom to add, and in which position to move the card.
3. Map the name and description of the card. If you have a date in your order form, and you want that deadline to be displayed in the card, map the Due date. My advice here is to always get the same format from the form, e.g. 25.12.2020 (or use the formatDate() function in Integromat to format the date in the desired way). Then Trello will understand it. If Trello module doesn’t recognize the date, the date won’t be set and the module will fail, and the scenario will either stop or try to execute the same erroneous bundle again (depending on your settings). Or you will need to add to the module Error handler (logic what to do if the module fails). For example, you can continue the scenario (Resume) or end the scenario and mark it as “successful” (Commit). Read more about Error handlers in the documentation.

Next, often in CRM, there are special fields with customer data, such as Name, Email, Phone, etc. For this purpose, Trello has an add-on Custom Fields – I recommend install it right away. Create the necessary fields and go back to the scenario.

Example of a card with custom fields:

To be able to use the data from the custom fields in further scenarios, we automatically fill them with data from our order form. To do this, use the module Trello -> Set a Custom Field on a Card.

One such module can fill only 1 custom field, e.g. insert a customer’s email from your form into it. Create as many modules as you need to fill all necessary fields.

If fields in your order form are not required and you want to add data from them to custom fields in Trello, then you need to add Error Handler – Resume to those fields, so the scenario will continue to work if there is no data for that custom field. Otherwise there will be an error in this module when you try to fill it and the scenario will stop.

Here’s what the intake scenario might look like:

Assigning an agent to a card (under 2 agents)

Next, you need to assign a specific agent to that order (if you have more than one agent). For 2 people this can be solved simply:

• even numbers of orders go to first agent.
• odd-numbered orders go to second agent.

How to know the number of the order in Trello? This is the ShortID that is assigned to the card immediately after its creation. In the interface, you can see the number of the order by clicking on the “Share” button.

Next, the formula determines whether there is a remainder when dividing the number of order by 2 (since we have two agents). If there is no remainder, then the number is even.

This is what it looks like in the module Trello -> Add a Member to a Card:

Here you also need to know the id of the users on your board. We will assign a user by id through the if() function.

To find the user id, add .json to your board URL address and open the page. For example https://trello.com/b/5HqjnY/orders.json. You will see all the code of the page in JSON, here you can search throughout all the page code with Ctrl+F to find the username of a person. Next, find the user id near it. I recommend to write down all the found id’s somewhere so you won’t have to search id’s in code again.

Assigning an agent to a card (more than 2 agents)

I will describe the logic when there are more than 2 agents. I like the following option: check who was the last agent (only new orders are checked), and depending on the result, assign the next one. Also in this logic we will check for old/new customer, what is useful when assigning agent and statistics in general.

The working principle is as follows.

Identifying the new/old client

If all orders are written in Google Sheets, you can check if an old client or a new one came in by matching the email. This is useful for calculating statistics. Also in my case, it is better to assign an “old” client to the agent, already assigned to him.

1. Check if the email is in the database using Google Sheets -> Search Rows.

2. Aggregate the results with the Numeric Aggregator module

In my case, there can be several repetitions of emails, and I need to get the only row with the most recent record. To do this, in the Numeric Aggregator we transform the cell with the date of the order into timestamp using formatDate and X. Aggregate the values by the maximum value (MAX). The output of the module will be the maximum timestamp. This will be the most recent date of the order.

3. Perform another database search

Next, you need to perform another database search with the highest timestamp and email, using two conditions.

Here we search by the same email and timestamp, which is converted back to the normal date format (as recorded in the table). We use the two conditions to find the line with the right email and the most recent date.

4. Aggregate the data into one bundle using the Array Aggregator

There can be several packages, so in order to get only one bundle through the scenario, you need to aggregate them into a single array using the Array Aggregator.

From there, you can continue the scenario with the assigning of an agent to the order. All this was done in order to understand how many bundles will be in the Array Aggregator. If 0, it means the customer is new because no email matches were found. If 1, it means old and matches were found.

Adding the row with order data in Google Sheets

Next, I add all the order data to Google Sheets. New order – new line. The new order – the new row. It’s simple here, we just map the cells in the columns. Cell with the current agent at this stage is not filled.

I add the following data to the table: Trello card id, ShortID order number, date, type of service, customer data, and many other fields needed for further work and analysis.

Then, for example, to implement payment by Stripe, you will need to find which card payment made for, and Google Sheets will help you with that if the row has all the necessary data. See the article about connecting the payment system Stripe.

Checking previous rows

After adding a new row with order details, we know the number of this row. Based on this number, we determine the previous row numbers. I check 30 previous orders.

This block of operations is needed to assign the next agent based on the previous agent, but only for orders with the status of “New”, bypassing the status of “Old”. Otherwise, the algorithm will distribute orders unevenly (the queue will be disrupted) when a order comes from an old client.

Next, using the module Google Sheets -> Get Range Values, we get the values New/Old in the desired rows.

Next, we need to determine the last row with the status of “New”, it will be the highest numbered line. We use the module Numeric aggregator. If the status is not “New”, then just do not use it for counting.

Identifying the previous agent

Using Google Sheets -> Get a Cell we get the data from the agent cell from the previous row, where the order was new.

Now we can assign an agent to a card using the switch() function. For example, if the previous agent=1, then put agent 2. And so on.

In this variant in the screenshot, there is also a function if(). The essence is that if the order is repeated from an old client, then the “old” agent is assigned, bypassing the queue. If the order is from a new client, then the queue of agents is respected.

Assigning agent depending on the day of the week

If you want to assign agents depending on the day of the week, you have to complicate the scenario.

Do the following:

1. Define the day of the week with the function

For this, we use the formatDate() function and the now variable. Use the E token for formatting.

More about date tokens here in the documentation – https://support.integromat.com/hc/en-us/articles/360005772013-Tokens-for-date-time-formatting

2. Define the agent id for any day of the week (pre-set)

In this module I define the agent id for:

• 1-3 days of the week.
• 4-5 days of the week.
• 6-7 days of the week.
• 1-7 days of the week if old client (it did not fit on the screenshot).

As a result we will get agent id for any day.

3. Define agent id for the desired day of the week

We use 2 if() functions to do this. The output will be the final agent id for the corresponding day of the week.

4. Finally define the agent id (new/old client)

The result of this module can already be used for the module Trello -> Add a Member to a Card.

Notifications and emails

I use the Telegram module for notifications of new orders. To do this:

• Create a bot in BotFather
• Create a group where you will receive orders. Add the bot there. Make the bot administrator.
• Find out the id of the group, you can add a bot to the group that shows you the id. For example @myidbot
• Go to Integromat and add the Telegram module, add the bot token, chat id, map the message. That’s basically it.

To send emails to customers, we need the Email module to send the first email to customers about the successful receipt of an order.

To send emails, do the following:

• Create a mailbox on your domain (site domain).
• Add email to the Email – Send an Email module in Integromat.
• Add the source code of the email (you can also add required variables there). I recommend Stripo.email for creating an email template, it’s a very handy constructor.
• If you want, you can add a hidden copy of yourself (to monitor the emails at first).
• You have to set up DKIM, DMARC, SPF to get your emails in spam less often. But that is another topic.

If you want, specify in the field From contacts of agent (they can be dynamic and different from sender). For example, it is convenient to specify the mail and the name of the agent who was assigned to the order. If the client responds to the email, he will respond to the particular agent and not to the mail from which the email was sent.

To do this, set variables with the agent’s name and email after he has been assigned to the order.

Insert variables in the Email – Send an Email module.

---

Thus, we create a card in Trello from our order form on the website, assign an agent, add data to Google Sheets, notify the participants of the chat in Telegram, and send an email to the client.\

Any questions? Don’t hesitate, leave a comment!