[New Plugin Updates] Screenshot Image Generator

[alex4]

Hey Bubblers, I just made updates to “Screenshot Generator” — a plugin you can add to your app to take a screenshot of the (1) current screen, (2) entire page – above & below the fold, or (3) a specific element

The key features:

• You can save the image as PNG or JPG
• You can choose to take a screenshot of the current screen, entire page, or a specific element (by entering its HTML ID attribute)
• You can customize the name of the image file generated

Here are links to the run mode demo and editor mode demo.

Below are examples of each of the three "Screenshot Modes:"

1. Example of “Current Screen” screenshot:
   

   

2. Example of “Entire Page” screenshot:
   

   

3. Example of “Specific Element” screenshot:
   

As always, let me know if you have any questions or feedback!

Happy Bubbling,
Alex
TechBlocks

[abhi2]

Hi, I’m not able to use this on a mobile device. Why is that?

[alex4]

Hi @abhi2 – I’m able to take a screenshot on my mobile device (open demo on a mobile device here).

Could you share your editor or run-mode error that you receive?

Best,
Alex
TechBlocks

[akhella]

Hi

I purchased the plugin, but whenever I take a screenshot, even of just an empty group with a border, there is a whitespace inserted on the left hand side of the screenshot. (see attached)

Any idea why this is happening?

[alex4]

Hi @akhella — thanks for reaching out. I’m happy to take a look.

In order for me to troubleshoot the issue, I need to take a look at your configuration — can you please send me your run mode and editor mode links over DM?

Alex

[akhella]

@alex4 I was able to find the bug after trying different settings. The white space is inserted on the left if the plugin is added to a page with fixed width. Unchecking the fixed width box solved that.

[alex4]

@akhella great to hear! I’ll add this note in documentation.

[stephencharles]

@alex4 Can this plugin or the ‘Group to image’ plugin create an image of a group that is from a different page that is not currently loaded?

[alex4]

Hi @stephencharles, thanks for reaching out!

These plugins need to occur on the page, so they will not work if the page is not currently loaded. Out of curiosity, what’s the use case for this?

Best,
Alex
TechBlocks

[stephencharles]

The use case is turning a group data into an image that can be used to share in social media. So I was hoping to create a hidden page with fixed width elements and dynamic data that our customers could screenshot into a visual and save to their account.

[alex4]

Hi @stephencharles – apologies for the slower response here. I’ve been off the grid for the last few days.

Depending on exactly what user experience you’re trying to achieve, you might be able to create the group on the current page and put it behind another group (say, a blank white group, to make it not visible to the user). When the event occurs to create the image, you can trigger the plugin to take a screenshot of the group behind the blank white group.

Hope that helps!

Best,
Alex
TechBlocks

[stefanof]

Hi @alex4, I have just purchased the image generator plugin and it is absolutely great

My use case is for generating a picture to be shared on Facebook. After creating the image I just save it in a field of the thing while at page level I have set the SEO image to be the search of the image of the page thing. Here an example of the image

As you can see, this is a visibile group with the user profile picture and some dynamic text. The group is responsive and the size is 600x350 (not the best size for FB posts images but there is not enough in the page to make the group bigger). Anyway, this way it works fine and the page shared on Facebook looks like this

The problem is when the image is generated from mobile. Since the group has a reduced size, the image generated is much smaller and it does not fit the regular FB post images size. Here is my question: is there a way to generate the images in a preset format size ? are you planning to add such a feature ? any workaround can be applied ?

I would be nice also in desktop to be able to generate the image, let’s say, 1620x600 px even if the group is not that size.

Thanks

Stefano

[alex4]

Hi @stefanof – thanks for reaching out! I love that use case for the plugin.

What you can potentially do here (I have not given it a try but this should theoretically work) is create a separate screenshot group for mobile that is a fixed width group set to the width that you want the screenshot. You can hide this group under another group (solid white background, or whatever your page color is) and take a screenshot of the the fixed width screenshot group. The important thing here is to make sure that the group you want a screenshot of has been loaded onto a page (i.e. not hidden inside of an unopened popup).

Let me know if that helps/if you need more guidance!

Best,
Alex

[alex4]

Hi all, just pushed an update that lets you specify the scale/resolution of the screenshot image. For example, setting this number to “1” defaults to the browsers device pixel ratio. Setting this to “2” doubles the resolution. Here’s a screenshot of the new property on the workflow action (at the bottom of the inspector):

Let me know if you have any questions or comments!
Alex
TechBlocks

[mathieu]

Hello,
I have a question @alex4 :
Context : i creat an app with live stream (with jitsy), a googles sheets and pdf reader on the same page.

Question : your plugin can capture this ?

plugins i use : embed sheet / jitsy meeting / pdf viewer

i read “hosted allows for cross origin resource sharing (CORS)” but how can i verify if those 3 plugins can share resources ?

thank you

[alex4]

Hi @mathieu – thanks for reaching out!

Unfortunately, iFrames (what is probably used for some of those plugins) are not capturable by the screenshot generator. Let me know if you have any other questions.

Alex
TechBlocks

[t.augustorocha]

Hi,
I have a problem with the plugin.
When you run the first screen capture, it does not capture, only after the second capture action that the plugin correctly returns the image.

Bubble - Visual Programming

Can you help me?

thanks

[alex4]

Hi @t.augustorocha – thanks for reaching out. Happy to help.

Can you please DM me a link to your editor so I can take a look?

Best,
Alex

[t.augustorocha]

Hi @alex4 ,

Bubble Editor - Roehn

To meet my need, I need all actions to be performed in a single workflow

Best,

Tiago

[t.augustorocha]

Hi @alex4 ,

Any solution about the problem?

Best,

Tiago