[New Plugin] Feedback Screenshot Generator (Widget)

Showcase
1

Hey Bubblers, I just released “Feedback Screenshot Widget” — a plugin to make it easier to get user feedback and bugs by capturing screenshots and annotations directly on the page.

Demo recording:
final_5e973072b20635001537c9c6_160371

Here are key features:

  1. Users can draw directly on the page to highlight certain elements on the page
  2. Users can provide a text comment of their feedback
  3. From the Bubble editor, you can save the screenshots and feedback text directly to your database to create a list of feedback
  4. The plugin also returns the page height, width, browser info, and operating system for quick troubleshooting!

Here’s an example in run mode and and the link to the plugin page.

Let me know if you’d like to customize other aspects of this plugin and I can look into it. Happy Bubbling!

19 Likes
2

Awesome. I’m gonna use this

3

Great! Let me know what feedback you have!

4

Hi Bubblers,

I just pushed an update for the Feedback Screenshot Widget that enables you to customize several more properties of this plugin. You can now customize these new fields:

  1. The text of the default button that opens/closes the feedback mode
  2. The text of the submit button
  3. The text of the placeholder input (for your feedback comment)
  4. The color of the buttons on the plugin

You can view the live demo page to see the updates. Here’s a screenshot of the new plugin properties:

Screen Shot 2020-06-20 at 12.30.55 PM

As always, don’t hesitate to provide any feedback!

Happy Bubbling,
Alex
TechBlocks

5

Hi All, I just pushed another update for the Feedback Screenshot Widget – you can now customize the screenshot image file format (the two options are .png and .jpg).

You can view the run mode demo here. Enjoy and let me know if you have any feedback!

Alex

1 Like
6

Hello Alex, this looks like a great plugin. I look forward to trying it :slight_smile:

7

That’s great @uzair7175! Happy to answer any questions you may have

1 Like
8

Can you please tell me, can I use my own button to initiate the drawing?

9

Hey @uzair7175 – yes, you can use a standard Bubble element to initiate the feedback mode! For instance, you can use a toggle element or floating group element and use a workflow action called “Open Feedback Mode” when your elements are clicked

10

Ok, how does that work? How do you set it up?

11

Hey @uzair7175 – you can set it up by adding the Feedback Screenshot element to your page and then customizing the values:

feedbackscreenshoteditor
feedbackscreenshoteditor514×870 42.7 KB

I just update the instructions on the plugin page to be a bit more thorough, here they are:

Getting started

  1. Add the “Feedback Widget” element to your page
  2. Configure the settings of the element (e.g. the Feedback button color, the button text on the “Submit” button)
  3. If you use the default button, in run-mode, you should see a button on the right side of your page!
  4. On the workflow tab, the event “Feedback Screenshot has been generated” can be used to initiate an email or save the feedback screenshot

How do I set up a custom button to initiate the Feedback Screenshot mode?

  1. On the “Feedback Widget” element on your page, change the “Show Default button” element to “no”
  2. Add the custom Bubble element you’d like to use as your custom button onto the page and give it an HTML id
  3. When your custom Bubble element is clicked, initiate the workflow action to “Open Feedback Screenshot View”
1 Like
12

Ok, and can you save the image that is created?

13

@uzair7175 yep, use the on the workflows tab, use the “Feedback Screenshot has been generated” event. It takes a couple of seconds for the feedback screenshot to be generated, and this event can be used to save the feedback screenshot. Just use the states on the Feedback Screenshot element (such as Feedback Screenshot Image URL, Screen Width, Screen Height, etc). You can also send the image via an email.

1 Like
14

Excellent; thank you!

1 Like
15

You got it. Let me know if you have any other feedback or questions! More than happy to take a look at feature requests.

2 Likes
16

I like the idea behind this plugin and may be using it with my client soon!

17

Thanks for the kind words @Nick_1 – let me know if you have any questions or feedback as you try it out!

1 Like
18

Can I type greater than 1 comment at a time? For example, I can highlight a button and then comment on it. Then, I can highlight another button or text and then comment on that. Only after that I press submit

19

Hey @Nick_1, currently, you can add a single comment at a time, meaning that you can highlight something on your page, enter a comment, and press submit. If you want to enter multiple comments at a time, you’ll have to repeat!

Alex

1 Like
20

Ok makes sense. I understand. this would be a great feature for me to improve the user experience

1 Like