💰  SUMMER DEAL: Get 15% OFF  ·  Offer expires in 02 days   21 : 18 : 33       Subscribe now

Getting started

Installing Ybug on your site

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

When you create your account, you'll be sent an email with code snippet to add to your project. Alternatively you can get your code snippet in your dashboard. Simply copy this code and paste it into your project just above the closing </body> tag.

Your code should look something like this:

<!-- Ybug code -->
<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://ybug.io/api/v1/button/'+window.ybug_settings.id+'.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ybug, s);
})();
</script>
<!-- Ybug code end -->

Just replace XXXXXXXXX with your account id.

Browser extensions

If you need pixel perfect screenshots or if you would like to get feedback and bug reports from your testers and team members, our browser extensions are perfect for this use case.

Passing user information

You might want to pass user information to Ybug. It may then help you identify the user who sent feedback. You can pass basically any additional user info you want.

window.ybug_settings = {
    id:'XXXXXXXXX', 
    user: {
       id: '112233445566',
       username: 'john-doe'
       // any other info you need to identify the user
    }
};

If your need to change user data (ie when your user logs in), you can call Ybug.setUser() method.

Ybug.setUser({
    id: 'XYZ',
    // ...
 });

Feedback default values

You can prefill feedback form with some default values:

window.ybug_settings = {
    id: 'XXXXXXXXX', 
    feedback: {
        comment: 'Winter is coming...',
        rating: 5, 
        email: 'jon.snow@winterfell.com', 
        name: "Jon Snow"
    }
};

Setting the language

Ybug automatically detects which language to use for current user.

You can however override this behavior simply by adding attribute language_override to your ybug_settings object:

window.ybug_settings = {
    id:'XXXXXXXXX', 
    language_override: 'fr' // Replace with preferred language of your user
};

Currently supported languages are Czech (cs), German (de), English (en), Spanish (es), French (fr), Croatian (hr), Italian (it), Polish (pl), Slovak (sk). Is your language missing from this list? Contact us, we will be happy to add another translation.

Opening Ybug programatically

Ybug normally opens when someone clicks on the launcher button in the bottom right corner.

If you want to open it on some other event though, you can add a small snippet of code to any element of your project. This way you can implement your own custom launcher button.

With markup

<a href="#" data-ybug="open">Feedback</a>

Example: Your feedback

You can also hide standard Ybug launcher button by passing hide_launcher: true in the ybug_settings object:

window.ybug_settings = {
    id:'XXXXXXXXX', 
    hide_launcher: true
};

If you need to skip welcome step and open feedback form directly, just pass additional skip_to: 'feedback' in the ybug_settings


With Javascript

Ybug also provides some simple Javascript API, you can use Ybug.open() and Ybug.close() methods to control Ybug widget programatically.

// Open the widget
Ybug.open();

// Open the feedback form
Ybug.open('feedback');

// Close the widget :-)
Ybug.close();

If you need to open any particular feedback step, just pass additional parameter to open method: Ybug.open('feedback').

Example: Open feedback form or even Open annotate tool.


Keyboard shortcut

It is also possible to use a Alt+Y keyboard shortcut for opening Ybug widget. Shortcut must be enabled by passing shortcut: true in the ybug_settings object.

window.ybug_settings = {
    id:'XXXXXXXXX', 
    shortcut: true
};

Launcher position

You can position the Ybug launcher button on the bottom right, bottom left and middle right sides of the page. The position attribute can have these possible values: bottom-right (which is the default value), bottom-left and middle-right.

window.ybug_settings = {
    id:'XXXXXXXXX', 
    launcher_position: 'bottom-right' // change to bottom-left or middle-right 
};

Javascript events

