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

# Ez ScreenShot

Documentation for **Ez ScreenShot**, a Bubble plugin by EazyCode. Open the plugin page for the demo, install count and details.

<a href="https://eazycode.com/one_plugin/ez-screenshot-1700481706342x988626652083611500" class="button primary">View Ez ScreenShot plugin</a>

Related: [All Bubble plugins by EazyCode](https://eazycode.com/plugins)

## 🔗Links

[**Plugin Link on Bubble Marketplace**](https://bubble.io/plugin/ez-screenshot-1699262037338x436311545913540600)

[**Plugin Link on Our Website**](https://eazycode.com/one_plugin/ez-screenshot-1700481706342x988626652083611500)

[**Demo Link**](https://eazycodedemo.bubbleapps.io/version-test/ez_screen_shot)

[**Bubble Editor**](https://bubble.io/page?type=page\&name=ez_screen_shot\&id=eazycodedemo\&tab=tabs-1)

[**Forum Link**](https://forum.bubble.io/t/new-free-plugin-ez-page-screenshot-by-eazycode/302669)

***

## Description

The **Ez ScreenShot** allows you to take "screenshots" of webpages or parts of it, directly on the user's browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

***

## How It Works

* **Make**: Fires a base64 link that you can store in DB (Database), or show in the front end.

  Also, you can specify the type of image (png, jpg, bmp).
* **Make and Download**: Fires download action of a created screenshot.

  Also, you can specify the Image Name, it can be useful if you need to timestamp the image name, and image Type(png, jpg, bmp).

***

## Step By Step Instruction

1. Add the visual element "**EzScreenShot**" to your design tab.

   <figure><img src="https://lh7-us.googleusercontent.com/YUTN6IJhyMhRYsqhlGEdUi06hT7kMGdqtaCHZF4ZVlfxwDSqB99jSK-9_l-aOKF6dozoD1KA5vhTjf-GLTzItQBch9bln6wrmu-lGaHnon0i_6nCdxQEJKrrZBT5jblShad9Ob9sY-CYQ3z_4vXujg" alt=""><figcaption></figcaption></figure>
2. Specify Page ID

<figure><img src="https://lh7-us.googleusercontent.com/SO_gqg1sfonuWAPfbKxnoaCJHO89_AlOBSl5by3KASP1OVbC9d-gqr1vFing51G7Xutec4RmnNKXebVLd4p8tyVTjb2S1Hh9yD_qw0e1huS94Po5W-jcxLI4wLSj8sHYYZoHYnSMzlHKhFX-Hrqarw" alt=""><figcaption></figcaption></figure>

3. Create an event (ex. button click).

In the Workflow tab add to this vent an action "**Make EzScreenShot**" or "**Make and Download EzScreenShot**".

<figure><img src="https://lh7-us.googleusercontent.com/nJkdPINXIk5Jc7kn-Rx6aHFMbn3LJy_RNtqUr2gWL9n95A1GvegkRov4G2xJ2aww7m0qTNDHYI1W3gZ5dXOXRCctL7I46oscJ4pZUCiM6hJIr8PKniPrEBwVFNcP7qA3HTZ083rxH9kCizdjw_jT_A" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-us.googleusercontent.com/y7fLRb8buhkSERWS9TwJFkFN69kfkKBVdUD6Wv3AzKQOR7UOjVQ78-q-tdtUJD2ea0n9ZbLujDsQYIQ-CFrBdi_EMx6MB3EVOnAyF2ZUZCuZITHk8zZCebmfRNd9gwl6nz9X_YWNrk7xncuA7s4bWQ" alt=""><figcaption></figcaption></figure>

4. You must specify for each action input field:

For "**Make EzScreenShot**"

* Image type (jpg, png, bmp).

<figure><img src="https://lh7-us.googleusercontent.com/M5shqIPpwiaH1KOdTndu1ONMjRKXrNV9yVLQSFFwRhKL9r2y8douft8ZmNJxhF8kU_80PSV9yStrwvEhi60lvQLvxqZuI26ekAbxdUpfuZCq5vq3fzCc5Ig8Hw5dA-F700WgSx1QxhsLs-2PgwtLyg" alt=""><figcaption></figcaption></figure>

For "**Make and Download EzScreenShot**"

* Image Name(useful if you need to timestamp in image name).
* Image Type (jpg, png, bmp)

<figure><img src="https://lh7-us.googleusercontent.com/FPomBvnsM-PudIAlvl-tS4k8JZygtLUeYyw0v6o5eXOP5k5Ay_uflPWHJDtdmIYE3COwMSHLy-tU50GsRsi_joNoy7CpU7n1YRCJXWsXFjPxEOjYoIf0moAXegYVPE4FunxDKxgzrEfK7sSOUZe_Tg" alt=""><figcaption></figcaption></figure>

***

<div align="left"><figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fgit-blob-8a2b290eca352ca9682e4174618ed36fc6228b63%2Fimage.png?alt=media" alt="" width="188"><figcaption></figcaption></figure></div>

Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas – [eazycode.com](https://eazycode.com/)

**Hire us:**

[EazyCode: Bubble development agency](https://eazycode.com/hire-bubble-developers)\
[eazycode.ai: AI development](https://eazycode.ai/)\ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fgit-blob-3143e182b3767148463d5fcd8b3beed739195692%2Fimage.png?alt=media" alt="" data-size="line"> <https://www.fiverr.com/share/qQoDQZ>\ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fgit-blob-76a777cd6d752b0c0e612bedbd9d0d8a3f8a21e8%2Fimage.png?alt=media" alt="" data-size="line"> <https://www.upwork.com/freelancers/~01c1a4cbef44ecb5f1>\
\
**Follow us:**

<img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fgit-blob-70eb85b14aa8d7718a4cbe1a6f1c5ff89add574e%2Fimage.png?alt=media" alt="" data-size="line"> <https://www.facebook.com/eazycode>\ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fgit-blob-e29e247b98d074075fbd0e38606e1d71fcaf71e0%2Fimage.png?alt=media" alt="" data-size="line"> <https://twitter.com/ezcode_official>\ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fgit-blob-2898d024e877d78095b532da89be3515b7c5926d%2Fimage.png?alt=media" alt="" data-size="line"> <https://www.instagram.com/eazycodecom/>\ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fgit-blob-aa1141f17280fb87ed96683e64481c19226346a2%2Fimage.png?alt=media" alt="" data-size="line"> <https://www.linkedin.com/company/eazycodecom/>