WebSDK

How to implement Useberry Web SDK get User Tests

WebSDK

If you want to take UX Surveys from your website use the following procedure:

  1. Create a Developer Account following this steps.
  2. Get your API Key from Developer’s control Panel.

Dependencies: jQuery
Make sure you have jQuery on your website.

Add our JavaScript plugin and jQuery (in case you don’t already have it) near the end of your pages, right before the closing </body> tag. Be sure to place jQuery first, as our JavaScript plugin depend on that.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.useberry.com/webSDK/useberry.js#token={YOUR_ACCESS_TOKEN}"></script>

On the page that you want to get UX Surveys add this code

<script> 
var tmpUseberry = Object.create(Useberry); 
tmpUseberry.init({ 
  customIndicator:false, 
  indicatorClass:'', 
  hideCustomIndicator:true,
  demoMode:false
 });
</script>

Options:

customIndicator: {true|false}
false: Users will see Useberry indicator that will trigger the Useberry UX Surverys
true: Use your own indicator to trigger Useberry UX Surverys

indicatorClass:{String}
Applies only when customIndictor is true.
Any class element on your page that you want to trigger the UX Survey.

<body>
<div class="my-button">Start UX Survey</div>
<script>
var tmpUseberry = Object.create(Useberry); 
tmpUseberry.init({ 
 customIndicator:true, 
 indicatorClass:'.my-button', 
 hideCustomIndicator:true,
 demoMode:false
}
);
</script>
</body>

hideCustomIndicator:{true|false}
Applies only when customIndictor is true.
Hides the indicatorClass div element on your page if there is no UX Survey available for the users.

demoMode:{true:false}
For debugging.
When demoMode is true you will always receive a test prototype. Switch to false to receive your Useberry prototypes.

Rewarding

If you want to reward your users after completing a successfully UX Survey you can use the completeUseberry listener

$(document).on( "completeUseberry", function() { 
  console.log("You have earned a free meal"); 
});

Full Working Example

Here is a full working example for the Useberry WebSDK implementation

<!DOCTYPE html>
<html lang="en"> 
 <head>    
  <meta charset="utf-8">    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
 </head>  
 <body>    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
  <script type="text/javascript" src="https://www.useberry.com/webSDK/useberry.js#token={YOUR_ACCESS_TOKEN}"></script> 
  <script>  
   var tmpUseberry = Object.create(Useberry);  
   tmpUseberry.init({   
     customIndicator:false,   
     indicatorClass:'',   
     hideCustomIndicator:false,  
     demoMode:true 
   });
   $(document).on( "completeUseberry", function() {   
      console.log("You have earned a free meal"); 
   }); 
  </script>  
 </body>
</html>
Useberry