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 site. Alternatively you can get your code snippet in your dashboard. Simply copy this code and paste it into your site 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.

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: {
       name: 'John Doe',
       email: 'john@doe.com'
       // any other info you need to identify the user
    }
};

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 cs, de, en, es, fr, hr, it, pl, 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 rigth 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 site. This way you can implement your own custom launcher button.

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

Example: Your feedback

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

window.ybug_settings = {
    id:'XXXXXXXXX', 
    hide_launcher: 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 
};

Feedback 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.

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",
    }
};

Feedback forms (Premium only)

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": "Send 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",
    "feedbackGeneralForm.Heading": "Feedback",
    "feedbackGeneralForm.TextLabel": "Comment",
    "feedbackGeneralForm.TextPlaceholder": "Your comment.",
    "feedbackGeneralForm.TextError": "This field is required",
    "feedbackGeneralForm.EmailLabel": "Your e-mail (optional)",
    "feedbackGeneralForm.EmailPlaceholder": "Your e-mail (optional)",
    "feedbackGeneralForm.EmailError": "Please enter valid e-mail address",
    "feedbackGeneralForm.ButtonSubmit": "&nbsp;&nbsp;&nbsp;Submit feedback&nbsp;&nbsp;&nbsp;",
    "feedbackGeneralForm.ButtonCancel": "Back",
    "thankYouModal.Heading": "Thank You",
    "thankYouModal.Text": "Your feedback has been sent successfully. Thank you.",
    "thankYouModal.Button": "Close",
    "processingModal.Heading": "Processing&nbsp;"
}};
App translation options
Pic: Texts in feedback-type form

Pic: Texts in feedback form

Pic: Thank you modal