Ratnakar7
Mega Sage
Mega Sage

Transform your web presence with ServiceNow's Engagement Messenger and deliver the interactive experience your visitors desire.


ServiceNow's Engagement Messenger is a powerful tool that allows organizations to engage with their website visitors in a meaningful way. By embedding the engagement messenger with your organization's web applications such as site and portal, you can enable your visitors to get the information they need without having to navigate through multiple pages or forms.

The process of embedding the engagement messenger is straightforward, and ServiceNow provides comprehensive documentation on how to do it. (Refer Embed Engagement Messenger in your web application)

Once it is done, you can start customizing your web pages to make them more interactive. You can, for example, populate service catalog request forms, KB articles, and connect live agents within the engagement messenger chatbot when a user clicks on a button or hyperlink.

ServiceNow's Engagement Messenger supports contextual launch supported features that allow you to customize the user experience. (refer Feature context parameters supported in Engagement Messenger)

Here are a few demonstrations of these features:

  1. CATALOG_ITEM: When a user clicks on a button, it populates the service catalog request form directly, eliminating the need for the user to navigate to the form manually.
    catalog_item (3).gif

     

    - Created "Free Trial" Catalog Item in ServiceNow and copied sys_id of the same.
    Ratnakar7_0-1703056434633.png

     

    - Defined the free_trl() function under <script> section of 'DRONES' web site
    function free_trl(){
        SN_CSM_EC.init({
    	moduleID: "https://your_instance_name.service-now.com/#5fde15ce1bc4f140270b2f40604bccbd",
    	loadFeature: { 
    	            feature: "CATALOG_ITEM", 
    	            openOnLoad: true,
    	            params: { 
    		        "sys_id": "e5958d731s51e450270b1f40604bcbd9" //paste the sys_id copied in above step.
    	            } 
                }   
        });
    }​

    - Calling the free_trl()  function from "Get Free Trial" button-anchor tag of 'DRONES' web site
     <a class="btn" href="javascript&colon;free_trl()">Get Free Tiral</a>​
  2. VIEW_ARTICLE: When a user clicks on a hyperlink, it populates the KB article directly, eliminating the need for the user to navigate to the article manually.
    view_article.gif

    - Created KB Article in ServiceNow and copied the sys_id of the same.
    Ratnakar7_1-1703059214902.png

     


    - Defined learnMore() function under <script> section of 'DRONES' web site.
    function learnMore(){
        SN_CSM_EC.init({
    	moduleID: "https://your_instance_name.service-now.com/#4fae23ce1bc3f150270b2f40604bcbbf",
    	loadFeature: { 
    	            feature: "VIEW_ARTICLE", 
    	            openOnLoad: true,
    	            params: { 
                    "sys_kb_id": "1f2301c51fd1e553270b2d40604bcb62" //paste sys_id copied from above step.
    	            } 
    }
    });
    }

    - Calling learnMore() function from "
    Click here to learn more..!" hyperlink-anchor tag of 'DRONES' web site.
     <a href="javascript&colon;learnMore()"> >>Click here to learn more..! </a>

     

  3. CHAT: When a user clicks on a button, it connects them to a live agent directly, eliminating the need for the user to navigate and find the respective live agent topic.
    live-agent (1).gif

    - Created context variable to get sysparm_queue value to route the chat request to respective group.

    Ratnakar7_0-1703060308892.png

    - Created advance work assignment Queue with condition as context vaiable-queue is 'drone_support'

    Ratnakar7_1-1703060526464.png

    - Copy the sys_id  of existing live_agent support topic from sys_cs_topic table

    Ratnakar7_2-1703063270915.png


    - Defined chatWithUs()  function under <script> section of 'DRONES' web site.

    function chatWithUs(){
        SN_CSM_EC.init({
    	moduleID: "https://your_instance_name.service-now.com/#3fde22ce1vc3f450230b2f40604bccvd",
    	loadFeature: { 
    	            feature: "CHAT", 
    	            openOnLoad: true,
    	            params: { 
                    "topic_id": "cs2de45004130010cf8cddeeff7b12dd", // paste the sys_id copied in above step
                    "sysparm_queue":"drone_support" //pass the value to context vairable to route the chat request.
    	            } 
    }
    });
    }


    - Calling chatWithUs()  function from 'Chat with US' button-anchor tag of 'DRONES web site.

    <a class="btn" href="javascript&colon;chatWithUs()">Chat with Us</a>

In conclusion, ServiceNow's Engagement Messenger is an excellent tool to improve your organization's web properties and provide your visitors with the interactive experience they crave. By leveraging its contextual launch supported features, you can customize the user experience and streamline the process of accessing the information they need.



Comments
Varshith Kuraga
Tera Guru

@Ratnakar7  can we also place the engagement messenger in the Service Portal?

Ratnakar7
Mega Sage
Mega Sage

@Varshith Kuraga , Yes we can place EM in the Service Portal with writing embeddable code in HTML section of widget like below:

Ratnakar7_0-1704881533594.png

 

Thanks,

Ratnakar

 

 

Adarsh Gunjan
Tera Expert

@Ratnakar7 Engagement messenger icon is showing on my website but i am getting error like:- my instance name refused to connect.

I haven't created any idp because  i am using my own website and it doesn't have any type of authentication

can you help me to resolve this error.

Ratnakar7
Mega Sage
Mega Sage

Hi @Adarsh Gunjan ,

Please make sure you have configured System properties, CORS rule and HTTP response header in ServiceNow for your website.

Below is the example:


-> System Properties:
com.glide.cs.embed.xframe_options : ALLOW-FROM  https://www.i9chatbot.cf
com.glide.cs.embed.csp_frame_ancestors : frame-ancestors 'self' https://www.i9chatbot.cf
 
-> CORS Rule:
Ratnakar7_0-1707470461060.png

 

-> HTTP Response Header:
 Ratnakar7_1-1707470704536.png
Content-Security-Policy
frame-ancestors 'self' https://www.i9chatbot.cf

Thanks,
Ratnakar
 
Adarsh Gunjan
Tera Expert

Thanks @Ratnakar7  I haven't configured this 

com.glide.cs.embed.xframe_options : ALLOW-FROM  https://www.i9chatbot.cf
com.glide.cs.embed.csp_frame_ancestors : frame-ancestors 'self' https://www.i9chatbot.cf
now only chat with an agent option is coming , not any other option like featured articles,  and for custom feature i have created using incident table, it is not showing any record
Joginder
Tera Contributor

I am also looking for the solution of above query.

ThiagoA69577959
Giga Explorer

I'm getting the following error when opening it in an external website.

ThiagoA69577959_0-1758805514996.png
The Bot opens but the topic is not initialized.

ThiagoA69577959_1-1758805584436.png

 

The topic is also with public role assigned. The Module of engagement messenger is assigned to be used for unauthenticated users.

I've tried all the options 

Version history
Last update:
‎12-20-2023 01:34 AM
Updated by:
Contributors