The document discusses integrating WP Ultimo with Zapier using webhooks. It provides a tutorial on setting up a Zap in Zapier to send a Slack notification whenever a new account is created in WP Ultimo. The steps include creating a Zap in Zapier, configuring a webhook in WP Ultimo, sending a test event, and finishing the integration. The tutorial demonstrates testing the full integration by creating a new account and receiving a Slack notification, showing how webhooks can enable real-time integrations between services.
2. 2
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.
3. 3
What’s in this tutorial:
• What are Webhooks?
• Integrating with Zapier
• Step 1: Creating a New Zap on Zapier
• Step 2: Configuring the Webhook on WP Ultimo
• Step 4: Finishing the Integration
• Step 5: Testing in Real Life
• That’s only the beginning!
4. What are Webhooks?
4
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/)
5. 5
The flow for a webhook call inside WP Ultimo is the following:
1. Admin configures a new webhook for a given event;
2. An event happens on the platform (a new Account is
created, for example);
3. WP Ultimo will push the data of that event to the
configured URL, which is expected to handle that data;
4. WP Ultimo logs the webhook call for future reference and
updates the “sent events” count for that particular
webhook.
6. Integrating with Zapier
6
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.
7. Step 1: Creating a New Zap on
Zapier
7
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.
9. 9
On the next screen, search for the Webhook app to be used as
a trigger:
10. 10
Then, in the next screen, we need to tell Zapier that we want it
to Catch the Hook, and click Save + Continue:
11. 11
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:
12. 12
On the following screen, click Continue (you can also tick the “Don’t show this
message again” checkbox)
13. 13
Now we 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.
14. 14
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!
15. Step 2: Configuring the Webhook
on WP Ultimo
15
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).
18. 18
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).
19. 19
For our Slack Integration, we will use the Account Created event, which sends as its
payload the following data about the newly created account:
billing_frequency
created_at
plan_id
plan_name
price
template_id
trial_days
user_email
user_firstname
user_id
user_lastname
user_login
user_site_id
user_site_name
user_site_slug
user_site_url
Click Save after adding the configuration info.
20. 20
After the saving process is complete, click the Send Test Event link to send a test
call to the webhook URL.
21. 21
If everything goes right, you’ll receive a confirmation message with the response got
from the remote server.
Alright!. Now is time to head back to Zapier to finish the setup and integrate it with
Slack!
22. Step 4: Finishing the Integration
22
Back to Zapier, click the button OK, I did this.
23. 23
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.
24. 24
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.
25. 25
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.
27. 27
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 in the top-right corner of the input to
insert placeholders for the actual data received from the webhook.
28. 28
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.
31. 31
Give your Zap a nice name, turn it on, and we are all set for testing this in real life!
32. Step 5: Testing in Real Life
32
Now, just to make sure everything is really working, let’s test the
whole integration by creating a new account on our Network.
33. 33
…and we are instantly notified on Slack that a new message arrived:
34. That’s only the beginning!
34
Integrating with Slack is a fun thing to do, but 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 =)
35. Join the Awesome WP Ultimo
community!
35
Create your own WordPress.com-like service using WP Ultimo.
Visit https://wpultimo.com