The new webhooks on SITE123 have just been announced. It’s brand new feature where it enables you to have Webhooks for actions happening on your website – now this to someone might sound like a lot – but let us quickly explain what a WebHook is.
A very simple explanation on what a Webhook is that it’s a way where you can share with 3rd party applications Real-Time information, so an application can receive information as the event you have triggered happens. You can, for example, have a Mailing List Field on your SITE123 website which can once it’s filled up, send the information received to a Google Sheets sheet where it can in real-time update the information received from the form without the need to go back once in a while and update the sheet yourself. This helps you in many ways from growing your mailing list to ultimately growing your Business to something greater.
In this example we are going to be doing what we mentioned above – we will be configuring a Webhook to update a Google Sheet with the information we have received from the Mailing List form on our website.
Before you begin you need:
- Access to a SITE123 account – Click here to create one
- A Zapier Account – Click here to create one
- A Google Sheet where you can get the new rows of information coming in from the website
Step 1: Setting Up Zapier
Once you have created your account in Zapier, you will need to go ahead and create a new ZAP – using the sidebar on your left click on “MAKE A ZAP” and you will be redirected to a new page to add more information.
Once you get to the new page, the first thing you need to do is to give a name to your new Zap. In our example, we are going to be naming our Zap as “Update Mailing List from SITE123“
You will need to give a name to your Zap so you can always go back and make changes depending on what you want it to do later in time.
Once you are done changing the name let’s go and set up the App and the Triggers that will make it work for you. To do that, you will need to find the app available called “Webhooks by Zapier”
Once your App is chosen, you will proceed and choose one of the triggers available. In order for the Trigger to work, you will need to choose the option called “Catch Hook” which will “catch the new information as soon as they arrive on your website.
Once this is selected, click on Continue to proceed setting up your integration.
Once you continue – you will get the URL that you need to add on SITE123’s platform to test that the Webhook is working and it gets along the information available to your Zap and from there to our Sheet. Copy the URL from the page by clicking on the URL icon – and you will then need to add it to SITE123
STEP 2: Connect the Webhook to SITE123
To start, navigate to your website’s Dashboard and from there you will click on the button named Settings>>Webhooks and from there we are going to create our new Webhook onto SITE123’s platform
To make the new Webhook, proceed by clicking on “Add New Webhook” and then you will be prompted to add the URL you got (a step back) and when you wish your trigger to be activated.
In the pop-up window, add the URL you got from Zapier as well the Trigger which is the option named “Mailing List: Registration“
then proceed to SAVE your changes
Step 3: Confirm the Connection
Start by going to Zapier first, and continue from where you left off (the place you copied the Webhook URL) and hit Continue
Once this is done, we want to test if the connection work and preview the information we get on the page – so we can add the confirmation code in SITE123’s platform.
Back to SITE123 click on the “CONFIRM” button that will be available on the Webhook pop-up page.
Once you do so, you will be asked for a Confirmation code – to get this code, jump back to Zapier and click on “TEST & PREVIEW”
Once this is done – you will then have the Confirmation code you are asked in SITE123. Copy the code from the output and place it in SITE123’s field to confirm the connection.
Once you place it hit Confirm to make sure that the connection has been set Successfully.!
If the connection is Successful, you are done :phew: – now let’s set up what we want the trigger to do further from there.
Step 4: Set up Google Sheets
Now that the connection is set up, what we want to do further is to have Google Sheet fill out rows with the information we receive on the Mailing List form. This is maybe the simplest step to do once the hard part of the main connection is done.
To start, in Zapier proceed further lower in the Zap and choose what you wish your Zap to do from there on – in our case we wish to connect it to Google Sheets and select a specific Sheet where we have our Mailing List set up. Once you are done, hit Continue.
Choose the right account you wish to have set up for this Zap – so you can get the information to the right place then Continue.
From there, choose the Drive you wish the Zap to be connected to, and which one of your Spreadsheets should get the updates along with the Worksheet
Once the above is selected – then it will automatically refresh to include the headings you have on this specific Spreadsheet. For this to work we have chosen that we wish to receive the Date and Time we received their email and their Email – if the information are not correct click on the Refresh Fields button available to refresh the information that is showing up.
In order for the field to work properly, what you will need to do is visit the SITE123 website that you have been created (either live or via the editor) and fill out the Mailing List form you have implemented with a test email for example “firstname.lastname@example.org” so the ZAP can receive the new information that will be needed for the fields. Fill out the email and hit Subscribe.
Once the email has been submitted to the form, go back to Zapier and refresh the page so it can have the new information.
What do choose?
In the Time and Date field we have chosen the option “Sent Time” so we can know when their email was submited to the webste
In the Email field we have chosen the option “Data Email” so we can have the user’s email on the row
If you are all set then hit Continue and your workflow is done. Your last step would be to make a test from your website again and see how it works out.
If you are done, use the Toggle available to turn your New Zap ON and you would be good to go! Your new emails will show up on your Google Sheet and update automatically in real time.
You can make even more with Zapier – click here to create your own account completely free of charge
Do you have any questions? Do you need any help with setting it up on your website? Tell us in the comments below.