Docs

Introduction

websnap is a service that allows you to take screenshots from a html source and instantly serve them as an image or save it for later use. This can be extremely useful for generating dynamic og:images for social sharing. Just think of creating images for product detail pages or blog posts.

Getting started

To use websnap you'll need to register and create a project.

We will create a unique token for each project which can be restricted to certain target hosts.

Our free plan offers you 250 generated images / month — enough to try out the service or experiment on hobby-projects. Please refer to our pricing section for details.

API

The api base url is https://img.websnap.app and can be called with a GET or POST request. It will return an image response and therefore can be used as an <img> source.

An example request could call this url:
https://img.websnap.app?url=https://www.google.com

You can also use one of our language/framework agnostic packages which provide a client wrapper for api interactions.

Parameters

Remember that you should either provide the url or the html parameter.

Name Type Default Description
url* String The websites url of which a screenshot should be made
html* String The html source code of which a screenshot should be made
token* String The project's token
viewport_width Integer 800 The viewport width which is used to take the screenshot
viewport_height Integer 600 The viewport height which is used to take the screenshot
hidden String Pass a css selector to hide matching elements from the screenshot. Eg.: hidden=.cookie-banner
wait Integer 0 Defer the screenshot by the passed amount of milliseconds after the page is loaded.

* Required parameter

Hide elements

You want to hide this ugly cookie banner from your good looking og:image template? No problem, we got you covered!

Just add the websnap-hidden attribute to any element you would like to hide from the image.

<div class="cookie-banner" websnap-hidden>...</div>

You can't change your html markup?

The API also accepts a css selector as a query string parameter. Where any matching element will be hidden on the resulting screenshot. Learn more about the hidden parameter.

Using og:images

Open Graph images can be used to make your links look better and even increase the click conversion when somebody shares your page on Twitter, Facebook or many other platforms/devices.

To get started with og images you need some basic tags that resemble meta tags of your page.

<meta property="og:title" content="Your title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://img.websnap.app?url=YOUR_URL&viewport_width=1200&viewport_height=630&token=YOUR_TOKEN">
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:url" content="YOUR_URL">

Twitter

Twitter needs a few more tags that enable a larger preview image:

<meta name="twitter:title" content="Your title">
<meta name="twitter:description" content="Your description">
<meta property="twitter:image" content="https://img.websnap.app?url=YOUR_URL&viewport_width=1200&viewport_height=630&token=YOUR_TOKEN">
<meta name="twitter:card" content="summary_large_image">

Packages

We also provide packages for a convenient use in your favorite language/framework.

PHP

Feedback & Feature requests

Do you need a specific feature or have some feedback for us?
Please don't hesitate and get in touch with us!
support@websnap.app