Dialogue Cloud

On Premises

Integrate WebChat 2.0 FrontEnd into SharePoint

Note

An Enterprise license or higher is required to access these features.

Note

An additional AnywhereNow WebAgent for Omnichannel license is required.

Introduction

The WebChat application can be added to your SharePoint by adding some scripts to your page or pages. The scripts will load WebChat into your page.

Enable webchat into a SharePoint Classic page

Prerequisites

Steps

This part will explain the basic steps on how to enable the AnywhereNow on a SharePoint Classic Page.

The AnywhereNow WebChat client will be added as a script into the SharePoint site.

  1. Add or edit a page in SharePoint where you want to add the WebChat.

  2. Use the URL where you have deployed the WebChat Frontend and include the webchat.bootstrap.js file from the webchat folder on your website:

    Note

    Without the correct configuration object the WebChat FrontEnd will by default be set to hidden. See the next step.

    Copy
    HTML
    <script src="path/to/webchat/webchat.bootstrap.js"></script>
    <script> WebChat.load() </script>

  3. With the following Typescript definition of the configuration object:

    Note

    We will discuss the various properties of this configuration object in additional configurations, see: WebChat 2.0 for WebAgent Additional Configuration

    Copy
    Script
    interface Configuration {
        teaseMessageSettings?: TeaseMessageSettings;
        templates?: Templates;
        parent?: HTMLElement;
    }

  4. Save the Page.

Example with configuration object to show the WebChat FrontEnd

Copy
HTML
<script src="path/to/webchat/webchat.bootstrap.js"></script>
<script> 
    const config = {
        available: {
            state: 'Enabled'
        },
        away: {
            state: 'Enabled'
        },
        busy: {
            state: 'Enabled'
        },
        offline: {
            state: 'Enabled'
        }
    };
    WebChat.load(config);
</script>

Enable webchat into SharePoint Modern site

Prerequisites

Steps

This part will explain the basic steps on how to enable the AnywhereNow on a SharePoint Teams site.

The AnywhereNow WebChat client will be added as an Embedded section into the SharePoint site. The look and feel and behavior of the AnywhereNow WebChat client will be according to the limitations of an Embedded section. AnywhereNow cannot alter or change this.

  1. Adjust the bootstrap url in the provided aspx file.

    Copy
    WebChat.aspx
    <html><head><script type="text/javascript" src="https://[service].[region].anywhere365.cloud/WebChat20_[ucc_name]/webchat.bootstrap.js"></script><script>window.onload=function(){let e={storageLocation:localStorage,available:{teaseMessageSettings:{message:{en:"Hi\nHow can I help?",nl:"Hoi\nKunnen wij u helpen?"},showAsMessage:!0,showAsTeaser:!0,onTimeout:5e3},state:"Enabled"},away:{teaseMessageSettings:{message:{en:"Hi\nWe are closed now.",nl:"Hoi\nOp dit moment zijn we gesloten."},showAsMessage:!0,showAsTeaser:!0,onTimeout:5e3},state:"Enabled"},offline:{teaseMessageSettings:{message:{en:"Hi\nWe are closed now.",nl:"Hi\n Op dit moment zijn we gesloten."},showAsMessage:!0,showAsTeaser:!0,onTimeout:5e3},state:"Enabled"}};WebChat.load(e)};</script></head><body><div class="paragraph integrated-webchat-container"><div class="integrated-content"></div><div id="webchat-target"></div></div></body></html>

    Make sure that the url points to the correct ucc.

  2. Go to the SharePoint site where you want to implement the AnywhereNow WebChat.

    Make sure to connect as Administrator

  3. Click on “Site contents”

  4. Click on “Site Assets”

  5. Upload the ASPX file to this library

  6. Click (open) the ASPX file.

    A new tab will open. A working WebChat should be visible.

    Copy the URL. You will need this later on.

  7. Go back to the home page

  8. Click on “Edit”

  9. Create a new section.

    We will use the “Vertical section”. This will add a section to the right.

  10. Click on + to add a new web part

  11. Enter an EMBED web part

  12. Add the following text

    URL = the url you saved in step 6.

    Copy
    Embeded code
    <iframe src="<URL>" height="600" width="300" iframe=""></iframe>

  13. The page should now look like this

    You can opt to disable the option “Resize to fit the page”

  14. Click on “Republish” to activate the site.

  15. All steps are done.

The AnywhereNow WebChat is now active on the selected SharePoint site.