Screenshotlayer is a lightweight REST API built to deliver high-quality PNG, JPEG & GIF visual website snapshots through a simple and easy-to-use interface. We’re going to make use of that API to create a really powerful website snapshot app.

Website snapshots, in Delphi, using the Screenshotlayer API

The Screenshotlayer API is easy to integrate and works without requiring a queue. With the Screenshotlayer API, you can create a reliable web snapshot automation service. You can capture daily, weekly or monthly, and create an archive if you need.

In this post, we will use the Delphi FireMonkey Low-Code Wizard to integrate Screenshotlayer API into a cross-platform desktop and mobile application with Windows Apps Studio.

What is the Screenshotlayer API?

The Screenshotlayer API is a world-class RESTful web service to capture highly customizable snapshots of any website in seconds. Just give the website URL, and the web service returns you a screenshot of the website.

It offers advanced options, for instance:

• Set preferred thumbnail dimensions and viewport
• Inject your CSS
• Specify a capturing delay
• Export to AWS S3, FTP 
• and more

How to use Screenshotlayer API?

Capturing a snapshot using the Screenshotlayer API is simple. Each API request is based on the following URL and can be configured with different parameters.

To make a simple request, you should pass the API access key and URL of the website that you want to take a screenshot of. Moreover, based on how you wish to configure your screenshot, you can choose from several optional parameters:

• fullpage – take a full height of the target website
• width – specify your preferred thumbnail width in pixels
• viewport – specify your preferred viewport dimensions in pixels
• format – screenshot output format
• secret_key – your secret key, an MD5 hash of the target & secret word (optional)
• delay – specify a delay before a screenshot is captured (in seconds)
• export – export snapshot via custom FTP path or using your AWS S3 user details

Let’s see an example of a request

Depending on your subscription plan, you can have more secure data streams and features or limits. For instance, higher-level subscription plan users can establish a secure connection. You can have maximum API performance, and the request limit is higher.

URL Encryption – If you need a more secure connection, you can utilize the secret key for every API request. First, you need to specify the secret key on the dashboard. My secret key, of course, is the word “delphi”.

Then we need to combine the URL and secret keyword into one string and create an MD5 hash out of the string. After that, you can give that value in the query.

The Screenshotlayer API Features

By default, screenshots are rendered based on the height of the selected viewport. You can alternatively request the full height of the target website with the parameters that we talked about above.

CSS Injection – The Screenshotlayer API enables you to inject a custom CSS stylesheet into the target website by appending an existing CSS file URL to the API’s css_url parameter.

TTL (Caching Time) – By default, website snapshots are cached for 30 days. Using the ttl parameter, you can specify a custom caching time lower than the default setting.

Furthermore, you can have a fresh screenshot of the target website by using the force parameter, which refreshes the target website.

How to export website snapshots to AWS S3 or FTP?

Based on your subscription level, you can save your snapshots to an AWS S3 bucket or an FTP server to which you have access. The configuration can be done like this:

How to build a website snapshot app which runs on Windows, macOS, Android, and iOS and works with the Screenshotlayer API?

We have explored the fantastic capabilities of the FireMonkey App Low Code Wizard before on this blog. It’s an outstanding tool to turn a great idea into a fully-working cross-platform app with little or no code. In this demonstration will use the Low Code Wizard to make our cross-platform application with Delphi.

With the FireMonkey App Low Code Wizard you can create a fully functional Delphi cross-platform application with multiple screens. Even better, unlike some other “low code” development platforms, you can do as much modification and customization with your code, and it’s easy to use too.

How do I start Delphi FireMonkey Low Code development?

Open your Delphi IDE and go to Tools->GetIt Package Manager and search for “low code”! There you can install Low Code Wizard for FireMonkey. You can also learn more in depth-information about this great addition to the power of Delphi here: https://getitnow.embarcadero.com/firemonkey-app-low-code-wizard/

After installation, you can open File->New->Other and select Multi-Device->FireMonkey Template App. It shows you a wizard and you can select which type of screens you need.

How do I connect REST endpoint with Delphi?

RAD Studio’s toolset is generous and gives you dozens of different tools and components to make your development time productive.

Since this API is just a simple response that gives the only image, we will use one of the Internet Direct components. From the component palette, drop a TIdHTTP component and create the OnClick event on the Request button. For more complicated REST interactions it can be faster (and requires less code) to use the RAD Studio REST Debugger.

Here is our code that creates a required query and loads the image response to the memory stream. Then shows it to a user and saves it to a physical file.

Here is the result of calling the Screenshotlayer API

As you can see, it only takes a few short minutes to get a real, fully functional application with Delphi and the FireMonkey FMX Low Code Wizard.

Be sure to check out the full source code for this project: https://github.com/checkdigits/Capture_Web_Snapshots_Delphi_example

---

RAD Studio Delphi can make difficult tasks easier and with minimal code and effort from you. Why not download a trial copy today and see how fast you can turn your ideas into applications your users will love?