Page Modifications

Modify the page before capturing: inject custom JavaScript or CSS, click elements, hide or remove content.

Full Configuration

{
  "page": {
    "scripts": [
      "document.querySelector('.popup').remove()",
      { "url": "https://example.com/script.js" }
    ],
    "styles": [
      ".ad-banner { display: none !important }",
      { "url": "https://example.com/style.css" }
    ],
    "click": ".accept-cookies",
    "click_required": false,
    "hide": [".popup", ".banner", "#cookie-notice"],
    "remove": [".sidebar", ".footer"],
    "shadow_dom": false
  }
}

Parameters

Parameter	Type	Default	Description
`scripts`	array	—	JavaScript to inject (string or `{url}` object)
`styles`	array	—	CSS to inject (string or `{url}` object)
`click`	string	—	Selector to click before capture
`click_required`	boolean	`false`	Fail if click selector not found
`hide`	array	—	Selectors to hide (`visibility: hidden`)
`remove`	array	—	Selectors to remove (`display: none`)
`shadow_dom`	boolean	`false`	Pierce shadow DOM for selectors

Inject JavaScript

Run custom JavaScript before capture:

Inline Script

{
  "page": {
    "scripts": [
      "document.querySelector('.modal').remove()",
      "document.body.classList.add('screenshot-mode')"
    ]
  }
}

External Script

{
  "page": {
    "scripts": [
      { "url": "https://example.com/prepare-screenshot.js" }
    ]
  }
}

Combined

{
  "page": {
    "scripts": [
      { "url": "https://cdn.example.com/lib.js" },
      "window.prepareForScreenshot()"
    ]
  }
}

Inject CSS

Add custom styles before capture:

Inline Styles

{
  "page": {
    "styles": [
      ".ad-banner { display: none !important }",
      "body { background: white !important }"
    ]
  }
}

External Stylesheet

{
  "page": {
    "styles": [
      { "url": "https://example.com/screenshot-styles.css" }
    ]
  }
}

Click Elements

Click an element before capture (e.g., accept cookies, expand content):

{
  "page": {
    "click": ".accept-cookies-button"
  }
}

To fail if the element isn't found:

{
  "page": {
    "click": ".expand-all",
    "click_required": true
  }
}

Hide Elements

Hide elements while preserving layout (visibility: hidden):

{
  "page": {
    "hide": [
      ".chat-widget",
      ".notification-popup",
      "#cookie-banner"
    ]
  }
}

Hidden elements still take up space but are invisible.

Remove Elements

Remove elements completely (display: none):

{
  "page": {
    "remove": [
      ".sidebar",
      ".footer",
      ".ads"
    ]
  }
}

Removed elements don't take up any space.

Hide vs Remove

Method	CSS	Layout Impact	Use Case
`hide`	`visibility: hidden`	Preserves space	Hide without shifting content
`remove`	`display: none`	Collapses space	Remove completely

Shadow DOM

Enable shadow DOM piercing for web components:

{
  "page": {
    "shadow_dom": true,
    "hide": ["my-component::shadow .internal-popup"]
  }
}

Common Patterns

{
  "url": "https://example.com",
  "page": {
    "click": "[data-consent='accept']"
  },
  "wait": {
    "delay": 500
  }
}

Clean Screenshot Mode

{
  "url": "https://example.com",
  "page": {
    "remove": [".header", ".footer", ".sidebar"],
    "styles": ["body { padding: 20px }"]
  }
}

Expand All Content

{
  "url": "https://example.com/faq",
  "page": {
    "scripts": [
      "document.querySelectorAll('.accordion-toggle').forEach(el => el.click())"
    ]
  },
  "wait": {
    "delay": 500
  }
}

Dark Mode Override

{
  "url": "https://example.com",
  "page": {
    "styles": [
      "body { background: #1a1a1a !important; color: #fff !important }"
    ]
  }
}

Examples

Clean Blog Screenshot

curl -X POST https://api.renderscreenshot.com/v1/screenshot \
  -H "Authorization: Bearer rs_live_xxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://blog.example.com/article",
    "page": {
      "remove": [".header", ".footer", ".comments", ".share-buttons"],
      "hide": [".sidebar-ads"],
      "styles": [".article { max-width: 100% !important }"]
    }
  }' \
  --output clean-article.png

Dashboard with Data Prep

curl -X POST https://api.renderscreenshot.com/v1/screenshot \
  -H "Authorization: Bearer rs_live_xxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://dashboard.example.com",
    "page": {
      "scripts": [
        "window.setDateRange(\"2024-01-01\", \"2024-01-31\")",
        "window.refreshCharts()"
      ]
    },
    "wait": {
      "delay": 2000
    }
  }' \
  --output dashboard.png