[New Plugin]: Screenshot Element Pro

Showcase
1

We are excited to announce the launch of the Bubble plugin, Screenshot Element Pro!

FEATURES:

  • Generate screenshot of an Element by its ID
  • Generate screenshot of the the visible part of the screen
  • Generate screenshot of the entire page
  • Save in JPG or PNG
  • Generate URL from the screenshot
  • Download screenshot on the hard drive

Demo | Editor

Full Description & Documentation

We hope you enjoy using this plugin to add screenshot feature to your Bubble apps!

Plugin page:

9 Likes
2

This looks really nice, look forward to trying it out.

Would be awesome if you could generate a page screenshot using a backend workflow in the future :slight_smile:

2 Likes
3

Although I’m not actually looking for a popup URL in my case, for some reason I do not get the URL popup but I can configure it to get the image downloaded. What I get is a small bit of text at the bottom left of the screen “Waiting for xxx.bubbleapps.io…” and “processing request” but no popup like on the demo site.

However, if the URL bit was working, I would prefer the ability to capture the URL instead of presenting it to the user in a popup. I’d prefer this option so that I can capture screen images periodically and use them in a repeating group to use as a sort of ‘live tile’ menu where a user can select the page by it’s image. I want to capture and store the image URL to a table in the database instead of making it a popup.

2 Likes
4

Hi Chris,

Thank you for your question!
Yes, you can generate a screenshot URL and save it into the Database. I’ve made a simple demo app here:

demo | editor

Check the workflow:

  1. On the button click we capture the element by its ID and generate a URL:

    Digitaleyedemo___Bubble_Editor
    Digitaleyedemo___Bubble_Editor1558×972 108 KB

  2. When the URL is ready, we can save it to our Database table “ScreenshotURL”:

    Digitaleyedemo___Bubble_Editor
    Digitaleyedemo___Bubble_Editor1470×706 82.7 KB

Don’t hesitate to ask any questions you may have :slight_smile:

1 Like
5

This plugin looks awesome!

1 Like
6

Done, works great! Thank you!

2 Likes
7

Is there any reason why generating a screenshot is taking longer than expected? It’s about 40 seconds. It’s about 40 seconds until the “screenshotpro url is generated” workflow is run.

8

Screenshot Element Pro: Release v1.2.1 :tada:

We continue improving all our plugins. In this release we bring a few important improvements for our Screenshot Element Pro plugin:

  • Added “Compress Quality” field (a numeric value between 0 and 100)
  • Important under-the-hood improvements to make the file generation faster
  • Minor bug fixes
  • Highly Improved Plugin Demo and Documentation

Advanced_Screenshot_Element
Advanced_Screenshot_Element2528×1340 150 KB

2 Likes
9

Hi @BubbleSam! Is there a way to do these 2 steps on the same WF? I’ve found that the URL is not saved on the DB if the ‘Create a new ScreenshotURL’ step is on the same WF as the ‘Generate Screenshot’ … on my app I cannot have a 2-step user-action process

thanks!

1 Like
10

Hi @jmbarquet ,
What you want to do is to be able to download the screenshot and generate a screenshot url in one WF?

1 Like
11

No download needed, I would like to Generate the URL and save it in the DB in the same WF, right now, if it’s not a 2 step process (i.e 1 button for URL generation + 1 button for saving the URL on the DB), unfortunately is not working

2 Likes
12

Hi @jmbarquet , You have to use the URL Generated event to save the URL in the DB.

Here is a Demo and Editor.

Bubble_Editor
Bubble_Editor1394×1060 91.4 KB

1 Like
13

Hey @BubbleSam, thank you yes I understand that, my issue is that I need to do those 2 steps on the same WF like this:

Untitled
Untitled733×248 17 KB

I would like to Generate the URL and save it in the DB in the same WF, not to have a separate button for each step.

Right now, doing it like this for some reason does not save the URL on the DB on the ‘Create new screenshot’ step.

1 Like
14

You do not need to have a separate button for each step. The URL Generated event is triggered automatically just like in our example.

Here is how it works:

  1. Trigger the screenshot generation process (by clicking on a button for example)
  2. Once the URL is ready, a special event ( URL Generated) is triggered. You can use it from your Bubble Workflow to save the url in your Database
2 Likes
15

Hi @BubbleSam,

Is it possible to save the screenshot image to bubble’s database?

Many thanks

1 Like
16

Hey there @phetxdphet,

Yes, you can. When a screenshot is taken it’s saved to your file manager on AWS, then you need to simply save the URL of the file to your database for later use.

@BubbleSam actually demonstrates that here: [New Plugin]: Screenshot Element Pro - #12 by BubbleSam

3 Likes
17

Thanks for the prompt reply @johnny! The plugin works perfectly

1 Like
18

Hi! Does this plugin capture iFrames on a page?

19

This probably won’t work…

1 Like
20

Darn. Is there any way to accomplish this?

1 Like