Install the web widget

1. Get your widget embed code

Sign-up to Bugyard or ask one of our teammates to invite you as a Bugyard team member in their team. Then, create a new project or select an existing project and get your widget embed code from the "Getting Started" page.

2. Embed the widget code in your website or webapp

Embedding the widget litteraly takes one second. Just copy / paste the widget embed code just before the closing </head> tag of your pages. The widget embed code looks like the one below:

<script type="text/javascript">

!function(){if("function"!=typeof window.bugyard){var a=function(){a.c(arguments)};a.q=[],a.c=function(b){a.q.push(b)},window.bugyard=a;var b=document.createElement("script");b.setAttribute("data-bugyard","APP-ID"),b.setAttribute("async","async"),b.setAttribute("defer","defer"),b.setAttribute("src","https://widget.bugyard.io/bugyard.min.js"),document.getElementsByTagName("head")[0].appendChild(b)}}();

</script>

Important: Make sure to change your APP-ID or use the embed code from step 1.

3. Customize the widget design

From the widget configuration page inside Bugyard, change the Bugyard widget primary color to match your design. You can also change the widget position from right to bottom.

4. Lock the widget on a specific user

Are you using Bugyard in a webapp? Great! We have an awesome feature for you: you can lock the widget on an internal user, so that each feedback will then be tied to your users.

Make sure to run the following calls on every page refresh.

4.1 When your user logs-in your site

Once you have a logged in user on your site (after they have authenticated and you have their details available), call window.bugyard("setUser", {user_data}), where user_data is the data about the user. Please make sure to send the user email on every call.

window.bugyard("setUser", {

        "email": "[email protected]", // user email, required

        "name": "Rick Sanchez", // user name

        "id": "1234567890" // user id

});

The email parameter must be a String containing a valid email address. It is required.
The name parameter must be a String containing the user full name.
The id parameter must be a String containing your internal user id.

From now on, all feedback are created by and associated to your user "Rick Sanchez".

4.2 When your user logs-out your app

Simply call the window.bugyard("freeUser"); when the user logs-out your app:

window.bugyard("freeUser");

All the users new feedback will not be tied to your internal webapp user anymore.

5. Trigger the widget from a custom element

Do you want to be able to trigger a feedback from a big button inside your webapp or from a link inside your header? We've got you covered!

Just add the data-trigger-bugyard-feedback attribute to your custom element and set it to true. Clicking on this element will trigger the feedback form.

For example:

<a href="#" data-trigger-bugyard-feedback="true">Feedback</a>

If you need, you can also hide the widget button. To hide the widget button, the following call must be done to the widget:

window.bugyard("hideButton");