Integrate WebChat 2.0 FrontEnd into Wordpress

Introduction

The WebChat application can be added to your Wordpress by adding some scripts to your template. The scripts will load WebChat into your page.

Enable webchat into Wordpress

1. Login to your Wordpress admin center

2. Navigate to your Theme Customizer (Appearance > Customize)

3. Select Widgets and an available Footer slot (For example Widgets > Footer 1)

4. Add Custom HTML

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

6. 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;
   }

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