> 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 🖼

## 🔗 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

![](/files/-MXgDMNUKUpPgoM5r-Ci)

## 🔥 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

![](/files/-MXgEovJ_iQ3CExzwfbC)

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

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

![](/files/-MXgExI0OvYPIGGHbgrz)

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

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

![](/files/-MXgFBNYY48_Kf_jgC0Z)

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

![](/files/-MXgFDUiuVnpotV8oxfN)

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

![](/files/-MXgFGjs9x1RIVZbI7xY)