jandieman/dotjuice-plugin-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs pass: add widget screenshots and expand the user guides

Browse Source 
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>
This commit is contained in:
Johan
2026-07-31 06:13:57 +00:00
parent 1d9b26b108
commit f4838865c9
43 changed files with 672 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
docs/dotjuice-elementor-tools/widgets/screenshot-capture.md
View File

@@ -1,40 +1,68 @@
# 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**.
![The Screenshot Capture widget's capture settings](../assets/img/screenshot-capture-controls.png)
*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 uses the Screenshot Machine API to capture screenshots, which requires a free or paid API key from their service. Go to **Dotjuice → Screenshot API** in your WordPress admin and enter your key — the widget won't display anything until this is done. See [Screenshot API Settings](../screenshot-api-settings.md) for full setup details.
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).
## Content settings
## 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 |
|---|---|---|
| **URL** | — | The web address to screenshot. |
| **Refresh Screenshot** button | — | Editor only. Forces a brand-new capture immediately, bypassing the cache — use this after the target page has changed. |
| **Full Page** | Off | Captures the entire scrollable page rather than just the visible viewport. |
| **Cache Limit (days)** | 0 | How many days a captured screenshot stays cached before it's automatically re-captured on a visitor's page load. `0` means it's captured once and never automatically refreshed — use the Refresh button or clear the cache manually (see below) to update it. |
| **Device** | Desktop | Desktop, Tablet, or Phone — captures at that device's typical screen dimensions. |
| **Zoom** | 100% | Zoom level applied during capture, from 50% to 200%. |
| **Click Element** | Empty | A CSS selector (or comma-separated list) to click before the screenshot is taken — useful for dismissing a cookie banner or opening a menu first. |
| **Selector** | Empty | Crop the capture to a specific element on the target page, given as a CSS selector. |
| **Delay (ms)** | 3000 | How long to wait after the page loads before capturing — increase this for pages with animations or content that loads in after the initial page load. |
| **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. |
## Display settings (Style tab)
:::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.
:::
- **Width / Height** — the maximum size of the screenshot display area.
- **Website Link** — if set, clicking the screenshot goes to this URL instead of the page that was captured.
- **Show Lightbox** — opens the screenshot in a lightbox on click (only applies if Website Link is empty). Multiple Screenshot Capture widgets on the same page with this enabled become one swipeable lightbox gallery together.
- **Scroll Speed** — for full-page captures only: how fast the image auto-scrolls to reveal the whole page (lower is faster).
- **Border**, **Box Shadow**, **CSS Filters**, and a **Transform** popover (rotate, scale, offset, opacity) are available for both the normal and hover states, exactly like Elementor's native Image widget.
## 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
On the **Dotjuice → Screenshot API** settings page, a Cache Management panel shows how many screenshots are currently cached and their total size, with a **Clear All Cached Screenshots** button to force every screenshot on your site to be re-captured on next view. Screenshots are stored in your Media Library, so clearing the cache removes them from there too.
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.
![The screenshot cache management panel](../assets/img/screenshot-capture-cache.png)
*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 uses one API call**, whether triggered by a visitor's first view of an uncached page, or the editor's Refresh button. With Cache Limit set to 0 (the default), a given screenshot is only captured once — subsequent visitors see the cached version until you manually refresh it or your Cache Limit expires it.
- **The first visitor to an uncached page waits for the live capture** to complete before the page finishes loading. If you're about to publish a page with several uncached screenshots, visit it yourself first (or use the editor's Refresh button on each one) so the cache is warm before real visitors arrive.
- The editor never triggers an automatic capture while you're designing, specifically to avoid spending API calls while you work — you'll see a placeholder instead until you click Refresh.
- Changing **Cache Limit**, **Delay**, **Click Element**, or **Selector** on an already-cached screenshot won't take effect until you use the Refresh button — these settings affect how a new capture is taken, not the one already cached.
- **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.