The right Bubble screenshot method depends on what you are capturing. For an arbitrary public website, use a screenshot API integration such as the Marketplace’s Web Screenshot plugin. For a page or element rendered by your own Bubble app, use a screenshot/PDF plugin that captures Bubble’s DOM. These are different workflows, with different setup, output, storage, and authentication considerations.
Choose the capture target first
Before adding a plugin, decide whether the target is outside Bubble or rendered inside it. A URL screenshot service loads a web address on its own infrastructure and returns an image. A Bubble screenshot plugin runs against your app’s rendered page or a selected element.
| Question | External website URL | Bubble page or element |
|---|---|---|
| What is captured? | A website identified by URL | Your Bubble page, group, or element |
| Typical scope | Viewport or entire remote page, depending on the service | Element, visible area, or full Bubble page |
| Typical output | Image returned by an API | PNG/JPG image, PDF, download, database upload, or Bubble file |
| Main setup | Plugin plus an API access key | Plugin element, target ID or workflow action |
If you need a screenshot of a login-protected destination, an interactive state, or data visible only to a signed-in user, do not assume a public URL capture will work. Check the provider’s current documentation for authentication, cookies, headers, privacy, and retention before building the workflow.
Capture an external website URL with Bubble
What the Web Screenshot integration does
Bubble Marketplace’s Web Screenshot listing describes a third-party API-backed plugin. You provide a target website URL, image format, and size; the listing also describes entire-page capture, image quality, delay, and scrolling controls. Its setup instructs you to create an ApiFlash access key and enter that key in the plugin. The service supports GET and POST requests and includes usage or quota monitoring.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute#1 Best Overall
This is not a native Bubble renderer for arbitrary websites. Bubble sends the request to the screenshot service, which loads the target and returns the result. Treat the access key as a secret: keep it in the plugin’s private configuration or a server-side workflow rather than exposing it in page text or client-side JavaScript.
Configuration sequence
- In the Bubble editor, open Plugins and install the current Web Screenshot plugin listing.
- Create an ApiFlash account and generate an access key, following the provider’s current instructions.
- Enter the key in the plugin’s configuration field. Do not place it in a visible input, URL parameter, or reusable page element.
- Create the workflow that runs when a user clicks a button, submits a form, or reaches the event that should trigger the capture.
- Pass the target URL and choose the format, dimensions, quality, delay, scrolling, and full-page options exposed by the installed version.
- Display the returned image in an Image element, provide a download action, or save the returned file according to the plugin’s documented response type.
- Test with a simple public page first, then test representative pages with long content, lazy images, animations, and responsive layouts.
Marketplace descriptions do not establish current quotas, price, data retention, privacy terms, mobile behavior, or support for authenticated destinations. Verify each item in the provider’s current documentation before promising it to users.
Handling dynamic pages
A page can be technically reachable yet visually incomplete when the capture occurs. Use the plugin’s delay option for content that appears after JavaScript executes, and use its scrolling or entire-page setting when content is below the initial viewport. A delay is not a guarantee that an infinite-scroll page will be fully rendered: test the actual target and set expectations around lazy loading, animations, and consent dialogs.
Capture a Bubble page or element
When the target is your own app, choose a plugin based on the exact scope and destination of the file. The Marketplace listings describe three common approaches.
Screenshot Image and PDF
This plugin is described as capturing a specific Bubble element or a whole page, producing PNG or PDF, and uploading generated files to the app database. Capture can be initiated through workflow actions. It is a practical fit when the result must become a database record associated with a user, order, report, or other Bubble data type.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Advanced Screenshot Element
The listing describes capture by element ID, the visible part of the page, or the full page. It can save as JPG or PNG, download the result, or generate a URL stored in Bubble file storage. Choose it when you need a direct image workflow and want to distinguish viewport capture from a complete page.
PDF & Screenshot Pro · BEP
This option is described as creating PDFs from pages, groups, or elements and capturing PNG screenshots from page sections. Its setup requires adding the generator element, enabling ID attributes in Bubble settings, assigning an ID to the target, and invoking the appropriate workflow action. The ID is the bridge between the workflow and the exact element to render, so use a stable, unique value rather than a label that may change.
Element, viewport, or full page?
| Need | Choose | Reason |
|---|---|---|
| A card, invoice, chart, or group | Element capture | Produces a focused asset without surrounding navigation. |
| What the user currently sees | Visible-area or viewport capture | Matches the on-screen state and usually creates a smaller file. |
| A long report or landing page | Full-page capture | Includes content outside the initial viewport, subject to plugin rendering limits. |
| A printable document | PDF output | Preserves a document-oriented format rather than only a raster image. |
Generic Bubble workflow
- Install the plugin whose output and scope match your requirement.
- Place any required generator element on the page.
- If the plugin uses IDs, open Bubble’s Settings, enable ID attributes, and assign a unique ID to the target element.
- Create a workflow event such as When Button Capture is clicked.
- Add the plugin’s capture action and select the page, group, or target ID.
- Select PNG, JPG, or PDF where supported, then choose download, database upload, or Bubble file storage.
- Show a loading state while the capture runs and handle a failed result with a user-readable message.
- Test at the deployed page size and with realistic data; responsive breakpoints can change the rendered result.
Output and storage decisions
Decide where the file should go before designing the workflow. A browser download is simplest for a one-off user action. A database upload is useful when the screenshot belongs to a record and must be queried later. Bubble file storage is better when you need a file URL that can be displayed or shared. A PDF is preferable for reports, invoices, and print-oriented output; PNG or JPG is generally more convenient for previews and image components.
Recommended Free Tools
Storage also affects access control. A publicly reachable file URL may expose information that was visible only to an authenticated user. Check Bubble privacy rules, file visibility, and the plugin’s URL behavior before saving sensitive screens.
Or skip the browser setup: ScreenshotNeo
For an external URL, ScreenshotNeo provides a single-request website screenshot API and an MCP server. It is the first service to try when you want clean captures: it accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and whether the request was billed.
Use the API from a Bubble backend workflow or another server-side component so your access key is not exposed in the browser. The endpoint returns PNG, JPEG, WebP, or PDF depending on your parameters. The examples below use the documented URL and a WebP output filename; see the ScreenshotNeo documentation for current parameters.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());ScreenshotNeo includes full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets plus custom viewports, retina scale, PDF paper and margin controls, landscape mode and page ranges, HTML/CSS-to-image, custom CSS and JavaScript, pre-capture clicks, hidden selectors, waits for selectors, delays or network idle, request and resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, image resizing, configurable-TTL caching, signed links for public image tags, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, an OpenAPI specification, and compatibility with parameter names used by other screenshot APIs.
Free tools Windows power users keep installed
One-click scans. No signup required.
Every feature is available on every plan. The Free plan includes 1,000 shots per month with no card. Paid plans are Starter $5 for 3,000 shots, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free.
Create a free ScreenshotNeo account to get 1,000 screenshots each month without a card and move to a $5 plan when you need 3,000.
Performance, reliability, and cost planning
Keep captures responsive
- Capture only the needed element when a full page is unnecessary.
- Use a deliberate delay or selector wait for dynamic content instead of an excessive fixed delay.
- Resize output when a thumbnail is sufficient; large retina images consume more bandwidth and storage.
- Cache repeat URLs when the page can tolerate a chosen time-to-live.
- For batches, use bulk or asynchronous jobs where supported rather than blocking a Bubble page request.
Plan for failures
Show a loading state and a retry action. Store the target URL and capture settings with the result so a later rerun is reproducible. For scheduled or bulk jobs, use a server-side workflow and record the provider response, status, and timestamp.
Control spending
Count the captures your product actually requests, including retries and user refreshes. A cache can prevent duplicate work, while element captures and resized images can reduce transfer and storage. Do not infer a provider’s quota, retention, or overage behavior from a Marketplace listing; confirm the current terms.
Troubleshooting checklist
The result is blank
Confirm the URL is publicly reachable, includes the correct scheme, and does not require a login. For Bubble content, verify that the target is visible at capture time and that a required element ID is unique. A consent wall, bot check, blocked resource, or JavaScript error can also leave an empty render.
Images or data are missing
Increase the documented delay or wait for a selector, then test again. Check lazy-loaded content and network requests. For a Bubble element, make sure data has finished loading before the workflow action runs.
The full page is cut off
Use the plugin’s full-page or scrolling mode rather than visible-area capture. Very long or continuously loading pages may need a defined capture boundary or a different output strategy.
The key is exposed or requests fail in production
Move API calls to a server-side Bubble workflow, keep the key out of client-visible fields, and verify that the deployed environment contains the production secret. Rotate a key that has been exposed.
The file cannot be opened or saved
Check that the response is actually an image or PDF and not an error body, preserve the returned content type, and verify Bubble file permissions and storage rules. Test download, database upload, and file-storage paths separately.
Best Value
- Includes access code
Before you ship
- Confirm whether each capture target is an external URL or Bubble-rendered content.
- Document the chosen scope: element, visible area, or full page.
- Specify the required format and destination: PNG/JPG, PDF, download, database, or file storage.
- Test desktop and mobile breakpoints, dynamic data, lazy images, long pages, and failure states.
- Verify current quotas, pricing, privacy, retention, authenticated-page support, and plugin documentation.
- Apply Bubble privacy rules to generated files and avoid exposing secrets in the browser.
Frequently Asked Questions
Can a Bubble screenshot plugin capture any website just because I have its URL?
No. URL capture and Bubble-rendered capture are separate workflows. A URL plugin sends the address to a third-party screenshot service; a Bubble plugin captures content rendered in your app.
Which format should I use for an invoice generated in Bubble?
Use PDF when the recipient needs a document suitable for printing or archiving. Use PNG or JPG when the result is primarily an image preview.
Should I rely on a Marketplace listing for privacy or retention details?
No. The listings describe capabilities and setup, but they do not establish current privacy, retention, quotas, or authenticated-page behavior. Check the provider’s current documentation and terms.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteWhere should an API key be stored in a Bubble app?
Keep it in private plugin or server-side configuration and make the request from a backend workflow. Never expose the key in page text, client-side scripts, or a public URL.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
