Guide to automating screenshots with Make

Learn how to take, send, and create screenshots in Make (Integromat) with the PagePixels Screenshots integration.

What is Make?

Make (formerly Integromat) is a no-code visual automation plaform for automating manual, repetitive business processes done between different apps.

A few examples of business processes you can automate with Make include:

  • Email a screenshot of an online report to members of your team.
  • Create screenshots of new data added to your team's Airtable base.
  • Download copies of new screenshots generated in PagePixels and save the images to your OneDrive.

Business process automations in Make are called Scenarios and to create a scenario you need two things - a Trigger and one or more Action modules.

A Trigger

  • Is the first step of a Scenario, and what triggers the automation to start.
  • It can be a time interval you set using Make's scheduler or a specific Trigger event that happens in an app (new screenshot captured in PagePixels).
  • You can only have one Trigger per Scenario.

An Action app event

  • Comes after a Trigger (or another Action),
  • Uses data from a Trigger event or another Action in one app to create, update, find, or delete an item in another app,
  • You can have one or more Actions in a Scenario.

What Triggers & Actions are available?

Below is a list of Triggers and Actions you can access through the PagePixels Screenshots Make app.

Triggers

Watch Screenshots

Triggers when a new screenshot is taken in PagePixels, optionally limited to specific screenshot configurations.

Watch Screenshot Configuration

Triggers when a new screenshot configuration is created in PagePixels.

Actions

Create a Screenshot of a Web Page

Takes an instant screenshot of a web page from a URL.

Schedule a Screenshot of a Web Page

Creates a recurring screenshot of a web page on a schedule you define. You will receive the Embed URL as a part of the response. The Embed URL always displays the latest screenshot taken for this configuration, so it can be used on public websites, dashboards, and internal systems directly, with no API key.

Create a Real Geolocation Screenshot of a Web Page

Captures a screenshot from real geolocations around the world. Screenshots are taken through a proxy network within the geographical location you specify. Choose from hundreds of countries and any US State for your geolocation testing needs.

Create a Screenshot from Custom HTML

Creates a screenshot from any custom HTML you provide. This makes it easy to take a screenshot of new emails, create custom reports from third-party APIs, and more.

Create a Screenshot of a Web Page and Analyze the Image with OpenAI's ChatGPT

Captures a web page screenshot and runs an AI visual analysis based on your prompt. Useful for extracting data, generating summaries, or querying the website's content. No OpenAI keys or additional setup required.

Analyze any Image with OpenAI's ChatGPT

Creates an AI visual analysis of any image guided by a text prompt. Submit up to 5 images and 5 prompts. Useful for comparing images, tracking changes, monitoring visual regressions, and extracting text. No OpenAI keys or additional setup required.

Get a Screenshot

Gets the requested Screenshot Configuration, including all associated IDs and the Embed URL for the latest screenshot.

Update a Screenshot

Updates the Screenshot Configuration and immediately begins taking a screenshot with the new configuration.

Delete a Screenshot

Deletes the Screenshot Configuration and all screenshots associated with the configuration.

Make an API Call

Performs an arbitrary authorized API call. Helpful for accessing PagePixels features not yet available through Make, but accessible through the PagePixels API.

How to connect PagePixels Screenshots to Make

Below are the steps for connecting your PagePixels Screenshots account to Make:

1

Log in to your Make account.

If you don't already have a Make account, you can create a free one here.

2

Click the "+ Create a Scenario" button

3

Add a PagePixels Screenshots Trigger or Action

Search for and click on the PagePixels Screenshots app.

Select a Trigger or Action module

4

Click Create a Connection

5

Name your connection and click Save

6

Authenticate your PagePixels account.

Once you successfully connect your PagePixels account to Make, you’re ready to start automating your screenshots.

How to automate screenshots in Make

Below are examples to help demonstrate how you can automate screenshots in Make.

CREATE A SCREENSHOT EXAMPLE

How to take, download, and send screenshots to your Google Drive

