# Capture screenshot

Take a screenshot of the active tab’s viewport (i.e. the part that is currently visible on the screen):

1. Add the element `Charles: Screenshot` to the page.
2. Use the action `Charles: Capture Screenshot` to initiate a screenshot![](https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FkhBYloNDnnTe4bb6me2E%2Fimage.png?alt=media\&token=24775c49-4d6b-4995-a8e9-6277f6a558ea)
3. Once the screenshot is taken, the event `screenshotCaptured` is triggered. You can use the `Charles: Screenshot`'s states
   1. `Screenshot URL` to access an image uploaded to the Bubble CDN. Please use `:saved to S3` to make sure the image is permanently stored. This should be the main way of storing images.
   2. `Base64 encoded image` to save a base64 encoded image directly to Bubble’s databse. This can be useful if you need to use any 3rd party APIs that expect a base64 encoded image. Please note that the string contains a prefix: `data:image/png;base64,iVBORw0KGgoAAA…`

<div align="left"><figure><img src="https://1746625412-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR8XSg57nbIyYLBX9iJLb%2Fuploads%2FXOyHHD87DT5KGJmUUmWh%2Fimage.png?alt=media&#x26;token=085df5ea-1ba0-455e-bab3-ef8274cf7e59" alt=""><figcaption></figcaption></figure></div>