Guide to Embed URLs: Dynamically display scheduled screenshot images in websites and web apps with a single URL

Learn how you can use an Embed URL to always display or share the last taken screenshot image in your website or a web application.

Introduction

With PagePixels, you can schedule automatic screenshots of online content and display the latest screenshot image using our Embed URL feature.

A PagePixels Embed URL is a single, unchanging link that always displays the most up-to-date screenshot associated with your configuration as an image.

Why use PagePixels Embed URLs? When you can dynamically display the latest screenshot anywhere, you can:

  • Embed web data in your BI tool or dashboard when no direct integration or API exists, such as a PowerBI dashboard.
  • Add a live-updating screenshot of online content to your website using only an img tag. No iframe or API key is required to display the image. See below for an example.
  • Easily display a dynamic image in a web application, such as Google Sheets.
  • Share a read-only, up-to-date view of online information.
  • Capture and show your users the most recent screenshot of their own content in your company's app (gallery view, history of edits, etc).
  • And more. Wondering if Embed URLs are a good fit for your requirements? Contact us.

Embed URL functionality is available in the PagePixels web app, Screenshot API, Zapier, and Make.

To get started, create your FREE PagePixels account today.

How an Embed URL works

Anytime you create a scheduled screenshot, PagePixels automatically generates an Embed URL for that configuration.

The structure of an Embed URL is always the same:

https://pagepixels.com/app/screenshots/ screenshot_configuration_id /embed

When you visit an Embed URL, it fetches the last captured screenshot for the configuration and delivers the image over our fast, worldwide CDN.

You can revisit an Embed URL at any time, and it will always redirect to the latest screenshot image file.

The type of image file it redirects to will depend on your screenshot setting (jpg, png, or webp). For example: https://cdn.pagepixels.com/screenshot_configuration_id/screenshot_image_id.jpg

If a new screenshot is processing, it will show the last available image until the new screenshot is captured and delivered.

Need help with your Embed Screenshot use case? Contact us.

How to get an Embed URL

After you've set up a scheduled screenshot in the PagePixels web app, you can copy your Embed URL from any of the following locations:

Clipboard icon

Go to your gallery > Find your screenshot configuration > Click the Clipboard icon

Settings menu

Go to your gallery > Find your screenshot configuration > Click Settings (gear icon) > Select Embed URL

Edit Screenshot

Go to your gallery > Find your screenshot configuration > Click Edit (pen icon) > Look for Embed URL on the right-side > Click Copy

Embed Screenshot Examples

Below are examples to help demonstrate how you can use Embed URL functionality.

How to take and automatically embed the latest screenshot in your web page

To display the latest screenshot in your website, you can use a HTML img tag and set the Embed URL as the value of the src attribute.

To demonstrate, we'll create a screenshot configuration that captures a random XKCD comic element every 15 minutes and displays the latest screenshot in CodePen.

1

Create a screenshot

Log in to your PagePixels account, and click the "+Create Screenshot" button.

2

Set your schedule

By default, recurring screenshots are taken every 5 minutes.

To take a screenshot every 15 minutes, change the "5" to "15" in the input field.

3

Add the website URL

Copy and paste the web page URL you want to screenshot into the Website URL to Capture field.

For example: https://c.xkcd.com/random/comic/

4

(Optional) Configure your screenshot

Use over 20 different settings in PagePixels to get your screenshot to look just right.

For example, using the CSS Selector field, you can capture just the comic element on the XKCD page with the following selector: #comic

5

Save Screenshot

Click the green Save Screenshot button (top-right).

6

Copy Embed URL

Click the clipboard icon to copy your configuration's Embed URL.

7

Use an Embed URL in your website

Add an img HTML element and paste the Embed URL as the value of the src attribute.

<img class="screenshot-embed" src="https://pagepixels.com/app/screenshots/b85d81bb-ac57-453e-b6ac-1dc8e060ef33/embed">

Add styles and other attributes as you normally would to your img tag.

Your screenshot automation is now set to run every 15 minutes and your image element will automatically display the last captured screenshot image.

Example:

How to embed auto-updating screenshot images in a web application

You can use an Embed URL in any web application that supports dynamic image links. How to accomplish this will vary depending on the application.

Here are some examples:

Have questions about how to use an Embed URL in a specific web application? Contact us.

Support

Need help with your Embed Screenshot use case?

Contact us through the support page or send an email to:

support-tickets@pagepixels.com