Using the PagePixels "Create a Screenshot of a Web Page" Action, you can automate taking screenshots of web pages within Make.

To demonstrate, we're going to create a Scenario that takes a screenshot, downloads a copy of the screenshot, and saves the image to Google Drive.

REQUIREMENTS

  • A PagePixels account connected to Make,
  • A Google Drive account connected to Make,
  • A link to the website you want to screenshot.
1

Click the + Create a new scenario button

2

Add the PagePixels Create a Web Page Screenshot Action

Search for and click on the PagePixels Screenshots app.

Select "Create a Screenshot of a Web Page"

3

Configure your screenshot

Copy and paste your web page URL into the "Website URL" field (required).

All other fields are optional. When you're done configuring your screenshot, click the "OK" button.

4

Add the HTTP Get a file Action

Click the "Add another module" button.

Search for and click on the "HTTP" app and choose the "Get a file" Action module.

5

Configure the Get a file Action to fetch the screenshot

In the "Get a file" module, click into the "URL" field, and select the "Direct Link" item option.

Click the "OK" button at the bottom.

6

Add the Google Drive Upload a file Action

Click the "Add another module" button.

Search for and click on the "Google Drive" app and choose the "Upload a file" Action module.

7

Configure uploading your screenshot file to Google Drive

The File field should auto-select the HTTP - Get a file item option for you.

Complete the other fields to your preference. When you're done, click the "OK" button.

Note - after clicking the "OK" button, an red error bubble may appear on your Google Drive module. To clear the errors, click into the module, and click the "OK" button again.

8

Test your Scenario

Click on the "Run once" play button to test your scenario.

After a successful test run in Make, you should see a screenshot image file appear in your Google Drive.

9

Turn on your Scenario (or add another Action)

To have your Scenario run automatically, toggle the scheduling toggle (bottom-left) to the "ON" position.

🎉 Your Scenario is now complete and by default will run every 15 minutes.

CUSTOM HTML EXAMPLE

How to create screenshots of your Microsoft 365 Outlook emails

There's countless things you can do with the PagePixels "Create a Screenshot from Custom HTML" Action in Make, but one common use case is creating screenshots of emails.

To demonstrate how you can do this, we're going to create a Scenario that automates creating screenshots of new email messages in Outlook (Microsoft 365 Email).

REQUIREMENTS

  • A PagePixels account connected to Make.
  • A Microsoft 365 Outlook email account connected to Make.
1

Click the + Create a new scenario button

2

Add the Microsft 365 Email Watch Messages Trigger

Search for the Microsoft 365 Email app and select the "Watch Messages" Trigger.

3

Configure your Watch Messages Trigger

Choose when to Make should start watching for new email messages, and click the "OK" button.

Next, specify which new emails you want to use in your automation.

For example, in the image below we chose to watch only messages in a specific folder, called Test.

When everything looks good to go, click the "OK" button.

4

Add the PagePixels Create a Screenshot from Custom HTML Action

Click the "Add another module" button

Search for and click on the "PagePixels Screenshots" app and choose the "Create a Screenshot from Custom HTML" Action.

5

Configure your screenshot

Click into the Custom HTML field and select the "Body: Content" data item from the "Watch Messages" module.

(This item contains the HTML for your email)

To have the entire email appear in the screenshot, scroll to the "Full Page" field and select the "Yes" option.

Once you're done configuring your screenshot, click the "OK" button.

6

Test your Scenario (optional)

Click on the "Run once" play button to test your scenario.

Important note: To test the full scenario, requires a new email in your Outlook account that meets the conditions set in the "Watch Messages" Trigger.

7

Turn on your Scenario (or add an Action)

To have your Scenario run automatically, toggle the scheduling toggle (bottom-left) to the "ON" position.

🎉 Your Scenario is now complete and will automatically run when the conditions of the "Watch Messages" trigger are met.

Multi-Step Screenshots in Make

Use PagePixels Multi-Step Screenshot feature to interact with websites before capturing a screenshot, so you can:

  • Fill out a password login form,
  • Perform a search,
  • Apply filters,
  • Navigate to another page,
  • And more.

PagePixels Multi-Step works by making browser actions (click, input text, press enter, etc.) available for you to add, and then PagePixels runs those actions for you before taking the screenshot.

You can access Multi-Step functionality through the "Multi-Step Actions" field in the following Action modules:

  • Create a Screenshot of a Web Page
  • Scheduled a Screenshot of a Web Page
  • Create a Screenshot from Custom HTML
  • Create a Real Geolocation Screenshot of a Web Page
  • Create a Screenshot of a Web Page and Analyze the Image with OpenAI's ChatGPT

Multi-Step Actions

Here's a list of browser actions (aka "Multi-Step Actions") you can use, and what the expected format is for Make.

Action Example
Click 
{"type": "click", "selector": "#your-selector"}
Hover 
{"type": "hover", "selector": "#your-selector"}
Change Notification [{"type": "change", "selector": "#your-selector", "send_to": "webhook", url: "https://example.com/webhook-url"}]
Goto URL 
{"type": "redirect", "value": "https://example.com"}
Run Javascript 
{"type": "javascript", "value": "console.log('my javascript');"}
Evaluate Javascript 
{"type": "evaluateJs", "value": "console.log('my javascript');"}
Insert CSS 
{"type": "css", "value": "#selector{ color: red }"}
Text Field Input 
{"type": "text_field", "selector": "#the-text-field", "value": "your-value"}
Dropdown Field Selection 
{"type": "select", "selector": "#the-dropdown-field", "value": "selected value"}
Checkbox Field Input 
{"type": "checkbox", "selector": "#the-checkbox-field", "value":true}
Press Enter (to submit hidden forms) 
{"type": "submit"}
Wait X milliseconds 
{"type": "wait", "value": "5000"}
Wait For Selector 
{"type": "wait_for_selector", "selector": "#your-selector"}

Multi-Step: Escape special characters

Make sure to escape special characters (e.g. quotes "", '') in your Multi-Step Action inputs. Otherwise, you'll get an error or your actions will not work as intended.

Not Escaped

❌ {"type": "wait_for_selector", "selector": "input[type="email"]"}

Escaped

✅ {"type": "wait_for_selector", "selector": "input[type=\"email\"]"}

MULTISTEP SCREENSHOT EXAMPLE

How to perform a search with Multi-Step Actions

Suppose we want to search Wikipedia for "hawaiian monk seal", and then take a screenshot of the results page.

For example:

To accomplish this in Make, you can use the Create a Screenshots of a Web Page Action module, and the following inputs:

1

Website URL

https://www.wikipedia.org/

For Multi-Step screenshots, the “Website URL” is the starting point of our step sequence and where the first Multi-Step Action takes place.

Important Note - The URL must include "https://" or "https://" and be publically available.

2

Multi-Step Actions

[{"type": "text_field", "selector": "#searchInput", "value": "hawaiian monk seal"},{"type": "submit"}]

Breakdown of each action

{"type": "text_field", "selector": "#searchInput", "value": "hawaiian monk seal"}

  • This action will input the text value "hawaiian monk seal" into the search text field identified by a CSS selector (#searchInput).

{"type": "submit"}

  • This action simulates pressing the "Enter" key to submit a form. In this case, it submits our search to Wikipedia.

📝 Notes

  • The screenshot generated in this example uses the default settings for "Page Width" (1920px), "Page Height" (1000px), and "Wait Time to Capture Screenshot" (1500ms). Feel free to change these settings in Make to fit your needs.

To learn more about Multi-Step and see more examples of how to use this feature in Make, check out our Multi-Step Help Guide.

Have questions about Multi-Step Screenshots? Contact us:

support-tickets@pagepixels.com

Support

Questions? Contact us anytime by email:

support-tickets@pagepixels.com

Or send us a message through our Support page.