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.
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.
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.
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
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>
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.
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 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">
We also provide packages for a convenient use in your favorite language/framework.
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