How to customize your feedback button

Customizing the feedback button to your needs is easy with our snippet configurator. For every site you use Usersnap with you can alter the button text, the position of that button and the language of the Usersnap menu. Additionally, you can select which three tools you want your customers to use when giving feedback, and if they can leave their email address or a comment:

If you like this article, give it some sharing ❤️

More of the type that wants to touch some code? Sure, here’s to configuring some JavaScript:

Adjusting the position of the Usersnap button

You can set up the vertical and the horizontal position of the Usersnap button. The default configuration is valign: 'bottom', halign: 'right'.

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         valign: 'bottom',
         halign: 'right'
     };
   </script>

button bottom right

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         valign: 'bottom',
         halign: 'left'
     };
   </script>

button bottom left

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         valign: 'middle',
         halign: 'right'
     };
   </script>

button middle right

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         valign: 'middle',
         halign: 'left'
     };
   </script>

button middle left

Language support

Usersnap currently supports 19 different languages. You can set up your preferred language with the configuration option lang as shown below. For all language codes and demo’s, check out our documentation!

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         lang: 'de-informal'
     };
   </script>

If you want to change your language later with a JavaScript function call, simply use: UserSnap.setLanguage('en');

Customize button text

If you want to change the button text – “Feedback” by default – you can easily configure your own text by adding the btnText property to your configuration object.

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         btnText: 'Help?'
     };
   </script>

We strongly recommend to check if your text fits to the button box.

Add a comment box to the Usersnap widget

If you’d like to get general comments from your visitors, simply add commentBox: true to your Usersnap configuration snippet. You get a comment box right in the Usersnap widget. This settings can be combined with emailBox (see below).

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         commentBox: true
     };
   </script>

Additionally you can specify the place-holder text of the comment box:

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         commentBox: true,
         commentBoxPlaceholder: 'Enter something special here.'
     };
   </script>

If you want to make the comment box necessary for a report, you can require it from your users:

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         commentBox: true,
         commentRequired: true
     };
   </script>

comment

Add an email field to the Usersnap widget

You can add an email field to allow your visitors to provide an email address to get back to them. If you set up Usersnap to receive your screenshots via email, you can simply hit reply in your email client to respond to their feedback. To enable it, add emailBox: true to your config.

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         emailBox: true
     };
   </script>

Again you can specify your custom place-holder text:

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         emailBox: true,
         emailBoxPlaceholder: 'your company email address'
     };
   </script>

If you want to pre-fill the email address field, simply specify the emailBoxValue in your Usersnap configuration:

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         emailBox: true,
         emailBoxValue: 'user@mycompany.com'
     };
   </script>

The email address field can be also changed by a JavaScript call: UserSnap.setEmailBox('newaddress@mycompany.com'); sets the emailBoxValue to the given email address.

If you want to make the email address field necessary for a report, you can set it to mandatory:

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         emailBox: true,
         emailRequired: true
     };
   </script>

 emailbox

It is possible to combine all described properties:

   <script type="text/javascript">
     var _usersnapconfig = {
         apiKey: 'YOUR-API-KEY-HERE',
         emailBox: true,
         commentBox: true,
         commentBoxPlaceholder: 'Enter something special here.',
         emailBoxValue: 'user@mycompany.com'
     };
   </script>

email and comment

Start configuring your feedback process today!

If you like this article, give it some sharing ❤️