GH#74: docs: add webhooks setup walkthrough screenshots

docs/user-guide/integrations/webhooks.md

@@ -15,15 +15,15 @@ This is helpful should you need to integrate or pass certain data from Ultimate
 
 To create a webhook, go to your network admin dashboard. Click on **Ultimate Multisite > Webhooks > Add New Webhook.**
 
-![Webhooks list page with Add New Webhook button](/img/admin/webhooks-list.png)
+![Empty Webhooks list page with Add New Webhook button](/img/admin/webhooks-list-empty.png)
 
 You can then edit the webhook configuration:
 
-![Webhook edit interface](/img/admin/webhook-edit.png)
+![Add New Webhook form with Name, Event, and URL fields](/img/admin/webhook-add-modal.png)
 
 When creating a new webhook you will be asked for information like **Name, URL,** and **Event**. You can use any name you want for your webhook. The most important fields are the URL and Event.
 
-![New webhook form with Name, URL, and Event fields](/img/admin/webhooks-list.png)
+![Webhook edit interface showing the URL field and payload preview](/img/admin/webhook-url-field.png)
 
 URL is the **endpoint or the destination** to which Ultimate Multisite will send the **payload or data**. This is the application that will receive the data.
 
@@ -33,28 +33,22 @@ In this article, we will be looking at the basic concept of how a webhook works
 
 Go to [requestbin.com](https://requestbin.com/) and click Create Request Bin.
 
-![RequestBin website Create Request Bin button](/img/admin/webhooks-list.png)
-
 After clicking that button, it will ask you to log in if you already have an account or sign up. If you already have an account it will lead you right to their dashboard. On their dashboard, you will immediately see the endpoint or URL you can use in creating your Ultimate Multisite webhook.
 
-![RequestBin dashboard showing the endpoint URL](/img/admin/webhooks-list.png)
-
 Go ahead and copy the URL and go back to Ultimate Multisite. Place the endpoint on the URL field and select an event from the dropdown. In this example, we will be selecting **Payment Received**.
 
 This event is triggered whenever a user makes a payment. All the events available, their description, and payloads are listed at the bottom of the page. Click the **Add New Webhook** button to save the webhook.
 
-![Webhook configured with Payment Received event](/img/admin/webhooks-list.png)
+![Webhook event dropdown with Payment Received selected](/img/admin/webhook-event-picker.png)
 
 We can now send a test event to the endpoint for us to see if the webhook we created is working. We can do this by clicking **Send Test Event** under the webhook we created.
 
-![Send Test Event option under the webhook](/img/admin/webhooks-list.png)
+![Webhooks list showing one configured webhook and Send Test action](/img/admin/webhooks-list-populated.png)
 
 This shows a confirmation window saying that the test was successful.
 
-![Webhook test event successful confirmation](/img/admin/webhooks-list.png)
+![Webhook test event result after sending a test payload](/img/admin/webhook-test-result.png)
 
 Now if we go back to the _Requestbin_ site we will see that the payload has been received containing some test data.
 
-![RequestBin showing received webhook payload data](/img/admin/webhooks-list.png)
-
 This is the basic principle of how webhook and endpoints work. If you are to create a custom endpoint, you will need to create a custom function to process the data your receive from Ultimate Multisite.

docs/user-guide/integrations/zapier-register-account.md

@@ -7,36 +7,34 @@ sidebar_position: 1
 
 In the article [Integrating Ultimate Multisite with Zapier](zapier.md), we discussed how to use Zapier to perform different actions within Ultimate Multisite based on triggers and events. In this article, we will show how you can integrate 3rd party applications. We will use Google Sheets as the source of data and send the information to Ultimate Multisite to register an account.
 
+Before connecting Zapier, go to **Ultimate Multisite > Settings > API & Webhooks** and confirm the API is enabled. Copy the API Key and API Secret from this screen when Zapier asks for the Ultimate Multisite account credentials.
+
+![API and Webhooks settings with API Key, API Secret, and Enable API options](/img/admin/settings-api-webhooks.png)
+
 First, you need to create a **Google Sheet** under your Google Drive. Make sure you properly define each column so that you can easily map the data later.
 
-![Google Sheet with columns for customer data](/img/admin/webhooks-list.png)After creating a Google sheet, you can log in to your Zapier account and start creating a zap.
+After creating a Google sheet, you can log in to your Zapier account and start creating a zap.
 
-![Zapier dashboard to start creating a zap](/img/admin/webhooks-list.png)Under the search field for **"App event"** select **"Google Sheets"**
+Under the search field for **"App event"** select **"Google Sheets"**
 
-![Selecting Google Sheets as the app event](/img/admin/webhooks-list.png)
 
 Then for the "**Event** " field select "**New spreadsheet row** " and hit "**Continue** "
 
-![Selecting New spreadsheet row event in Zapier](/img/admin/webhooks-list.png)The next step will ask you to select a **Google Account** where the **Google Sheet** is saved. So just make sure that the right google account is specified.
+The next step will ask you to select a **Google Account** where the **Google Sheet** is saved. So just make sure that the right google account is specified.
 
-![Selecting Google Account for the Google Sheet](/img/admin/webhooks-list.png)
 
 Under **"Set up trigger** ", you will need to select and specify the google spreadsheet and worksheet you will use where the data will be coming from. Just go ahead and fill those out and hit "**Continue** "
 
-![Set up trigger with spreadsheet and worksheet selection](/img/admin/webhooks-list.png)Next is to "**test your trigger** " to make sure that your google sheet is properly connected.
+Next is to "**test your trigger** " to make sure that your google sheet is properly connected.
 
-![Test your trigger step in Zapier](/img/admin/webhooks-list.png)If your test is successful, you should see the result showing some values from your spreadsheets. Click "**Continue** " to proceed.
+If your test is successful, you should see the result showing some values from your spreadsheets. Click "**Continue** " to proceed.
 
-![Successful trigger test showing spreadsheet values](/img/admin/webhooks-list.png)The next step is to set up the second action that will create or register an account in Ultimate Multisite. On the search field select "**Ultimate Multisite(2.0.2)** "
+The next step is to set up the second action that will create or register an account in Ultimate Multisite. On the search field select "**Ultimate Multisite(2.0.2)** "
 
-![Selecting Ultimate Multisite as the action app](/img/admin/webhooks-list.png)
 
 Under the "**Event** " field, select "**Register an Account in Ultimate Multisite** " then click the "**Continue** " button.
 
-![Register an Account in Ultimate Multisite action event](/img/admin/webhooks-list.png)Under "**Set up an action** ", you will see different fields available for customer data, memberships, products, etc. You can map the values under your google sheet and assign them to the proper field where they should be populated as shown in the screenshot below.
+Under "**Set up an action** ", you will see different fields available for customer data, memberships, products, etc. You can map the values under your google sheet and assign them to the proper field where they should be populated as shown in the screenshot below.
 
-![Mapping Google Sheet values to Ultimate Multisite fields](/img/admin/webhooks-list.png)
 
 After mapping the values, you can test the action.
-
-![Testing the register account Zapier action](/img/admin/webhooks-list.png)

docs/user-guide/integrations/zapier.md

@@ -41,7 +41,7 @@ Go to your network admin panel and navigate to **Ultimate Multisite > Settings**
 
 Select the **Enable API** option as it is required for this connection to work.
 
-![API Settings with Enable API option in Ultimate Multisite](/img/admin/webhooks-list.png)
+![API and Webhooks settings with API Settings and Enable API options](/img/admin/settings-api-webhooks.png)
 
 Use the **Copy to Clipboard** icon on the API Key and API Secret fields and paste those values on the integration screen.