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 Accessdocument 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. At the top of the Search Source page, in the Search page template itself, use the Search code below.  NOTE: You can also use HTML to modify the template to suit your own needs.   
  8. In the Data Source section, check Is Scripted Source.


  9. 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).
  10. Replace the code in the Data fetch script field with the code below (including your Authorization key and Ocp-Apim-Subscription-Key)
  11. Now click the Typeahead section.
  12. Ensure that Enable typeahead and Advanced typeaheadconfig are both checked.
  13. Using the Typeahead script below, put this code in the Typeahead template field.
  14. Click Submit.
  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 url = "https://qhapi.quickhelp.com/v1/Search/Results";
	var numResultsToReturn = 10; // NOTE: If you would like, you can configure the amount of results that QH returns by changing this number
	
	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.setQueryParameter('limit', numResultsToReturn);
	ws.setQueryParameter('typeId', 3);
	
	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});
        });
		
	}
	// ServiceNow displays the results in reverse order
	return results.reverse();
})(query);


Typeahead script


<div style="cursor: pointer">
  <i class="ta-img" style="background-image:url('https://quickhelp.blob.core.windows.net/quickhelp-favicons-new/favicon-32x32.png')"></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>