One of the new features added to WP Ultimo on version 1.6.0 is the ability to configure webhooks, allowing WP Ultimo to notify third-party services about events happening on your network in real-time.
This opens infinite possibilities, allowing network admins to do all sorts of crazy-but-useful integrations, especially if used in conjunction with services like Zapier and IFTTT.
What are Webhooks?
A simple definition of a webhook is:
A webhook (also called a web callback or HTTP push API) is a way for an app to provide other applications with real-time information. A webhook delivers data to other applications as it happens, meaning you get data immediately. Unlike typical APIs where you would need to poll for data very frequently in order to get it real-time. This makes webhooks much more efficient for both provider and consumer. (Source: https://sendgrid.com/blog/whats-webhook/)
The flow for a webhook call inside WP Ultimo is the following:
- Admin configures a new webhook for a given event;
- An event happens on the platform (a new Account is created, for example);
- WP Ultimo will push the data of that event to the configured URL, which is expected to handle that data;
- WP Ultimo logs the webhook call for future reference and updates the “sent events” count for that particular webhook.
Integrating with Zapier
Let’s dive in what is needed to integrate WP Ultimo’s webhook with Zapier. For our example integration, we want to be notified on Slack every time a new account is created.
Step 1: Creating a New Zap on Zapier
First of all, you’ll need a Zapier account for this, so go ahead and create your account on https://zapier.com/
After creating our new account (or logging in with our existing one), we will need to create a new Zap, which is the name Zapier gives to every integration you create on their platform. That can be achieved by clicking the Make a Zap! button on the top bar.
On the next screen, search for the Webhook app to be used as a trigger:
Then, in the next screen, we need to tell Zapier that we want it to Catch the Hook, then click Save + Continue:
The next screen offers advanced users the option of picking only a subset of the information sent by the webhook to be processed by Zapier. Although this can be useful for larger payloads, we won’t need that in our case, so simply click Continue:
On the following screen, click Continue (you can also tick the “Don’t show this message again” checkbox).
Now we are getting into the real action: time to send Zapier a demo call so it can learn what data it is expected to receive.
Zapier will display your webhook’s actionable URL. Make sure you copy that URL to your clipboard.
Zapier now expects a demo call from our network. We’ll need to head back to WP Ultimo to configure our Webhook there. DO NOT CLOSE THE ZAPIER TAB on your browser!
Step 2: Configuring the Webhook on WP Ultimo
Once back to your Network Admin panel, use the Top-bar WP Ultimo menu to go to Settings > Tools > Webhooks, This will redirect you to the Webhooks page inside WP Ultimo.
(If you have the Jumper activated, you can simply use ctrl + alt + g (cmd + option + g on Macs) and type Webhooks to go to that same page in a faster manner).
On the Webhook screen, click the Add new Webhook button on the bottom of the table, this will open the add webhook form.
Now we are able to add the webhook information. Enter a name for future reference (in our case, it will be “Slack Integration”). On the URL field, paste the URL you got from Zapier and on the Event drop-down, select the event you want to trigger this webhook.
Note: You can find a list of all available events on the bottom of the page with their respective payload contents (a.k.a the data they will send off when triggered).
For our Slack Integration, we will use the Account Created event, which sends as its payload the following data about the newly created account:
Click Save after adding the configuration info.
After the saving process is complete, click the Send Test Event link to send a test call to the webhook URL.
If everything goes right, you’ll receive a confirmation message with the response got from the remote server.
Alright!. Now it is time to head back to Zapier to finish the setup and integrate it with Slack!
Step 3: Finishing the Integration
Back to Zapier, click the button OK, I did this.
If your network was successfully able to send the test webhook call, Zapier will display a success message and you’ll be able to see the data received by clicking the view your hook link.
Click Continue on that screen and you’ll be presented with the Select Action step. We want to integrate this webhook with Slack, so let’s search for Slack on that search block.
For our example, we want Zapier to post the event to one of our channels, so we need to select that option, but you can select any other of the options available.
The next step is connecting your Slack account.
In the next screen, we can finally build the message we want to receive via Slack. Select the channel you want the message to be posted to and, in the Message Text input, enter the message. Use the data icon on the top-right corner of the input to insert placeholders for the actual data received from the webhook.
There’s a lot of other customizing options on this page, but for our purposes, we’ll just move along and click the Continue button at the bottom of the page.
We’ll now be able to send a test message to Slack, just to make sure everything is in order.
And…… IT WORKS!!
Go ahead and click that big Finish button.
Give your Zap a nice name, turn it on, and we are all set for testing this in real life!
Step 4: Testing in Real Life
Now, just to make sure everything is really working, let’s test the whole integration by creating a new account on our Network.
… and we are instantly notified on Slack that a new message arrived:
That’s only the beginning!
Integrating with Slack is a fun thing to do, and the possibilities are unlimited.
Zapier has over a 1000 apps to chose from, so you can use that info to send users to a CRM software or mailing lists, track failed payments and upgrades/downgrades on a spreadsheet, receive an SMS every time you receive a payment, etc.
Let us know if you have any questions or run into any problems trying to configure new webhooks on your Network. =)