Advanced Configuration

ServiceNow Service Portal Integration

Customising the Search Widget in Service Portal

  1. Navigate to Service Portal > Widgets > New
  2. Create a new Search Widget with the parameters provided below.
<!-- placeholder for where the application will be injected -->
<div id="ai_classifier_pane">
   <app></app>
</div>
<!-- placeholder for where the 'how can we help' form is injected -->
<div id="how_can_we_help">
    <how-can-we-help></how-can-we-help>
</div>
 
<!-- a hidden element used only for retrieving the configuration from the server  -->
<!-- On the server, we JSON the configuration and place it in the config element  -->
<!-- using Angulars data binding syntax. We retrieve that from the script tag and -->
<!-- use that for the bootstrap.                                                  -->
<div id="sofi_init_config" style="display: none;">{{ data.config }}</div>
 
<script eval="true">
    setTimeout(function() {
        // Get the configuration from the Angular item 
        var configurationEl = document.getElementById("sofi_init_config");
        __SofiGlobalConfig = JSON.parse("" + configurationEl.innerText);
 
        // Create the script and style links we need to bootstrap.
        var styleSheetEl = document.createElement("link");
        styleSheetEl.setAttribute("type", "text/css");
        styleSheetEl.setAttribute("rel", "stylesheet");
        styleSheetEl.setAttribute("href", __SofiGlobalConfig.config.settings.client_base_url.css);
        document.body.appendChild(styleSheetEl);
 
        var scriptEl = document.createElement("script");
        scriptEl.setAttribute("src", "" + __SofiGlobalConfig.config.settings.client_base_url.script);
        document.body.appendChild(scriptEl);
    });
     
    // Temporary plug to allow the SoapboxAIClient to fire, as it was initially assuming it would be used on a form
    if (window.g_form === undefined) {
        window.g_form = {
            getTableName: function() {
                return "none";
            },
            getFormElement: function() {
            },
            getUniqueValue: function() {
                return null;
            }
        };
    }
     
    if (window.addOnSubmitEvent === undefined) {
        window.addOnSubmitEvent = function() {};
    }
</script>
  1. Open the Homepage of your Service Portal and replace the "Homepage Search" with the new Sofi Widget.