Configure Web widget for SharePoint 2016 server (using embed code)

Owned by priti.hota (Deactivated)
Last updated: May 18, 2020 by Dibin Dixit Murali (Unlicensed)
5 min read

 

This article describes the process to configure Web widget for SharePoint 2016 server using embed code.

Prerequisites

Before adding the chat channel to SharePoint, ensure the following prerequisites are met:

  1. To add the web widget, you must be the Administrator of the SharePoint. 

  2. Navigate to the Sharepoint path where you want to configure the Web widget.

Enable Web widget Channel in Skills Builder

To enable Web Widget in the Skills Builder, do the following: 

  1. On the Bot dashboard, from more options, click Bot Configuration as shown below.

  2. On the Bot Configuration page, click the Channels tab.
    The Channels page appears as shown below.

     

  3. Select Web Widget from the Configure Channel list.
    The Configure Web Widget dialog box appears as shown below.

     

  4. Copy the Secret Key, the Head code and finally the Body code and retain them in an easily accessible location such as notepad or a text editor tool. These details will be used later when adjusting the web widget code on your website. You can use the copy icon to the right of each section to simplify the operation. 
    Note
    The secret key is a long series of characters. In this screenshot, we made it xyz as to not expose the secret key externally.

  5. Click Next to open Customize your Welcome Screen.

     

  6. Click Configure to enable the Web Widget channel. You can set the Web widget to Inactive if you do not want this channel to be available to users.
    The configured web widget is shown on the Channels page.

     

    • If required, use the toggle button to make the channel inactive.  

    • If required, use the edit button to edit the web widget details.

  7. Copy the below code to a notepad/any editor and

    1. Edit luma2staging in Line no: 9 to your luma environment url

    2. Edit luma2staging in Line no: 30 to your luma environment url

    3. Replace the secret key obtained from the previous steps to the line no: 40

    4. Edit luma2staging in Line no: 41 to your luma environment url

    5. Save the file as sharepoint_webwidget.html

      <html> <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://luma2staging.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://luma2staging.serviceaide.com/luma-web-widget/latest/luma-web-widget.js"></script> <script> window.onmessage = function(e){ cosole.log(e); LumaBot({ botName: "Demo bot", user: { clientUserId: e.data, additionalProperties: {} }, secretkey: 'sOQfST/muHYPez+7XU1BnNAGSxnqCIVu/GYYPlQd57Zxy+g3ZyD8EYf0dqz5cpPT/R0Bg+Jpbl+RDvx33utnnq1BlhPDD+F1RiVtMnusiRQmLI2AZ6snBEuxKgmH7gwtqC9W6vG8JdAJ5PYA8YROTIZUJwXljoe8IlPD7eTyQDlYbIIDc4UJXZG96mypjvW3iGKtvWTzxPEKHvTiSEpNa3BgEmsMc9FGC0tpIhTAss4USQDfnFwrUvR7Ieemz4eq4rSYK91rVfE7ao7uBsgo1w==', domain: "https://luma2staging.serviceaide.com", styleOptions: { lumaChatContainer: { width: '400px' } } }, document.getElementById("botHere")); } function toggleChatWidget() { console.log('toggle clicked'); LumaBot.toggleChatWidget(); } </script> </body> </html>

Add the Luma Web widget to SharePoint

To add Luma web widget to SharePoint:

  1. Navigate to Site Contents → Site Assets and Click New to add the sharepoint_webwidget.html file here

     

  2. Navigate back to “Site Pages”.

     

  3. Add a new page or open the page in which you would like to add the web widget.

     

  4. Click on Edit. And in the edit mode, click on “Embed code” webpart.

     

  5. Add the below iframe code to it, and edit the src url (http://win-p126rsipnri/sites/demopage/SiteAssets/sharepoint_webwidget.html) in line no:1, to that of your html page in Site assets.

    <iframe id="luma-webwidget" width="1460" height="580" src="http://win-p126rsipnri/sites/demopage/SiteAssets/sharepoint_webwidget.html" frameborder="0" allowfullscreen=""></iframe> <script src="/_layouts/15/SP.Runtime.js" type="text/javascript"></script> <script src="/_layouts/15/SP.js" type="text/javascript"></script> <script type="text/javascript"> ExecuteOrDelayUntilScriptLoaded(GetCurrentUserInfo,'sp.js'); // if the above function doesn't work try to use the below one //SP.SOD.executeFunc('sp.js', 'SP.ClientContext', GetCurrentUserInfo); var currentUser; function GetCurrentUserInfo(){ var cx = new SP.ClientContext.get_current(); currentUser = cx.get_web().get_currentUser(); cx.load(currentUser); cx.executeQueryAsync(Function.createDelegate(this,this.onSucceeded), Function.createDelegate(this,this.onFailed)); } function onSucceeded() { console.log(currentUser.get_email()); var email = currentUser.get_email(); var myIframe = document.getElementById("luma-webwidget"); myIframe.contentWindow.postMessage(email, '*'); } function onFailed(sender, args) { alert('Error: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace()); } </script>

  6. Add the iframe code which you saved earlier in the notepad here and click Insert. By this time you should be able to see the web widget in the preview.

     

  7. Click save to save the changes.

     

  8. Click on the Icon to get started.

     

  9. Please alter the iframe width and height value to position the web widget as you like, by editing the webpart’s snippet line no: 1

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