> For the complete documentation index, see [llms.txt](https://bubble.digital-bird.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bubble.digital-bird.com/plugins/screenshot-element-pro.md).

# Advanced Screenshot Element 🖼

Capture a screenshot of a single element, visible part of the page or the entire page

## 🔗 Links

> [Demo](https://digitaleyedemo.bubbleapps.io/screenshotelementpro) | [Editor](https://bubble.io/page?name=screenshotelementpro\&id=digitaleyedemo\&tab=tabs-1)

> [Plugin page](https://bubble.io/plugin/screenshot-element-pro-1611438394170x673066697274163200)

> [Forum](https://forum.bubble.io/t/new-plugin-screenshot-element-pro/136632)

## ℹ️ Introduction

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgC4gK0CwFmXyvsmUp%2F-MXgDMNUKUpPgoM5r-Ci%2Ffinal_600e0be9cf95d8008cf91a24_130641.gif?alt=media\&token=f0918273-609f-4595-b22a-1dfe401f0935)

## 🔥 Features

* Capture a screenshot of a single element by its ID
* Capture the visible visible part of the page (as currently displayed in browser)
* Full Page capture
* Save screenshot in JPG or PNG 
* Generate URL (upload to Bubble filestorage)
* Download the screenshot
* Choose image compress quality

## 📚 Documentation

### ➡️ Screenshot of the the visible part of the screen:

1\. In Workflow choose "Generate Screenshot" action. Define the Filename, File Format, choose Screenshot Type "Screen" and Output

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgC4gK0CwFmXyvsmUp%2F-MXgEovJ_iQ3CExzwfbC%2Fimage.png?alt=media\&token=a89d76d6-3439-479a-a555-a2dbb4740900)

### ➡️ **Screenshot of the entire page**

1\. In Workflow choose "Generate Screenshot" action. Define the Filename, File Format, choose Screenshot Type "Entire Page" and Output.

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgC4gK0CwFmXyvsmUp%2F-MXgExI0OvYPIGGHbgrz%2Fimage.png?alt=media\&token=07309ca0-c693-4bab-ac90-8df9d5f48db9)

### ➡️ **Screenshot of an element by ID**

1\. Settings / General / Select "Expose the option to add an ID attribute to HTML elements"

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgC4gK0CwFmXyvsmUp%2F-MXgFBNYY48_Kf_jgC0Z%2Fimage.png?alt=media\&token=5c22ac61-e1da-4182-9111-05c0394e02fc)

2\. Define ID for an element you want to save

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgC4gK0CwFmXyvsmUp%2F-MXgFDUiuVnpotV8oxfN%2Fimage.png?alt=media\&token=7af2d32c-3c1f-42da-ac30-6e289657f862)

3\. In Workflow choose "Generate Screenshot" action. Define the Filename, File Format, choose Screenshot Type, Output and Element ID

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgC4gK0CwFmXyvsmUp%2F-MXgFGjs9x1RIVZbI7xY%2Fimage.png?alt=media\&token=d356d976-11cb-4d14-8b84-ea12bd16dc2b)