DocsAppearance
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
json
{
"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.
paddingis the space between the element captured and its bordermarginis 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
json
{
"url": "https://convertkit.baremetrics.com/stats/arr",
"elementSelector": [
".main-graph",
".container.alternate-selector"
],
"responseType": "queue",
"margin": 10,
"backgroundColor": "purple",
"borderRadius": 25
}