Style Image

Whenever you want to use any of your screenshots in public, you often want them to adhere to a consistent style that is in line with your brand guidelines. You might also just be in need of some space (margin) to leave room for your annotations, etc.

The bare minimum required to style a screenshot

POST /screenshot

{
  "url": "https://convertkit.baremetrics.com/stats/arr",
  "elementSelector": [
    ".main-graph",
    ".an_alternate_selector"
  ],
  "margin": "10"
}

margin is just one of many style attributes.

List of supported attributes

Option	Default value (if not specified)	description
margin	0	Add space between the content and the border
padding	0	Add space between outside of the border
backgroundStyle	solid	Possible values: solid or gradient
backgroundColor	#ffffff	Add Background color
backgroundColor2	#ffffff	Specify only when backgroundStyle is gradient
borderRadius	0	Add border radius
shadow	false	Enable/Disable Shadow
shadowColor	#0f172a5e	Add Shadow color
shadowBlur	0	Add Shadow blue
shadowOffsetX	0	Add Shadow offset X
shadowOffsetY	0	Add Shadow offset Y

Understanding the margin and padding properties

The margin and padding are two important concepts to control the spacing around your screenshot. They have the same behaviour as in CSS.

• padding is the space between the element captured and its border
• margin is the space is outside of the border.

Here's a visual representation of both margin and padding when applied to a screenshot.

Usage

Below is a series of examples demonstrating various properties of the screenshot API endpoint.

Example 1: Screenshot with a purple background around the image

{
  "url": "https://convertkit.baremetrics.com/stats/arr",
  "elementSelector": [
    ".main-graph",
    ".container.alternate-selector"
  ],
  "responseType": "queue",
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25
}