# Ez ScreenShot

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

&#x20;

<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%2FOmA8OIR6KMcPc4Kd8oZW%2Fimage.png?alt=media&#x26;token=d8d79fa2-356b-4dd7-a687-fc59b1c965b3" 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 – <http://eazycode.com/>

**Hire us:**

<img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FnhRM38XquaMB7rEGRZF5%2Fimage.png?alt=media&#x26;token=94debb70-7346-48cc-8e7a-ddac3b68cc70" 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%2FUnmo0SgqtdtObJcWnXKG%2Fimage.png?alt=media&#x26;token=84a44ee4-c963-4409-ab03-5e03da5f9917" 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%2FY27NTLRLjxmS860b2LuF%2Fimage.png?alt=media&#x26;token=de978886-fe93-45d9-9aa2-dbe633c9c900" 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%2FJxNkIN1XL49rJ0d1PW4h%2Fimage.png?alt=media&#x26;token=6bc2d54b-741e-4327-895e-c9d256e29cfc" 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%2FDIjJ2ERcrlmbdSWhRNBd%2Fimage.png?alt=media&#x26;token=0a8166ae-162e-4fcb-bef6-e458c760fee7" 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%2F0K22Xx5JDxzKfhXJkmSi%2Fimage.png?alt=media&#x26;token=90af72e3-5fcc-4ea2-baf6-56525f3e1e6a" alt="" data-size="line"> <https://www.linkedin.com/company/eazycodecom/>