Using APIs, you can get your ServiceNow instance to integrate with QuickHelp and help your users help themselves. This support document details the steps needed to complete the search integration.


  1. Follow the steps in the QuickHelp APIs – Getting Access document to access APIs and to get the API keys required to send requests.
    1. The API key from the QuickHelp Admin portal will be used in your API requests as the Authorization header (you will replace it in the template code provided in step 7). Click here to go to the QuickHelp Admin portal.
    2. The key from the Azure API portal will be used in your API requests as the Ocp-Apim-Subscription-Key header. Click here to go to the Azure API portal.
  2. Sign in to your ServiceNow instance (as an Admin), and search for Portals.

  3. Click the active portal that you would like to integrate with QuickHelp search.
  4. Scroll down to Search Sources.
  5. Click New.


  6. In the Search Source config page – enter the name and ID that you would like to give the Search.


  7. In the Data Source section, check Is Scripted Source.


  8. Using the Data fetch script code below, replace the Authorization key with the API key you received from QuickHelp Admin portal and the Ocp-Apim-Subscription-Key with the key from the Azure API portal (found in step 1).
  9. Replace the code in the Data fetch script field with the code below (including your Authorization key and Ocp-Apim-Subscription-Key)
  10. Now click the Typeahead section.
  11. Ensure that Enable typeahead and Advanced typeaheadconfig are both checked.
  12. Using the Typeahead script below, put this code in the Typeahead template field.
  13. Click Submit.
  14. On your Search page template itself, use the Search code below.  NOTE: You can also use HTML to modify the template to suit your own needs.   
  15. You can test the new search by scrolling down in the Portal configuration and clicking Try It.


  16. Type in search criteria in your search text box (something that relates to QuickHelp content).


  17. Use the QuickHelp filter (or whatever you named the Search Source) at the left to see the QuickHelp results.

Data fetch script


(function(query) {
              
              var results = [];
              var reversedResults = []; // Used to display results in correct order
              
              var url = "https://qhapi.quickhelp.com/v1/Search/Results";
              
              var ws = new sn_ws.RESTMessageV2();
              
              // TODO: ENTER IN YOUR AUTHORIZATION AND SUBSCRIPTION KEY HERE.
              ws.setRequestHeader('Authorization','########-####-####-####-############');
              ws.setRequestHeader('Ocp-Apim-Subscription-Key','################################');
              
              ws.setQueryParameter('query', encodeURI(query));
              
              ws.setHttpMethod("get");
              ws.setEndpoint(url);
              
              var jsonOutput = ws.execute();   
              
              if(jsonOutput) {
                           var response = new JSON().decode(jsonOutput.getBody());  
                           
                           // Format result for how it should appear in search results
                           response.forEach(function(result) {
            result.url = result.url + '?utm_source=API&utm_medium=ServiceNow&utm_campaign=Search';
                                         results.push({"url": result.url, "target": "_blank", "primary": result.title, "description": result.description, "thumbnail": result.thumbnail});
        });
                           
                           // Flip results for ServiceNow to display properly
                           for(var i = results.length; i > 0; --i) {
                                         reversedResults.push(results[i - 1]);
                           }
              }
              
              return reversedResults;
})(query);


Typeahead script


<div style="cursor: pointer">
  <i class="ta-img" style="background-image:url('https://www.brainstorminc.com/Content/images/BSI_Symbol_RGB.svg')"></i>
  <span ng-bind-html='match.label'></span>
</div>


Search code

<div style="box-sizing: border-box; display: flex; align-items: center;">
  <div style="display: inline-block; width: 20%; margin-right: 20px;">
              <img src="{{item.thumbnail}}" style="width: 100%;"/>
  </div>
  <div style="display: inline-block; width: 80%;">
    <a href="{{item.url}}" target="_blank" class="h4 text-primary m-b-sm block">   
    <span>{{item.primary}}</span>
    </a>
    <p>
      {{item.description}}
    </p>
  </div>
</div>