Integrating WP Ultimo with Zapier using Webhooks

See this as a SlideShare presentation →

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:

  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.

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.

Make a Zap!

On the next screen, search for the Webhook app to be used as a trigger:

Choosing a Trigger App

Then, in the next screen, we need to tell Zapier that we want it to Catch the Hook, and click Save + Continue:

Selecting the “Catch Hook” option

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:

Advanced Option: Using only part of the data sent

On the following screen, click Continue (you can also tick the “Don’t show this message again” checkbox).

Click “Continue”

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.

Copy the URL, we’ll use it on the WP Ultimo Webhooks page

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).

Reaching the “Webhooks” page via the Jumper, available since version 1.6.0

On the Webhook screen, click the “Add new Webhook bottom of the table, this will open the add webhook form.

Click “Add New” to create a new Webhook

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:

  • 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.

After the saving process is complete, click the Send Test Event link to send a test call to the webhook URL.

Click “Send Test Event” to send an example call to Zapier

If everything goes right, you’ll receive a confirmation message with the response got from the remote server.

WP Ultimo displays the remote server response after sending a test call. This is useful for debugging if you run into any problems

Alright!. Now is time to head back to Zapier to finish the setup and integrate it with Slack!

Step 4: Finishing the Integration

Back to Zapier, click the button OK, I did this.

Click “OK, I did this” after sending a test call on WP Ultimo

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.

If Zapier is able to get the test data, it will display a “Test Successful” screen
Click the “view your hook” link to see the data received by Zapier

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.

Search and select Slack as the Action App

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.

Tell Zapier to post the message to one of our Slack channels

The next step is connecting your Slack account.

Click “Connect an Account” if you don’t have any Slack account linked yet
Select the Slack Account you want to use

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.

Select the channel and build the message you want Zapier to post. Use the icon selector in the top-right corner to open the placeholder selector, where will be able to insert the data received onto the message

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.

Click “Send a Test to Slack” to test the final part of the integration

And…… IT WORKS!!

If everything goes according to plan, you should receive a message on the selected channel over Slack

Go ahead and click that big Finish button.

Click the “Finish” button

Give your Zap a nice name, turn it on, and we are all set for testing this in real life!

Give your Zap a name and turn it on!

Step 5: 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.

Creating a test account to test if that triggers the Webhook

… and we are instantly notified on Slack that a new message arrived:

Success!

That’s only the beginning!

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 =).

Was this article helpful?

Related Articles

Leave A Comment?