flood-webchat

Useful Links

• Development Guide
• How to Publish

Usage

Installation

Run:

npm i @defra/flood-webchat

Assets

You need to copy ./assets/audio/notification.mp3 to your 'assets' directory. This is the notification sound users will hear when they receive a message.

Server Side Javascript

You will need to implement an endpoint on your server which checks the availability of webchat. An express example can be seen below:

import getAvailability from '@defra/flood-webchat'
//... the rest of your server setup
const webchatOptions = {
  clientId: process.env.CXONE_CLIENT_ID,
  clientSecret: process.env.CXONE_CLIENT_SECRET,
  accessKey: process.env.CXONE_ACCESS_KEY,
  accessSecret: process.env.CXONE_ACCESS_SECRET,
  skillEndpoint: process.env.CXONE_SKILL_ENDPOINT,
  hoursEndpoint: process.env.CXONE_HOURS_ENDPOINT,
  maxQueueCount: process.env.CXONE_MAX_QUEUE_COUNT
}

app.get('/webchat-availability', async (req, res, next) => {
  try {
    const response = await getAvailability(webchatOptions)
    return res.status(200).json(response)
  } catch (err) {
    next(err)
  }
})

Client Side Javascript

You will also need to initialise webchat in your client side code:

import * as webchat from '@defra/flood-webchat';

if (document.getElementById('wc-availability')) {
  webchat.init(document.querySelector('#wc-availability'), {
    brandId: 'your brand id',
    channelId: 'your channel id',
    environmentName: 'your environment name',
    availabilityEndpoint: '/webchat-availability',
    audioUrl: 'path/to/notification.mp3'
  })
}

HTML

In your html, will need to add the "Start Chat" link with some placeholder text for if webchat is not supported in the user's browser.

<div id="wc-availability">
    <p>Webchat is not supported with your browser</p>
</div>

Add this html below the govuk main skip link, for the webchat skip link to be added to the page:

<div id="webchat-skip-link-container"></div>

And finally a script tag, to prevent the webchat widget "flashing" on page load/reload.

<script>
    if (window.location.hash === '#webchat' && window.matchMedia('(max-width: 640px)').matches) {
        document.body.classList.add('wc-hidden')
    }
</script>