DEV Community

Cover image for Get a Slack alert with a screenshot when a web page changes, with Zapier
Dennis
Dennis

Posted on Fully Autonomous

Get a Slack alert with a screenshot when a web page changes, with Zapier

Written by the SnapRender team. SnapRender is the screenshot service used in this guide; its free plan includes one watched page.

Some pages matter enough that you want to know the day they change: a competitor's pricing page, the terms of a service you depend on, a client's homepage after their developer pushes an update, your own checkout after a deploy. Checking them by hand works for about a week.

This guide sets up a watcher that does it for you. SnapRender captures the page on a schedule and compares each capture with the one before. When the difference passes a threshold you choose, a two-step Zap posts the new screenshot to Slack, with the page address and how much of it changed.

The Zap:

  1. SnapRender: New Page Change Detected (instant trigger)
  2. Slack: Send Channel Message

Two steps means it runs on Zapier's free plan.

What you need

  • A Slack workspace where you can add apps to a channel.
  • A Zapier account (free is fine).
  • A SnapRender account. Sign up at app.snap-render.com with Google, GitHub or email. Your API key is on the API keys page of the dashboard and starts with sk_live_.

SnapRender for Zapier is in beta while Zapier reviews it for its public app directory. Until it is listed, add it to your Zapier account with the invite link:

Add SnapRender to Zapier

Open it, sign in to Zapier and accept. SnapRender then shows up in the Zap editor like any other app.

Step 1: tell SnapRender which page to watch

The trigger fires from SnapRender's scheduled captures, so start there.

  1. Open the Schedules page in your SnapRender dashboard and add a schedule.
  2. Paste the page URL, for example a pricing page.
  3. Choose how often to check: every hour, day or week. The free plan holds one schedule, checked daily or weekly; paid plans add hourly checks and more schedules (5 on Starter, 25 on Growth).
  4. Choose how big a change should count. The presets are any change (even one changed number), noticeable changes such as a new line or banner, and big changes only. You can also set your own threshold as a percentage of the page.

The first capture runs within a few minutes. From then on, each capture is compared with the one before, and the dashboard shows both versions side by side with the changed areas outlined.

A note on the threshold: start with "noticeable" for most pages. "Any change" is right for pages where one number matters (a price, a date), but it also picks up a rotating testimonial or a "posted 3 hours ago" label. Cookie banners and ads are removed before every capture, so they do not trigger false alarms.

Step 2: the trigger in Zapier

  1. In Zapier, click Create, then Zaps.
  2. Choose SnapRender as the trigger app and New Page Change Detected as the event.
  3. Connect SnapRender by pasting your API key. The connection is named after your plan, for example "Free plan".
  4. Schedule: pick the schedule you just created, or leave it empty to run for every page you watch.
  5. Click Test trigger.

If one of your pages has already changed, the test shows that capture. If not (likely, since you just created the schedule), Zapier shows a sample record. Either way you can map the fields:

  • Page URL
  • Changed Area (%): how much of the page looks different, for example 4.37
  • Change Threshold (%): the threshold you set
  • Captured At
  • Screenshot Download Link: the new screenshot, valid for 1 hour
  • Capture ID, Schedule ID and Screenshot SHA-256, if you want to keep records

When you turn the Zap on, SnapRender creates a webhook for it, so the Zap runs the moment a change is detected instead of polling. Turning the Zap off removes the webhook again.

Step 3: post to Slack

  1. Add an action: Slack, event Send Channel Message.
  2. Connect Slack and pick the Channel.
  3. Message Text: something like

Page changed: {Page URL} ({Changed Area (%)}% of the page looks different)

where the parts in braces are the fields you insert from the trigger.

  1. File: map Screenshot Download Link.
  2. Click Test step and check the channel.

Why the File field and not a link in the message? The download link expires after an hour. When you map it into File, Zapier downloads the screenshot while the step runs and uploads it to Slack, so the image stays in the channel for good. A plain link in the message would stop working an hour later.

Turn the Zap on. The next time the page changes past your threshold, the channel gets the new screenshot within seconds of the capture.

Variations

Email instead of Slack. Use Gmail: Send Email as the action and map Screenshot Download Link into Attachments. (SnapRender can also send a change email by itself: tick the email alert option on the schedule. The Zap version is for when you want a custom message, other recipients or a different app.)

A log of every change. Add the change to a Google Sheet or Airtable base (a third step, so a paid Zapier plan) with Captured At, Changed Area (%) and Screenshot SHA-256. The SHA-256 lets you show later that a stored screenshot has not been altered.

Every capture, changed or not. Use the New Scheduled Capture trigger instead. It fires after every scheduled capture, which is useful for archiving a page to Google Drive every day. Turn on Include failed captures if you also want to hear when the page was down.

Several pages. Add more schedules in SnapRender and leave Schedule empty in the trigger: one Zap covers them all, and Page URL tells you which page changed.

Limits worth knowing

  • Each Zap that uses a SnapRender trigger creates its own webhook, and an account holds 5 webhooks. So one account runs up to 5 trigger Zaps at once. Since one Zap can watch every schedule, that is rarely a constraint.
  • Each scheduled capture uses one capture from your monthly allowance: a daily schedule about 30 a month, an hourly one about 720. The free plan includes 200 captures a month; paid plans start at $9 for 2,000. Failed captures are not counted.
  • SnapRender captures public pages. Pages behind a login, or on a private network, are out of reach. If your own site shows a security check instead of the page, one firewall rule fixes it: allow SnapRender on your site.

Why not just check the HTML?

You can detect changes by fetching a page's HTML and diffing it, and for some pages that works. The trouble is that HTML changes all the time without anything visible changing (tracking scripts, build hashes, session tokens), and visible changes sometimes come from CSS or images the HTML diff never sees. Comparing what the page looks like avoids both problems, and the screenshot doubles as a record of what the page said.

The setup page, with seven more Zap recipes and every trigger and action explained, is here: SnapRender for Zapier.

Top comments (0)