Page Comparison

...

On the Bot dashboard, from more options, click Bot Configuration as shown below.
On the Bot Configuration page, click the Channels tab.
The Channels page appears as shown below.
Select Web Widget from the Configure Channel list.
The Configure Web Widget dialog box appears as shown below.
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.
Click Next to open Customize your Welcome Screen.
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.

Copy the below code to a notepad/any editor and

Edit luma2staging in Line no: 18 9 to your luma environment url
Edit luma2staging in Line no: 39 30 to your luma environment url
Replace the secret key obtained from the previous steps to the line no: 4840
Edit luma2staging in Line no: 49 41 to your luma environment url

Save the file as sharepoint_webwidget.html

Code Block

<iframe id="luma-webwidget" width="980" height="580" src="about:blank" frameborder="0" allowfullscreen="">
</iframe>
<script>
  myIFrame = document.getElementById('luma-webwidget');
  myIFrame = myIFrame.contentWindow ||
    myIFrame.contentDocument.document ||
    myIFrame.contentDocument;
  myIFrame.document.open();
  myIFrame.document.write(
      `<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>`
);
myIFrame.document.close();
</script>

html>

Add the Luma Web widget to SharePoint

To add Luma web widget to SharePoint:

Navigate to Site Contents → Site Assets and Click New to add the sharepoint_webwidget.html file here
Image Added
Navigate back to “Site Pages”.
Image Added
Add a new page or open the page in which you would like to add the web widget.
Image Added
Click on Edit. And in the edit mode, click on “Embed code” webpart.
Image Added

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.

Code Block

<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>

Add the

...

To add Luma web widget to SharePoint:

Login to Sharepoint and navigate to “Site Pages”.
Image Removed
Add a new page or edit the page in which you would like to add the web widget.
Image Removed
Add “Embed code” webpart.
Image Removed
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.
Image RemovedImage Added
Click save to save the changes.
Click on the Icon to get started.
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

Versions Compared

Old Version 16

New Version Current

Key

Add the Luma Web widget to SharePoint