1.0.3 • Published 11 months ago

@defra/flood-webchat v1.0.3

Weekly downloads
-
License
OGL-UK-3.0
Repository
-
Last release
11 months ago

flood-webchat

Useful Links

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

11 months ago

1.0.3

11 months ago

1.0.1

11 months ago

0.0.1-beta.55

12 months ago

0.0.1-beta.54

1 year ago

0.0.1-beta.53

1 year ago

0.0.1-beta.52

1 year ago

0.0.1-beta.50

1 year ago

0.0.1-beta.51

1 year ago

0.0.1-beta.49

1 year ago

0.0.1-beta.48

1 year ago

0.0.1-beta.47

1 year ago

0.0.1-beta.46

1 year ago

0.0.1-beta.45

1 year ago

0.0.1-beta.44

1 year ago

0.0.1-beta.43

1 year ago

0.0.1-beta.42

1 year ago

0.0.1-beta.41

1 year ago

0.0.1-beta.40

1 year ago

0.0.1-beta.39

1 year ago

0.0.1-beta.36

1 year ago

0.0.1-beta.37

1 year ago

0.0.1-beta.34

1 year ago

0.0.1-beta.35

1 year ago

0.0.1-beta.33

1 year ago

0.0.1-beta.32

1 year ago

0.0.1-beta.31

1 year ago

0.0.1-beta.30

1 year ago

0.0.1-beta.29

1 year ago

0.0.1-beta.28

1 year ago

0.0.1-beta.27

1 year ago

0.0.1-beta.26

1 year ago

0.0.1-beta.25

1 year ago

0.0.1-beta.24

2 years ago

0.0.1-beta.23

2 years ago

0.0.1-beta.22

2 years ago

0.0.1-beta.21

2 years ago

0.0.1-beta.20

2 years ago

0.0.1-beta.19

2 years ago

0.0.1-beta.18

2 years ago

0.0.1-beta.17

2 years ago

0.0.1-beta.16

2 years ago

0.0.1-beta.15

2 years ago

0.0.1-beta.12

2 years ago

0.0.1-beta.11

2 years ago

0.0.1-beta.10

2 years ago

0.0.1-beta.9

2 years ago

0.0.1-alpha.13

2 years ago

0.0.1-alpha.12

2 years ago

0.0.1-beta.8

2 years ago

0.0.1-beta.7

2 years ago

0.0.1-beta.6

2 years ago

0.0.1-beta.5

2 years ago

0.0.1-beta.4

2 years ago

0.0.1-beta.3

2 years ago

0.0.1-beta.2

2 years ago

0.0.1-beta.1

2 years ago

0.0.1-alpha.11

2 years ago

0.0.1-alpha.10

2 years ago

0.0.1-alpha.9

2 years ago

0.0.1-alpha.8

2 years ago

0.0.1-alpha.7

2 years ago

0.0.1-alpha.6

2 years ago

0.0.1-alpha.5

2 years ago

0.0.1-alpha.4

2 years ago

0.0.1-alpha.3

2 years ago

0.0.1-alpha.2

2 years ago

0.0.1-alpha.1

2 years ago