Tilda website builder can send data from application forms using Webhook. To do this, follow these steps:
How to add WebHook to Tilda
1. Go to site settings;
2. Open the “Forms” section;
3. Scroll to the bottom of the page and click “Webhook”;
4. Copy the link from the “Incoming Webhook” block in the ChatApp bot constructor and paste it into the “WEBHOOK URL” field in Tilda;
5. In "API METHOD" select "POST";
6. Click Add.
Done! You have connected your Webhook to Tilda.
Setting up variables in an outgoing request
By sending a Webhook, Tilda sends data about the submitted application. This is for example:
- Email — email specified when filling out the form;
- Name — The name specified when filling out the form;
- Phone — Phone number specified when filling out the form.
Important: to use them in the constructor, you need to add at the end of the link the variable created in the “Incoming Webhook” block, for example, “id_chat” and equate it to the variable from Tilda.
It looks like this: $_POST["Date"], where instead of "Date" there will be the name of the form field variable from Tilda.
If we want to pass a phone number to Webhook, then the end of the link will look like this
Thus, when sending the form, Tilda will substitute the phone number indicated in the form instead of $_POST[“Phone”].
Setting up a bot
Now you need to teach the bot to ‘take away’ the phone number from the Webhook. To do this:
1. In the “Incoming Webhook” section, write the variable specified in the link in the previous step. In our example, this is "id_chat";
2. Create a "Send message*" block. Enter the previously created variable in ChatID. In our example, this is "id_chat";
3. Select the line and messenger;
4. Enter the text of the message, if necessary attach a file;
5. Save and publish the bot.
Done! Now, when a customer fills out a form on the site, they will receive a message in the selected messenger.