Integrate WebChat 2.0 FrontEnd into HTML

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 HTML

1. Edit the HTML where you want to add the WebChat.

2. You can use the demo page url provided by your AnywhereNow representative and add /webchat.bootstrap.js as the url to load the script.

   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

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