f4838865c9
Add 21 screenshots across the Elementor Tools docs and rework the pages around them: clearer opening lines, settings tables that state defaults, and callouts for the parts people trip over. Also refreshes the Pro getting-started, Custom Product Tabs and Product Filter pages, plus the matching marketing copy. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
69 lines
4.9 KiB
Markdown
Executable File
69 lines
4.9 KiB
Markdown
Executable File
# Screenshot Capture
|
||
|
||
Live screenshots of any website, captured through the Screenshot Machine API and cached in your Media Library.
|
||
|
||
Found in the Elementor panel under **Dotjuice → Screenshot Capture**.
|
||
|
||
|
||
*Screenshot: the widget selected in the editor showing the **Capture settings** section — URL field, Refresh button, Full Page toggle, Device, Zoom and Delay controls.*
|
||
|
||
## Before you start: set up your API key
|
||
|
||
This widget calls the Screenshot Machine API, which needs an API key. Go to **Dotjuice → Integrations** in your WordPress admin and enter your key on the Screenshot API tab. **The widget renders nothing until this is done.** Full instructions are in [Screenshot API Settings](../screenshot-api-settings.md).
|
||
|
||
## How it works
|
||
|
||
When a visitor loads a page containing an uncached screenshot, the plugin requests a capture from the API, saves the resulting image into your Media Library, and serves it from there afterwards. Later visitors get the stored image with no API call at all.
|
||
|
||
This means two things worth planning around:
|
||
|
||
- **Captures cost API calls.** Your key has a quota; each fresh capture spends one.
|
||
- **The first visitor to an uncached screenshot waits for it.** The capture happens during their page load.
|
||
|
||
The editor deliberately never triggers an automatic capture while you design — it shows a placeholder instead, so building a page doesn't burn through your quota. Use the **Refresh Screenshot** button when you actually want an image.
|
||
|
||
## Capture settings
|
||
|
||
| Setting | Default | What it does |
|
||
|---|---|---|
|
||
| **Website URL** | — | The address to capture. |
|
||
| **Refresh Screenshot** | — | Editor only. Forces a fresh capture immediately, bypassing the cache. Use after the target page changes. |
|
||
| **Full Page Screenshot** | Off | Captures the whole scrollable page rather than just the visible viewport. |
|
||
| **Cache Limit** | 0 | Days a capture stays cached before being retaken automatically. `0` means capture once and never auto-refresh — you refresh manually. |
|
||
| **Device Type** | Desktop | Desktop, Tablet or Phone. Captures at that device's typical dimensions. |
|
||
| **Zoom (%)** | 100 | Zoom applied during capture, 50–200%. |
|
||
| **Click Element (CSS Selector)** | Empty | A selector (or comma-separated list) clicked before capturing — for dismissing a cookie banner or opening a menu first. |
|
||
| **Selector (CSS)** | Empty | Crop the capture to one element on the target page instead of the whole viewport. |
|
||
| **Delay (ms)** | 3000 | How long to wait after load before capturing. Increase for pages with animations or late-loading content. |
|
||
|
||
:::tip Getting a clean capture of a site with a cookie banner
|
||
Put the banner's accept-button selector into **Click Element**, and raise **Delay** enough for the banner's dismiss animation to finish. A 3000ms delay with no click usually still catches the banner mid-page.
|
||
:::
|
||
|
||
## Display settings
|
||
|
||
| Setting | What it does |
|
||
|---|---|
|
||
| **Width / Height** | Maximum display size of the screenshot area. |
|
||
| **Link** | If set, clicking the screenshot goes here instead of the captured page. |
|
||
| **Display image in lightbox** | Opens the image in a lightbox on click. Only applies when **Link** is empty. Several Screenshot Capture widgets on one page with this on become a single swipeable gallery. |
|
||
| **Scroll Speed** | Full-page captures only. Seconds to scroll one screen height on hover — lower is faster. |
|
||
|
||
**Border**, **Box Shadow**, **CSS Filters** and a **Transform** popover (rotate, scale, offset X/Y, opacity) are all available for both Normal and Hover states, matching Elementor's native Image widget.
|
||
|
||
## Managing your screenshot cache
|
||
|
||
The **Dotjuice → Integrations** page has a Cache Management panel showing how many screenshots are cached and their total size, with a button to clear them all and force every screenshot on the site to re-capture on next view.
|
||
|
||
|
||
*Screenshot: the Cache Management panel on the Integrations page, showing the cached count, total size and the clear button.*
|
||
|
||
Screenshots live in your Media Library, so clearing the cache deletes those attachments too.
|
||
|
||
## Good to know
|
||
|
||
- **Every capture costs one API call** — whether triggered by a visitor hitting an uncached page or by the editor's Refresh button. With Cache Limit at 0, each screenshot is captured once and then reused indefinitely.
|
||
- **Warm the cache before launch.** If you're publishing a page with several uncached screenshots, visit it yourself first, or hit Refresh on each widget in the editor, so real visitors don't absorb the capture wait.
|
||
- **Changing Cache Limit, Delay, Click Element or Selector does nothing to an already-cached image.** Those settings describe how a *new* capture is taken. Hit Refresh to apply them.
|
||
- If a screenshot never appears, check the API key first — an unset or exhausted key is by far the most common cause.
|