Deploy Luma Web Widget in ServiceNow Portal

Owned by sneha.tripathi
May 04, 2020
4 min read

Luma web widget is provisioned in ServiceNow portal through Widgets. Widgets are created using Widget editor, which is the application for creating and editing widget components. 

Creating a Widget: 

  1. Use the Application Navigator to open Service Portal > Service Portal Configuration. Click the Widget Editor tile on the Service Portal Configuration page.

     

  2. Click on Create a new widget.

     

  3. Provide a Widget Name for the widget. Widget ID will be auto-populated by default. Click on Submit.

     

  4. Replace the sample code in the editor with the HTML code provided below.



    <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>VsaWebChatWidget</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://lumatrial.serviceaide.com/luma-web-widget/latest/luma-web-widget.css" rel="stylesheet" type="text/css"> <style> .luma-chat-toggle { position: fixed; background: #FFF; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16); cursor: pointer; } </style> </head> <body> <div id='botHere'></div> <div class="luma-chat-toggle" onclick="toggleChatWidget()"> <i class="bot-icon"></i> </div> <script type="text/javascript" src="https://lumatrial.serviceaide.com/luma-web-widget/latest/luma-web-widget.js"></script> <script> setTimeout(function(){ var urlParams = window.NOW.user_name; console.log(urlParams); LumaBot({ botName: "Luma", user: { clientUserId: urlParams, additionalProperties: {} }, secretkey: 'sOQfST/muHYPez+7XU1BnDO81qHn87oMeYSoeNC9WWxCqSwsM6fevLaNdaOcYkQrbjTFYlpY0zlRvfI3Hn0BV2OsJ122JSzJXr0UXCp4Bkx2DSl5nfesUjcWIp2URERHHE5SQiEq7RzznAmBupmWG/7k4zXyNnHg7plMImo8hBDjpSNSVjmpnN8eTNqHq05NiGKtvWTzxPEKHvTiSEpNa7trW0/9+uh+I3o0BZ3/BM5dB9XDcU9IQ2ldbswDOMlE2sspocStaqhSlH+dGJROpA==', domain: "https://lumatrial.serviceaide.com", styleOptions: { lumaChatContainer: { width: '400px' } } }, document.getElementById("botHere")); }, 3000); function toggleChatWidget() { LumaBot.toggleChatWidget(); } </script> </body> </html>

  5. Replace the “secretkey” and “domain” in the code above, with the ones obtained from Luma’s Web Widget channel configuration page.

     

  6. Click Save, to save the widget.

     

Adding to a Page in ServiceNow portal

  1. Click on Designer, and select the page to which you would like to add the web widget to. 

     

  2. Search for the web widget in the filter by typing the name provided during Widget creation.



     

  3. Drag and drop the widget to the container of choice, and you should be able to see the web widget loaded to the page. Servicenow will autosave the page.

     

  4. Click on Preview to view the changes. You should be able to see the web widget working with the logged-in user auto-authenticated.

     

  5. Kindly follow the steps (1-4) to add the widget to other pages of the portal.

     

 

 

 

© 2019 Serviceaide 1-650-206-8988 http://www.serviceaide.com info@serviceaide.com