Overview: Using APIs, you can integrate 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.


NOTE: You must turn off AI search for this integration.


Before 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: It's okay if it is already set to Typeahead. 
  8. Click Update
    NOTE: This change may take up to an hour to populate.


QuickHelp Integration

  1. To access APIs and obtain the API keys required to send requests, follow the steps in the QuickHelp APIs—Getting Access document.
    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 Search Sources

4. Click NEW

5. In the Search Source config page – enter the Name and ID you would like to give the integration.
(e.g., QuickHelp)

6. At the top of the Search Source page, in the Search page template, use the Search code below
NOTE: You can also use HTML to modify the template to suit your needs.  

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

8. Copy and paste the Data fetch script code below into the data fetch field.

9. Please replace the" ##### Authorization key and #####Ocp-Apim-Subscription-Key" with your keys received in step 1 above.

10. Now click the Typeahead section.

11. Ensure that the Enable typeahead and Advanced typeahead configurations are both checked.

12. Copy and paste the Typeahead script below into the Typeahead template field.

13. Click Submit

14. Click on the newly created source (e.g., QuickHelp)

15. At the bottom of the page in Portals, click Edit...


16. Select the desired Collection (e.g.: Employee Center) to move to Portal List (click the right arrow to move over)

17. Click Save

18. On the Search Source page, click Update



To Test:



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



20. Use the filter (e.g., QuickHelp) at the left to see the QuickHelp results.


 


Ordering Results


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

1. Select the Source that you just created. 

You’ll scroll to the bottom and see a list of all the portals on which this source is currently used. 

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

 

3. Click on the Portal name you’d like to reorder. This will take you to a new page.

NOTE: The order of all sources for this portal is at the bottom of this new page. 


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>