An Easy way of Setting Up Webhooks on SITE123 – Mailing list

by George Lithoxoidis
2 comments 138 views

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:

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.

image | GL Web Designs Blog

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

image 4 | GL Web Designs Blog

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

image 5 | GL Web Designs Blog

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.

image 6 | GL Web Designs Blog

Once this is selected, click on Continue to proceed setting up your integration.

image 7 | GL Web Designs Blog

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

image 8 | GL Web Designs Blog

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

image 9 | GL Web Designs Blog

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.

image 10 | GL Web Designs Blog

In the pop-up window, add the URL you got from Zapier as well the Trigger which is the option named “Mailing List: Registration

image 11 | GL Web Designs Blog

then proceed to SAVE your changes

image 12 | GL Web Designs Blog

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

image 13 | GL Web Designs Blog

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.

image 14 | GL Web Designs Blog

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”

image 15 | GL Web Designs Blog

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.

image 16 | GL Web Designs Blog
image 17 | GL Web Designs Blog

Once you place it hit Confirm to make sure that the connection has been set Successfully.!

image 19 | GL Web Designs Blog

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.

image 21 | GL Web Designs Blog

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.

image 23 | GL Web Designs Blog

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

image 24 | GL Web Designs Blog

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.

image 26 | GL Web Designs Blog

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 “test@test.com” so the ZAP can receive the new information that will be needed for the fields. Fill out the email and hit Subscribe.

image 28 | GL Web Designs Blog

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

image 29 | GL Web Designs Blog

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.

image 30 | GL Web Designs Blog

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.

image 31 | GL Web Designs Blog
image 32 | GL Web Designs Blog

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.

2 comments

Afterlife April 29, 2020 - 12:04 am

Wow nice article! It’s explain everything you need to know. Nice job George!

Reply
GL Web Designs April 29, 2020 - 11:21 am

Thank you! I appreciate it ☺

Reply

Leave a Comment

Subscribe to Our Newsletters

Get the news first! Subscribe for our newsletters and get the news on your email weekly! Be first and win more!

Thank you! You are now a subscriber!

%d bloggers like this: