Guide to automating screenshots with Zapier

With the PagePixels Screenshots Zapier app, you can automate the process of taking screenshots and sending the resulting images to any of the 7000+ apps Zapier supports, such as:

Both PagePixels and Zapier are free to try. To get started, create your free PagePixels account here and free Zapier account at this link.

Zapier (rhymes with “happier”) is a no-code integration platform for moving data and automating the manual repetitive tasks you do between multiple apps everyday.

Worfklow automations in Zapier are called Zaps and zaps operate on an "if this, then that" model of automation. In this model, if an event happens in one app then Zapier fetches data about that event to complete an action in a different app.

For example, if a new screenshot appears in your PagePixels' account, then upload that new screenshot to your Google Drive.

Zapier refers to the "if this" part of an automation as a Trigger app event and "then that" as an Action app event.

Below is a list of the Triggers and Actions available for the PagePixels Screenshots Zapier app.

Triggers

Actions

You can connect your PagePixels account to Zapier while you're creating a Zap or in the "My Apps" section of your Zapier account, as shown below.

1

Log in to your Zapier account.

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

2

Go to your apps connections page.

You can also get here by clicking “My Apps” in the left sidebar menu.

3

Click the “+Add connection” button.

4

Search for and select the PagePixels Screenshots app.

5

Authenticate your PagePixels account.

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

Use a template

Zap templates are the easiest and fastest way to create a Zap. All you need to do is click on the "Try / Use this Zap" button and Zapier will auto-create the workflow in your Zapier account.

Here's a list of Zap templates that are available for PagePixels Screenshots.

Use the visual editor

When there's no template available for what you want to automate, you can build a custom Zap using Zapier's visual editor.

To explain how, we'll walk you through an example.

send new screenshots to google chat

Let's say you have a recurring screenshot setup in PagePixels, and you'd like new screenshots for that configuration to automatically appear in your Google Chat space.

To accomplish this, you can use the Trigger app event "New Screenshots in PagePixels Screenshots" and the Action app event "Create Message in Google Chat", as detailed below.

REQUIREMENTS

• An existing screenshot configuration in your PagePixels account
• A Business or School account with Google
• An existing Google Chat space
• The Zapier app added to a Google Chat space
• If you're unsure how to add apps to Google Chat, this Google Support doc can show you how.

1

Go to your Zapier dashboard.

Click the "+ Create Zap" button.

2

Click on the Trigger button.

You'll find it below the AI generative option.

3

Choose your Trigger app.

Type "pagepixels" in the Trigger search box, and select the "PagePixels Screenshots" app.

4

Choose your Trigger event.

Click the Event dropdown menu and select “New Screenshot", then click the "Continue" button.

5

Choose or authenticate your app account.

Select which PagePixels account you'd like to use from the dropdown menu or authenticate a new account connection.

Then, click the "Continue" button.

6

Set up your New Screenshot trigger.

Select one or more screenshot configurations that interest you from the "Limit to Screenshot Configuration(s)" dropdown menu.

Once selected, click the "Continue" button.

Alternatively, if you'd like for the Zap to run for all new screenshots in your PagePixels account, you can skip this step.

7

Test Trigger

Click the "Test Trigger" button.

After a successful test run, click the "Continue with selected record" button.

If the test run fails, see this Zapier article on how to troubleshoot.

8

Choose your Action app.

Search for and select the Google Chat app.

9

Choose your Action event.

Select "Create Message" from the "Event" dropdown menu, and click the "Continue" button.

10

Choose or authenticate your app account.

Select which Google Chat account you'd like to use or authenticate a new account connection.

Then, click the "Continue" button.

11

Set up your Create Message action.

To create a Google Chat message, you'll need to complete the required fields (designated by an asterik *):

• "Hangouts Chat Room"
• "Message Title"
• "Message Text"

For this example, we're also going to add input the non-required fields:

• "Message Image URL"
• "Action Button Text"
• "Action Button URL"

The "Action Button URL" field is where we'll insert the new screenshot URL fetched during our Trigger event.

For more details on this step and why we chose to create our Google Chat message this way - see our notes here.

12

Test action

Click the "Test Action" button

(Note, your test results may look different from the image above, depending on which fields you completed.)

After a successful Action test, you'll find a test message posted to the Google chat room (space) you specified.

13

Publish

After a successful Action test, click the "Publish" button.

Then, click "Publish" one more time in the "Ready to publish your Zap" modal window.

🎉 Your Zap is complete and activated. Now new screenshots for your configuration in PagePixels will automatically send to Google Chat.

📝 Notes

• Because of limitations with Zapier's Google Chat app, it's currently not possible to create a Zap that displays the full screenshot image in a Google Chat message. Instead, you can either add a link to the screenshot image or create a button that links to the screenshot. Our example does the latter.
• The "Message Image URL" field in the Google Chat action event displays an image at dimensions 24px width X 24px height (not ideal for most screenshot images). In our example, we use this field to display PagePixels' logo (via Google's favicon API), but please feel free to leave this field blank or use your own image.

Use the AI builder

Zapier has an AI builder that can auto-generate a Zap based on a text description.

For example, entering the prompt "If PagePixels generates a new screenshot, then upload that screenshot to Google Drive", produces the Zap:

Then, all you need to do is click the "Try it" button (top right), and finish setting up your Zap in the visual editor.

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

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 Screenshot functionality in Zapier using the "Multi-Step Actions" field in a supported Action app event.

Multi-Step Actions

Here's a list of available browser actions (aka "Multi-Step Actions"), and the expected format for Zapier.

{"type": "click", "selector": "#your-selector"}

{"type": "hover", "selector": "#your-selector"}

{"type": "redirect", "value": "https://example.com"}

{"type": "javascript", "value": "console.log('my javascript');"}

{"type": "evaluateJs", "value": "console.log('my javascript');"}

{"type": "css", "value": "#selector{ color: red }"}

{"type": "text_field", "selector": "#the-text-field", "value": "your-value"}

{"type": "select", "selector": "#the-dropdown-field", "value": "selected value"}

{"type": "checkbox", "selector": "#the-checkbox-field", "value":true}

{"type": "submit"}

{"type": "wait", "value": "5000"}

{"type": "wait_for_selector", "selector": "#your-selector"}

Multi-Step Example: Search

Suppose we want to create an Action in Zapier that does a search in Wikipedia for “hawaiian monk seal” and takes a snapshot of the resulting page.

To create this screenshot, you can use the Action app event "Take a Screenshot in PagePixels Screenshots", and the following inputs in your Action's configuration:

Website URL

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

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

Multi-Step Actions

This action will input the text value "tardigrades" into the text field identified by a CSS selector (#searchInput).

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

📝 Notes

• The left-side column under "Multi-Step Actions" you can leave as is. This column is only relevant to Zapier. It will not affect your screenshots or be reflected in your PagePixels account.
• To add more Multi-Step Actions in Zapier, use the "+" button. To remove, use the "X" button.
• The screenshot generated in this example uses the default settings for "Page Width" (1920px), "Page Height" (1000px), and "Wait Time to Capture Screenshot" (1500ms). You can change these settings in Zapier at anytime.