Integrations
Everything you need to embed your screenshots, capture from the CLI, or automate with the REST API.
How integration endpoints work
Each endpoint gives you a single URL for a captured asset — screenshot, clip, or composition. Use query parameters to select the variant you need — language, theme, viewport — and optionally resize or convert the output. The URL always serves the latest version, so your site stays up to date without code changes. Screenshots are served as WebP, clips as GIF (or MP4), and compositions adapt to their content type.
Endpoint
GET /api/v1/assets/{endpointId}Query parameters
| Parameter | Example | Default | Description |
|---|---|---|---|
| lang | fr | Latest available | Language variant (e.g. en, fr, de) |
| theme | dark | Latest available | Theme variant (light or dark) |
| target | desktop-1440x900 | Latest available | Viewport/device target ID |
| w | 800 | Original size | Resize width in pixels (max 2560, never upscales) |
| quality | 80 | 80 | WebP compression quality 1-100 (ignored for PNG) |
| format | webp | webp | Output format. Screenshots: webp (default) or png. Clips: gif (default) or mp4. Compositions: webp, png, jpg, gif, mp4, or webm. |
| scale | 2 | 1 | Resolution multiplier 0.5–4 (compositions and studio renders) |
| render | studio | — | Set to studio to render a screenshot inside its preset's Studio composition (device frame, background, decorations). Screenshots only. |
| slot | 0 | 0 | Studio slot index 0-2 (with render=studio). Selects which Studio composition variant to render. |
| info | 1 | — | Set to 1 to return JSON metadata about the asset instead of the asset itself |
| preview | 1 | — | Set to 1 to return a PNG preview image (compositions only) |
Responses
| Status | Description |
|---|---|
| 200 | Returns the asset (WebP for screenshots, GIF for clips, format depends on content for compositions) |
| 304 | Not modified — the browser already has the latest version (ETag match) |
| 400 | The endpoint ID is invalid |
| 404 | Endpoint not found, or no capture has been run yet |
| 410 | The capture has been deleted (trashed) |
| 500 | Something went wrong on our end |
| 502 | Failed to fetch the underlying asset from storage |
Caching
All assets are cached for up to 1 hour in the browser. After expiry, the browser revalidates in the background (stale-while-revalidate) so users never see a loading delay. Server-side caches are automatically purged when a new capture is taken, so new versions are available immediately on the next browser revalidation.
To force an immediate refresh in the browser, use Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows/Linux). This bypasses the local cache and fetches the latest version from the server.
Integration examples
<script src="https://autokap.app/api/v1/loader.js" defer></script>
<img data-ak-id="a1b2c3d4e5f6a1b2c3d4e5f6a1b2" data-ak-lang="en" data-ak-theme="light" alt="Screenshot" />Replace the example ID with your actual endpoint ID — you'll find it in the Integrations section of your project.
Auto loader
The AutoKap loader is a lightweight script (~1.5 KB) that automatically picks the optimal size and quality for each visitor. It detects the container width and device pixel ratio, snaps to the closest optimal width (320–2560 px), and adjusts quality based on DPR (60 for Retina, 80 for standard). Images are lazy-loaded with IntersectionObserver and re-optimized when the viewport resizes significantly (>20% change). For clips, the loader automatically converts the element to a video tag with autoplay, loop, and muted attributes. Compositions are also supported — set the data-ak-type attribute to "composition" to enable scale-aware rendering.
Data attributes
| Parameter | Description |
|---|---|
| data-ak-id | Required. The endpoint ID. |
| data-ak-type | Asset type: screenshot (default), clip, or composition. |
| data-ak-lang | Language variant (e.g. en, fr). |
| data-ak-theme | Theme variant (light or dark). |
| data-ak-target | Viewport/device target ID. |
| data-ak-scale | Scale multiplier 0.5–4 (compositions and studio renders, default: 1). |
| data-ak-format | Override the output format (webp, png, mp4, gif). Ignored for clips — always uses mp4. |
| data-ak-render | Set to studio to render the screenshot inside its preset's Studio composition (device frame, background, decorations). Screenshots only. |
| data-ak-slot | Studio slot index 0-2 (with data-ak-render=studio). Selects which Studio composition variant to render. |
For single-page apps that add images dynamically, call the refresh function after inserting new elements:
window.AutoKap.refresh();Step by step
- When you create a preset, integration endpoints are automatically generated for each page, element, and clip.
- Click Integrate to get the URL and code snippets with your preferred parameters.
- Run a capture. The endpoint now serves your new screenshot.
- That's it — your site always shows the latest version. Use query params to switch variants dynamically.
Interactive demos
Interactive demos are captured HTML snapshots with a declarative interaction script. They let users click through your product without a live backend. Integration works the same way as screenshots — dev links are auto-created for each preset.
Auto loader (recommended)
Include the loader.js script and add a div with the data-ak-demo attribute. The loader creates a sandboxed iframe that auto-resizes to fit the content. Variant parameters (lang, theme, target) are passed via data attributes.
<script src="https://your-domain.com/api/v1/loader.js" defer></script>
<div data-ak-demo="YOUR_PRESET_ID" data-ak-lang="en" data-ak-theme="light"></div>Direct iframe
For full control, embed the demo directly with an iframe. Append ?embed=1 to enable embed mode (hides chrome). Pass variant parameters as query params.
<iframe
src="https://your-domain.com/demo/YOUR_PRESET_ID?embed=1&lang=en&theme=light"
style="width: 100%; border: none; aspect-ratio: 16/9;"
allow="clipboard-write"
loading="lazy"
></iframe>Auto-resize
When using the Auto loader, the iframe automatically resizes to match the demo viewport. In direct iframe mode, set a fixed aspect-ratio (e.g. 16/9) or use JavaScript to listen for resize postMessage events from the demo.
Good to know
Auto loader (recommended)
The Auto loader is the recommended integration for most websites. Include the loader.js script (~1.5 KB) and use data-ak-id attributes on your images — the loader handles everything else. It detects each visitor's device pixel ratio, picks the optimal width from 9 predefined breakpoints, adjusts quality for Retina screens, and lazy-loads images as they enter the viewport. For single-page apps, call window.AutoKap.refresh() after dynamically adding new images. Clips are automatically converted to video elements with autoplay and loop.
WebP by default
Screenshots are served as WebP by default, which is typically 25–35% smaller than PNG at equivalent quality. The quality parameter (default 80) controls WebP compression — lower values save bandwidth, higher values preserve detail. Use format=png when you need compatibility with older systems like email clients (Outlook, Gmail) that may not support WebP. Clips default to GIF format, but you can request MP4 for smaller file sizes. Compositions adapt their default format to their content type.
Responsive images
Use the srcset attribute with multiple widths (w=400, w=800, w=1200) to let the browser download only the size it needs for the current screen. Combined with the sizes attribute, the browser selects the best match — a mobile visitor downloads a 400px image instead of the full 1200px version. Common breakpoints: 400px for mobile, 800px for tablets, 1200px for desktop. See the srcset tab above for a copy-paste example.
OpenGraph previews
The endpoint serves images directly (no redirect), so OpenGraph and Twitter Card crawlers can fetch them reliably. For OG images, use a fixed width like w=1200 since crawlers don't negotiate responsive sizes. Add the og:image:width meta tag (1200) for best results. See the OpenGraph tab above for the complete meta tag set.
Cache busting
Assets are cached for up to 1 hour in the browser with a 24-hour stale-while-revalidate window, meaning users never see a loading delay even after cache expiry. Server-side and CDN caches are purged instantly when a new capture is taken, so the latest version is available immediately on the next browser revalidation. To force an immediate update in the browser, use a hard-refresh (Cmd+Shift+R / Ctrl+Shift+R) or append a cache-busting parameter like ?v=timestamp to the URL.