Getting started

Installing Ybug on your project

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 = '''.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ybug, s);
<!-- 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 = {
    user: {
       name: 'John Doe',
       email: ''
       // 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.

    email: '',
    id: XYZ,
    // ...

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 = {
    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 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 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 to the ybug_settings object:

window.ybug_settings = {
    hide_launcher: true

With Javascript

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

// Open the widget;

// Close the widget :-)

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 = {
    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 = {
    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 = {
    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)",
    "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;"
App translation options
Pic: Texts in feedback-type form

Pic: Texts in feedback form

Pic: Thank you modal

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!