Installing Ybug on your site

Ybug's code is asynchronous and is designed not to slow down your site.

When you create a project in Ybug, you'll be sent an email with a code snippet to add to your website. Alternatively, you can copy the code snippet from your dashboard. Paste it into your website just above the closing </body> tag.

Your code should look something like this:

<!-- Ybug code start (https://ybug.io) -->
<script type="text/javascript">
(function() {
    window.ybug_settings = {"id":"XXXXXXXXX"};
    var ybug = document.createElement('script'); ybug.type = 'text/javascript'; ybug.async = true;
    ybug.src = 'https://widget.ybug.io/button/'+window.ybug_settings.id+'.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ybug, s);
})();
</script>
<!-- Ybug code end -->

Replace XXXXXXXXX with your project ID.

JavaScript frameworks

If you're using a JavaScript framework, install one of our official npm packages: ybug-vue, ybug-react, or ybug-angular.

Platform-specific guides

Looking for instructions for the most common web platforms? See the dedicated guides for WordPress, Shopify, Webflow and Bubble.

Next steps

Once the snippet is in place, you'll probably want to tailor Ybug to your site and team. Here's where to go next.

Customize the widget

• Customization — colors, button label, language defaults, and other widget options.
• Custom CSS styling — restyle the launcher and widget with your own CSS.
• Setting the language — change the widget language or pin it to a specific locale.
• Launcher and widget position — move the launcher button to a different corner.
• Feedback default values — pre-fill name, email, or custom data on every report.
• Console recording — capture browser console logs alongside each report.
• Sensitive data protection — anonymize passwords, tokens and other private content in screenshots.

Developer guide

• Passing user information — identify reporters automatically when they're logged in.
• JavaScript API — open, close, prefill, or submit feedback programmatically.
• JavaScript events — hook into widget lifecycle events.
• Opening Ybug programmatically — trigger the widget from your own buttons or links.
• Content Security Policy — CSP rules and an example setup.

Browser extensions

If you need pixel-perfect screenshots, or want to collect feedback and bug reports from testers and team members, our browser extensions are perfect for the job.