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.


Prior to configuring the QuickHelp integration in ServiceNow, please ensure that the global glide.service_portal.search_as_you_type_behavior setting is set to Typeahead. New ServiceNow tenants have this value set, by default, to Suggestions, and will cancel out the Typeahead configuration in the QuickHelp configuration itself. 


  1. Enter sys_properties.list In the Flight Navigator filter at the top left of the Administrator window
  2. Hit Enter (on your keyboard)
  3. Select Name from the Search pulldown menu
  4. Enter glide.service_portal.search_as_you_type_behavior in the Search field
  5. Hit Enter (on your keyboard)
  6. Click glide.service_portal.search_as_you_type_behavior from the results list (should be the first one in the list
  7. Change the Value in the configuration from Suggestion to Typeahead.
    NOTE: If it's already set to Typeahead, great.
  8. Click Update
    NOTE: This change may take up to an hour to populate.




QuickHelp 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)
  3. Search for Portals
  4. Click Portals from the results
  5. Click the active portal that you would like to integrate with QuickHelp search
  6. Scroll down to Search Sources
  7. Click New
  8. In the Search Source config page – enter the Name and ID that you would like to give the integration

  9. 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.  
  10. In the Data Source section, check Is Scripted Source

  11. 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)
  12. Replace the code in the Data fetch script field with the code below (including your Authorization key and Ocp-Apim-Subscription-Key)
  13. Now click the Typeahead section
  14. Ensure that Enable typeahead and Advanced typeaheadconfig are both checked
  15. Using the Typeahead script below, put this code in the Typeahead template field
  16. Click Submit
  17. Type in search criteria in your search text box (something that relates to QuickHelp content)

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


Ordering Results


If you’d like to change the order that your results appear in, then return to Search Sources.

1. Select the Source that you just created. 

2. Scroll to the bottom and you’ll see a list of all the portals that this source is currently used on. 

Graphical user interface, text, application, email 
Description automatically generated 

 

3. Click on the name of Portal that you’d like to re-order. This will take you to a new page.

NOTE: At the bottom of this new page you’ll see the order of all sources for this portal. 


Graphical user interface, text, application, email 
Description automatically generated 

 

NOTE: Larger numbers appear lower in the search results. (e.g.: 100 will appear before 200)

4. Click the number of the source you wish to change

5. Type the new number

6. Click Update to apply your changes

 

NOTE: To control the order of items in your typeahead results, follow the guidance in  this  ServiceNow support thread. 



Search page template


<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>




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.setQueryParameter('utm_source', 'API');
	ws.setQueryParameter('utm_medium', 'ServiceNow');
	ws.setQueryParameter('utm_campaign', 'Search');
	
	ws.setHttpMethod("get");
	ws.setEndpoint(url);
	
	var jsonOutput = ws.execute();	
	
	if(jsonOutput) {
		var response = JSON.parse(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});
        });
		
	}

	return results;
})(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>