ViSenze Tech Blog

Best Practices: Front-end integration using Javascript SDK

Posted by Yu Lu on Mar 16, 2016 7:26:41 PM

Integration with ViSearch search engine has become much easier with our newly released Javascript SDK. Now there is no need to download or install any standalone files, you can just perform the integration directly with including a short piece of regular Javascript in your frontend web applications, resulting in a much faster process.

Here’s the step-by-step guide on how to do it:


Step 1: Generate search-only api key pair

Create a search-only api key pair in Dashboard: your email->application keys->API Credentials. We strongly recommend that you use search-only api keys when the doing front-end integration to protect your data.

Best_Practice__front-end_integration_using_Javascript_SDK_-_Google_Docs.jpg

Step 2: Integrate the code snippet

Paste the following code snippet into the header of your site. This snippet will load visearch.js onto the page asynchronously, so it won’t affect your page loading speed. Your should replace the YOUR_ACCESS_KEY and YOUR_SECRET_KEY with the one you generated from the dashboard.


<script type="text/javascript">
   ! function(e, r, t, a, s) {
       e.__visearch_obj = s;
       var c = e[s] = e[s] || {};
       c.q = c.q || [], c.factory = function(e) {
           return function() {
               var r = Array.prototype.slice.call(arguments);
               return r.unshift(e), c.q.push(r), c
           }
       }, c.methods = ["idsearch", "uploadsearch", "colorsearch", "set", "send"];
       for (var n = 0; n < c.methods.length; n++) {
           var o = c.methods[n];
           c[o] = c.factory(o)
       }
       var i = r.createElement(t);
       i.type = "text/javascript", i.async = !0, i.src = a;
       var h = r.getElementsByTagName(t)[0];
       h.parentNode.insertBefore(i, h)
   }(window, document, "script", "http://cdn.visenze.com/visearch/dist/js/visearch-1.0.0.min.js", "visearch");
   visearch.set("access_key", "YOUR_ACCESS_KEY");
   visearch.set("secret_key", "YOUR_SECRET_KEY");
</script>



Step 3: Perform the searches

You can perform upload search by providing the parameters and call visearch.uploadsearch():


var imageUrl = "test_image_url";
var params = {};
params.im_url = imageUrl;
params.score = true;
params.limit = 27;
params.fl = ["price","shop_name","im_url"];

if(box != null)
   params.box = [box.x1, box.y1, box.x2, box.y2];

visearch.uploadsearch(params, function(response) {

//do something with the response

});


Topics: New product features, Best practices