Use Engagement Messenger embed Code to integrate proactive recommendations on a web page

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read

    • Modify the embed code of Engagement Messenger to enable recommendations and pass the search query for recommendations based on AI Search.

    Before you begin

    Procedure

    1. Navigate to All > Engagement Messenger > Modules.
    2. Select the Engagement Messenger module that you want to install on your website.
    3. In the Edit module column, select Edit.
    4. In the Configure Engagement Messenger module, select the Implement tab.
    5. In a text editor, open the HTML file of the web page on your website where you integrate Engagement Messenger.
    6. In the Implement tab, copy the code from the Embed code section.
    7. Paste the code that you copied into the text file before the closing body tag.
    8. Enable recommendations for a specific page in messenger by adding the parameter enableRecommendations: true in the embed code.
      When a user enters a search term in Engagement Messenger, the website's URL slug (the last part of the URL) is included in the search query by default. The URL slug conditions for the search query entered in the messenger search bar are as follows:
      • If a single forward slash is at the end of the URL, then no search term is picked. For example, https://example.service-now.com/.
      • If a term is surrounded by forward slashes at the end of the URL, the enclosed text is considered to be a search term. For example, in the URL https://example.service-now.com/product-xyz/, product xyz is considered a search term.
      • If a single forward slash is followed by text, that text is considered to be a search term. For example, in the URL https://example.service-now.com/search_string search string is considered as a search term.
      The URL slug is used to deduce the search query as follows:
      • All the special characters are replaced by a space. For example, in the URL https://example.service-now.com/product-xyz, the search term is "product xyz."
      • Any file extension is ignored. For example, in the URL https://example.service-now/product.html, the search term is "product."
    9. Enable recommendations at the module level.
      1. Navigate to All > Engagement Messenger > Modules.
      2. Select your Engagement Messenger module.
      3. Select Edit.
      4. In the Configure Engagement Messenger module, select the Behavior tab.
      5. Enable the Enable recommendations toggle switch.
    10. Optional: Add custom logic when passing a search query parameter to the AI Search by passing a function callback as the value for a parameter getAISRecommendationsContext.
      The following example shows the modified code to generate proactive recommendations with the custom logic for passing a search context query.
      ‹script src="https://example.service-now.com/scripts/sn_csm_ec.js"></script>
  ‹script>
  SN_CSM_EC.init({
              moduleID:"https://instancename.service-now.com/<sys_id>",
               loadFeature: SN CSM EC. loadEMFeature(),
               enableRecommendations: true, 
               getAISRecommendationsContext: function getSearchQuery(){
               //Insert your code here to fetch the search query string return product xyz
}

  };
  </script>
    11. Save and publish the HTML file.

    Result

    Engagement Messenger shows recommendations based on the context provided by the third-party website.

    Example

    The following example shows the modified code to generate default proactive recommendations for the default context.
    ‹script src="https://example.service-now.com/scripts/sn_csm_ec.js"></script>
  ‹script>
  SN_CSM_EC.init({
              moduleID:"https://instancename.service-now.com/<sys_id>",
               loadFeature: SN CSM EC. loadEMFeature(),
               enableRecommendations: true 
              }

  };
  </script>