JavaScript events

Ybug triggers some lifecycle events that you can register listeners for, either by calling Ybug.on(event, callback) or directly in your configuration object.

Event	Description
load	Triggers when Ybug is fully loaded and ready.
open	Triggered right after the Feedback widget is opened.
beforesend	Triggered before the feedback report is sent to Ybug servers. Use this to modify the submitted report. A JSON object with report data is passed to the handler. If you return a Promise, the report won't be sent until it resolves; if it resolves with false, the feedback won't be sent.
beforescreenshot	Triggered before the feedback widget attempts to capture the screenshot. Use it to perform any preparations or modifications to the page (e.g. removing sensitive information, ensuring correct WebGL canvas state). Return a Promise to delay the screenshot until the promise resolves.
aftersend	Triggered after the feedback report is sent. The handler receives the report JSON with two extra properties: id (report key) and reportUrl (link to the report detail page in the dashboard).
cancel	Triggers when the Feedback widget is closed without submitting the report (Cancel button or Esc).
close	Triggers every time the Feedback widget is closed (including cancellations).

Register your event listeners in the configuration object:

window.ybug_settings = {
    id: 'XXXXXXXXX',
    onload: function() {
        console.log('Ybug loaded and ready');
    },
    onopen: function () {
        console.log('Ybug opened');
    },
    onbeforesend: function (report) {
        console.log('Before report is sent', report);

        // You can modify the feedback report here
        report.title = 'Modified title: ' + report.title;

        // If you need to perform some async actions, you can return a Promise
        return new Promise(resolve => {
            // Do some async work...
            let agreed = confirm('Do you agree to our Terms and Conditions?');

            resolve(agreed); // if you resolve with false, the feedback will not be sent
        });
    },
    onbeforescreenshot: function () {
        console.log('Before screenshot is taken');
        // Do some sync work here...

        // If you need to perform some async actions, you can return a Promise
        return new Promise(resolve => {
            // Do some async work...
            resolve();
        });
    },
    onaftersend: function(report) {
        // Feedback report was sent! We have id and reportUrl available now
        console.log(`Feedback with an ID ${report.id} was sent. Go to ${report.reportUrl} for details!`);
    },
    oncancel: function () {
        console.log('Feedback cancelled');
    },
    onclose: function () {
        console.log('Feedback widget closed');
    },
};

You can also register listeners by calling Ybug.on(event, callback). Note that Ybug.on is only available after Ybug has finished loading — the best place to set up listeners is inside the onload handler:

window.ybug_settings = {
    id: 'XXXXXXXXX',
    onload: function() {
        Ybug.on('open', function() { console.log('opened') });
        Ybug.on('beforesend', function(report) { console.log('Before report is sent', report) });
        Ybug.on('aftersend', function(report) { console.log('Feedback was sent', report) });
        Ybug.on('cancel', function() { console.log('canceled') });
        Ybug.on('close', function() { console.log('closed') });
    },
};