--- sourceDocument: Xanadu Customer Service Management sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/customer-service-management Release : - xanadu ft:locale : - en-US ft:publication_title : - Xanadu Customer Service Management ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # Embed Engagement Messenger in your web application # Embed Engagement Messenger in your web application {#ariaid-title1} * Release version: Xanadu * * Updated August 1, 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read Embed the source code of the messenger module that you configured in your website so that you can enable your customers to start using Engagement Messenger in your website. ## Before you begin * [Activate an Engagement Messenger module](https://servicenow-prod.fluidtopics.net/~LXAQTYZx74VhcBt1T7tZA "Activate the Engagement Messenger module that you configured so that you can embed it in your website."). * Role required: sn_csm_ec.ec_admin {#embed-engagement-messenger-code-in-your-web-application__ul_kvl_4pf_g4b} ## About this task Copy the source code of the messenger module that you activated and paste it in the HTML file of the website where you want to deploy the messenger. Next, depending on the authentication type that you selected for your configured messenger module, you may have to write code for functions to get the ID token and to start and stop the session for a logged-in user in the messenger. ## Procedure 1. Navigate to AllEngagement MessengerModules. 2. In the Edit module column of the messenger module that you want to install in your website, click Edit. The guided configuration view is displayed. 3. Click the Implement tab. 4. If you have done any changes to the Security settings section, click Save. The code of the Engagement Messenger module is updated. 5. Scroll down to the Embed code section and click Copy code. 6. Open the HTML file of your website and paste the copied code before the closing body tag. 7. For a messenger module with OIDC-based or SAMl-based authentication, complete the following configuration. | Authentication type | Action | | OIDC-based | 1. Write code for the getTokenCallBack() function. 2. Call the SN_CSM_EC.onLogin() function whenever users log in to your website. This function enables authenticated users to log in to Engagement Messenger seamlessly when they log in to your website. 3. Call the SN_CSM_EC.onLogout() function whenever users log out from your website. This function enables authenticated users to seamlessly log out from Engagement Messenger and your website. {#embed-engagement-messenger-code-in-your-web-application__ol_dns_wtl_p4b} | | SAML-based | 1. Call the SN_CSM_EC.onLogin() function whenever users log in to your website. This function enables authenticated users to log in to Engagement Messenger seamlessly when they log in to your website. 2. Call the SN_CSM_EC.onLogout() function whenever users log out from your website. This function enables authenticated users to seamlessly log out from Engagement Messenger and your website. {#embed-engagement-messenger-code-in-your-web-application__ol_cmk_25l_p4b} | |-|-| {#embed-engagement-messenger-code-in-your-web-application__choicetable_vhq_vtl_p4b} Note: For more information about setup for OIDC and SAML-based authentication, see [Setting up auto login and logout for Engagement Messenger \[KB1560205\]](https://support.servicenow.com/kb_view.do?sysparm_article=KB1560205) article in the Now Support Knowledge Base. 8. If you enabled the walk-up feature for unauthenticated users, uncomment the //guestWalkupBaseUrl code line and complete the configuration by entering the base URL of your customer support portal. For example, if your customer support portal is https://www.example.com/support, then update the code to guestWalkupBaseUrl = https://www.example.com/support Figure 1. Copy Engagement Messenger code 9. **Optional:** To modify the embed code to set the preferred language in which Engagement Messenger is displayed, do one of the following. | Option | Description | | `lang: {ISO-locale code}` | Enables you to load Engagement Messenger with a fixed language. | | `setLang : getEMLanguage` | Allows you to dynamically switch the language in which Engagement Messenger is displayed. The `getEMLanguage` value can return any ISO-locale code which can be used for messenger language. | |-|-| {#embed-engagement-messenger-code-in-your-web-application__choicetable_gmq_3zs_f5b} The `setLang : getEMLanguage` function takes preference when both parameters are available. However, if the user has set the preferred language in the \[sys_user_preference\] table, Engagement Messenger will be displayed in that language. Note: Beginning with the Xanadu release, the upgraded customers can also modify the embed code to enable language switching. 10. **Optional:** Open the website to which you added the Engagement Messenger code to verify that the launcher icon is available and click the icon to verify that it launches Engagement Messenger. 11. **Optional:** Modify the embed code of Engagement Messenger to integrate Proactive Recommendations on a web page. For more information on using Engagement Messenger to integrate Proactive Recommendations on a web page, see [Use Engagement Messenger embed Code to integrate proactive recommendations on a web page](https://servicenow-prod.fluidtopics.net/70Q0DhamKh3cuGLeuVoGDQ "Modify the embed code of Engagement Messenger to enable recommendations and pass the search query for recommendations based on AI Search."). ## What to do next Open the website that you added the Engagement Messenger code to and verify that the launcher icon of the messenger is available. Click the icon to launch the Engagement Messenger. You can also embed Engagement Messenger in your native iOS and android applications using Now Mobile SDK: * [Embed Engagement Messenger in a native iOS app using Now Mobile SDK \[KB1587276\]](https://support.servicenow.com/kb_view.do?sysparm_article=KB1587276) * [Embed Engagement Messenger in a native android app using Now Mobile SDK \[KB1587611\]](https://support.servicenow.com/kb_view.do?sysparm_article=KB1587611) {#embed-engagement-messenger-code-in-your-web-application__ul_w2c_2vq_21c} *[\>]: and then