Electron apps are supported!

We updated our Feedback Widget to work in Electron-based apps. With Electron, you can build cross-platform desktop apps with JavaScript, HTML, and CSS.

Do you need to collect customer feedback in your Electron app? We have got you covered! You can now collect meaningful and actionable visual feedback along with all the contextual information including screenshots, console logs, and environment info.

Install your JavaScript snippet into your app as usual, no additional setup is needed. Just make sure to allow our domains (widget.ybug.io and ybug.io) in your Content-Security-Policy.

Why Electron support matters

Electron apps feel like desktop software, but they are built with web technologies. That makes Ybug a natural fit for teams that already use JavaScript, HTML, and CSS to build their application interface.

Without an in-app feedback tool, desktop users often report problems through email or support chat. They may describe the issue vaguely, forget the exact screen, or leave out the operating system and app context. Ybug helps turn that into a visual report that your team can actually use.

What Ybug can capture in Electron apps

When a user submits feedback from your Electron app, Ybug can help collect the context that usually takes several follow-up questions:

• a screenshot of the current app screen,
• visual annotations from the user,
• the user’s feedback message,
• console log information,
• environment details that help your team reproduce the problem.

This is useful for layout bugs, broken flows, confusing UI, missing data, and other issues that are easier to explain visually than in a long written message.

How to install Ybug in an Electron app

The setup is similar to a web application. Add your Ybug JavaScript snippet to the part of your Electron app where you want the feedback widget to appear. Then confirm that your Content-Security-Policy allows the Ybug domains required by the widget.

1. Open the Ybug dashboard and copy your project’s installation snippet.
2. Add the snippet to the renderer process or HTML entry point where the widget should load.
3. Allow widget.ybug.io and ybug.io in your Content-Security-Policy.
4. Build or run the Electron app locally.
5. Submit a test report and verify that it appears in your Ybug project.

If your app uses a strict CSP, review the policy carefully. A blocked script, connection, or frame source can prevent the widget from loading or submitting feedback correctly.

Example: collecting feedback in a desktop beta

Imagine you are preparing a new Electron app for beta users on Windows, macOS, and Linux. A user reports that a settings panel looks broken on a smaller laptop screen. Instead of sending a vague support message, the user opens Ybug inside the app, annotates the broken panel, and submits the report.

Your team receives a visual report with the screenshot and context, making it much easier to reproduce and prioritize the issue across platforms.

Tips for Electron feedback workflows

• Test on every supported operating system. Desktop rendering and app packaging can differ between Windows, macOS, and Linux.
• Check your Content-Security-Policy early. CSP is the most common place where embedded tools need explicit permission.
• Use separate Ybug projects for beta and production if you want to keep test feedback away from live customer reports.
• Ask beta users for visual reports. Screenshots and annotations are much more useful than long descriptions of UI issues.
• Connect integrations. Send confirmed feedback to your issue tracker or team chat so it fits your normal workflow.

Better feedback for desktop apps built with web technology

Electron makes it possible to build desktop apps with familiar web tools. Ybug now helps you collect feedback in those apps with the same visual context teams expect from website feedback: screenshots, annotations, logs, and useful environment information.