> 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.md).

# Screenshot Element 🖼

Easy to use Plugin to save an Element to PNG by its ID. 📸

## 🔗 Links

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

> [Plugin page](https://bubble.io/plugin/screenshot-element-1611427174263x940872047117205500)

## ℹ️ Introduction

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgFU5NdCEyDE0hgABl%2F-MXgG7LUAyrlsTgTdn_r%2Ffinal_600dfbcd3f9eb200e76aa337_475854.gif?alt=media\&token=b33f2143-fe30-4f64-adb3-9b0ebd720efe)

## 📚 Documentation

1\. Go to Application 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-MXgGCnVVaTsrqwIwFCg%2F-MXgGMcUY_mT1OpnX6e6%2Fimage.png?alt=media\&token=bf4f1caa-2c7a-4eae-b5bf-8644848c9e11)

\
2\. Define an ID for the element you want to save as Image (ID Attribute field)

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgGCnVVaTsrqwIwFCg%2F-MXgGQ5sBiZZ9vLDoiqv%2Fimage.png?alt=media\&token=8c279402-5f99-4e7f-a9e4-4fc6641d97ae)

\
\
3\. Add event: "Download Element As PNG". Define filename and element\_id from the previous step

![](https://721213748-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXfye6lH1Q5_SG7txj-%2F-MXgGCnVVaTsrqwIwFCg%2F-MXgGU3bvfaq5gt31zF0%2Fimage.png?alt=media\&token=6d050c0c-406c-481f-997a-1827505cb6c3)