1. Kayako Download customers: we will continue to develop and support Kayako Download beyond July 2017, alongside the new Kayako for existing customers.

    Find out more.

  2. The forum you are viewing relates to Kayako Classic. If you signed up or upgraded to the new Kayako (after the 4th July 2016), the information in this thread may not apply to you. You can visit the forums for the new Kayako here.

HOWTO: Replace public search with Microsoft Cognitive Services (Bing)

Discussion in 'Developing, APIs and extending' started by MichelZ, Apr 13, 2017.

  1. MichelZ

    MichelZ New Member

    Let's cut to the chase: The internal search engine does just not work for us for the Knowledgebase.
    We have replaced it with Microsoft Cognitive Services (aka Bing). This is ad-free, and has exactly the same look and feel as the normal Kayako search.

    One downside however is, that it only searches public KB articles, so no internal one's, and no tickets. So only what is available in the public Bing index. This is not a show stopper for us though, as we have had a fair share of people just opening tickets because they cannot find a KB article that they know is there...

    The integration on the Kayako side is fairly easy, all you need is a new Template entry, and add one line to the header template.

    But first things first. We need to have an account with MS Cognitive Services first. They have different pricing tiers, even a free one. Get it here: https://www.microsoft.com/cognitive-services/en-us/bing-web-search-api
    (You need an API Key/Subscription Key from there)

    Once you have this, move on to Kayako.

    In the Admin Control Panel, under "Templates" -> "Templates" -> "General", add a new Templated called "BingSearch" (or whatever name you like)

    Add the following:

    HTML:
    <script language="Javascript" type="text/javascript">
    
    $(document).ready(function() {
    
        $('#searchform a').prop('onclick',null).off('click');
           
        $("#searchform a").click(function(e) {
            //alert('click');
            e.preventDefault();
           
            $('.boxcontainer').remove();
    
            var searchValue = $('#searchform input').val();
            var params = {
                // Request parameters
                "q": searchValue + " site:<yourSite>",
                "count": "15",
                "offset": "0",
                //"mkt": "en-us",
                "safeSearch": "Off",
            };
         
            $.ajax({
                url: "https://api.cognitive.microsoft.com/bing/v5.0/search?" + $.param(params),
                beforeSend: function(xhrObj){
                    // Request headers
                    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","<yourSubscriptionKey>");
                },
                type: "GET",
                // Request body
                //data: "{body}",
                //dataType: "json"
            })
            .done(function(data) {
                addData(data);
            })
            .fail(function() {
                alert("error");
            });
        });
    });
    
    
    function addData(data) {
    // alert(typeof data);
    // alert(data);
    
    
        var bigStr = '<div class="boxcontainer">';
        bigStr += '<div class="boxcontainerlabel"><{$_language[searchresults]}></div>';
        bigStr += '<div class="boxcontainercontent">';
       
        if (typeof data.webPages === 'undefined' || data.webPages === null) {
            bigStr += '<div class="infotextcontainer">';
            bigStr += '<{$_language[nosearchresults]}>';
            bigStr += '</div>';
        } else {
            data.webPages.value.forEach(function(row) {
                bigStr += '<div class="kbsearchcontainer">';
                bigStr += '<div class="kbsearch"><a href="' + row.url + '">' + row.name + '</a></div>';
                bigStr += '<div class="kbsearchtext">' + row.snippet + '</div>';
                bigStr += '</div>';
            });
        }
       
        bigStr += '</div>'
        bigStr += '</div>'
        $('#searchform').after(bigStr);
    }
    
    </script>
    
    There are 2 things you need to change:

    HTML:
     "q": searchValue + " site:<yourSite>",

    change <yourSite> to the URL you would like to search, without http(s):// prefix. So e.g. "site:support.mydomain.com/Knowledgebase/Article"

    HTML:
    "q": searchValue + " site:support.mydomain.com/Knowledgebase/Article",
    The second thing is your API/Subscription Key here:
    HTML:
    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","<yourSubscriptionKey>");
    change <yourSubscriptionKey> with the value you got from Microsoft.
    HTML:
    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","kadjglkj4telkjasglje48z9uerglsdjr894");
    Now, save this, and edit the "header" template.

    Find the ending </head> tag.
    Just BEFORE this tag, insert the following line:
    HTML:
    <{RenderTemplate name="BingSearch"}> 
    (If you named the template that you created anything else then "BingSearch", then please use this name).

    That's it!
    All that's left to do is Rebuild your Cache in Kayako, and your Search should be good to go.

    Let me know if this works out for you, and if you have any suggestions for improvements.

    Cheers
    Michel
     

Share This Page