Ybug triggers some lifecycle events, to which you can register listeners easily, 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 Open event is triggered right after the Feedback widget is opened.
beforesend Beforesend event is triggered before sending the feedback report to Ybug servers. You can use this event to modify submitted report. A json object with report data is passed to the beforesend event handler.
cancel Triggers when the Feedback widget is closed without submitting the report (by clicking the Cancel button or pressing ESC).
close Triggers every time the Feedback widget is closed (even when cancelled).

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);
    },
    oncancel: function () {
        console.log('Feedback cancelled');
    },
    onclose: function () {
        console.log('Feedback widget closed');
    }, 
};

Or you can register your event listeners by calling Ybug.on(event, callback). Please note, that you can use Ybug.on method only after Ybug has successfully loaded. The best place to setup your event listeners, is in the onload function:

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('cancel', function() {console.log('canceled')});
        Ybug.on('close', function() {console.log('closed')});
    }, 
};

Feedback form customization

Do You need to customize or translate texts in the Ybug launcher button or feedback forms? No problem, it is possible to customize texts in all parts of Ybug app.

Enabling/disabling fields

It is possible customize the feedback form to meet your needs. Currently supported fields are: Comment, Name, E-mail and Rating (with stars). You can make these fields hidden, optional or required.

Default feedback form settings:

window.ybug_settings = {
    id:'XXXXXXXXX',
    rating: false, // Rating is disabled by default
    rating_required: false,
    comment: true, // Comment is enabled and required
    comment_required: true, 
    name: false,   // Name field is disabled
    name_required: false,
    email: true,   // Email field is enabled and optional
    email_required: false,
};

Launcher button

To change the label of Ybug launcher button to your own call to action text (for example "Report a problem" instead of default "Send feedback"), just add a translate object with launcherButton.Title option to your ybug_settings object:

window.ybug_settings = {
    id:'XXXXXXXXX', 
    translate: {
        "launcherButton.Title": "Report a problem",
    }
};

Translations

Do you need to translate all the texts into your customer's language? Just add a translate object with some (or all) snippets to your ybug_settings object. You can use this as a template:

window.ybug_settings = {
    id:'XXXXXXXXX', 
    translate: {
    "launcherButton.Title": "Feedback",
    "feedbackTypeForm.Heading": "Feedback",
    "feedbackTypeForm.Subheading": "Have you found a bug or do you have any comments\/suggestions about this site?",
    "feedbackTypeForm.ButtonSpecific": "Select and comment part of this page",
    "feedbackTypeForm.ButtonGeneral": "General feedback about this page",
    "feedbackForm.Heading": "Feedback",
    "feedbackForm.RatingLabel": "How would you rate your experience?",
    "feedbackForm.TextLabel": "Comment",
    "feedbackForm.TextPlaceholder": "Write a comment or describe a problem.",
    "feedbackForm.TextError": "This field is required",
    "feedbackForm.EmailLabel": "Your e-mail",
    "feedbackForm.EmailPlaceholder": "Your e-mail",
    "feedbackForm.EmailError": "Please enter valid e-mail address",
    "feedbackForm.NameLabel": "Your name",
    "feedbackForm.ButtonSubmit": "&nbsp;&nbsp;&nbsp;Submit feedback&nbsp;&nbsp;&nbsp;",
    "feedbackForm.ButtonCancel": "Back",
    "feedbackForm.RequiredError": "This field is required",
    "feedbackForm.OptionalText": "(optional)",
    "feedbackForm.AddScreenshot": "Add screenshot",
    "feedbackForm.EditScreenshot": "Edit screenshot",
    "highlighter.instructions": "Click on the page to select a region. Press ESC to cancel.",
    "thankYouModal.Heading": "Thank You",
    "thankYouModal.Text": "Your feedback has been sent successfully. Thank you.",
    "thankYouModal.Button": "Close",
    "processingModal.Heading": "Processing&nbsp;"
}};

Do you have any questions?

Contact us in case you have any questions or feedback.
We will be happy to help.

This website uses cookies to ensure you get the best experience on our website. Learn more   

   Got it!