@defra/flood-webchat 0.0.1-alpha.4 → 0.0.1-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -15,6 +15,11 @@ Run:
|
|
|
15
15
|
npm i @defra/flood-webchat
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
+
### Assets
|
|
19
|
+
|
|
20
|
+
You need to copy `./assets/audio/notification.mp3` to your 'assets' directory. This is the notification sound users will
|
|
21
|
+
hear when they receive a message.
|
|
22
|
+
|
|
18
23
|
### Server Side Javascript
|
|
19
24
|
|
|
20
25
|
You will need to implement an endpoint on your server which checks the availability of webchat. An express example can
|
|
@@ -56,7 +61,8 @@ if (document.getElementById('wc-availability')) {
|
|
|
56
61
|
brandId: 'your brand id',
|
|
57
62
|
channelId: 'your channel id',
|
|
58
63
|
environmentName: 'your environment name',
|
|
59
|
-
availabilityEndpoint: '/webchat-availability'
|
|
64
|
+
availabilityEndpoint: '/webchat-availability',
|
|
65
|
+
audioUrl: 'path/to/notification.mp3'
|
|
60
66
|
})
|
|
61
67
|
}
|
|
62
68
|
```
|
|
@@ -65,14 +71,18 @@ if (document.getElementById('wc-availability')) {
|
|
|
65
71
|
|
|
66
72
|
In your html, will need to add the "Start Chat" link with some placeholder text for if webchat is not supported in the
|
|
67
73
|
user's browser.
|
|
74
|
+
|
|
68
75
|
```html
|
|
76
|
+
|
|
69
77
|
<div id="wc-availability">
|
|
70
78
|
<p>Webchat is not supported with your browser</p>
|
|
71
79
|
</div>
|
|
72
80
|
```
|
|
73
81
|
|
|
74
82
|
And finally a script tag, to prevent the webchat widget "flashing" on page load/reload.
|
|
83
|
+
|
|
75
84
|
```html
|
|
85
|
+
|
|
76
86
|
<script>
|
|
77
87
|
if (window.location.hash === '#webchat' && window.matchMedia('(max-width: 640px)').matches) {
|
|
78
88
|
document.body.classList.add('wc-hidden')
|
|
Binary file
|
package/package.json
CHANGED
package/src/client/index.js
CHANGED
|
@@ -7,6 +7,7 @@ import WebChat from './lib/webchat.js'
|
|
|
7
7
|
* @param {string} options.channelId
|
|
8
8
|
* @param {string} options.environmentName
|
|
9
9
|
* @param {string} options.availabilityEndpoint
|
|
10
|
+
* @param {string} options.audioUrl
|
|
10
11
|
**/
|
|
11
12
|
export function init (id, options) {
|
|
12
13
|
return new WebChat(id, options)
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
class Notification {
|
|
2
|
-
constructor () {
|
|
3
|
-
const url = '/public/sounds/notification.mp3'
|
|
1
|
+
export default class Notification {
|
|
2
|
+
constructor (url) {
|
|
4
3
|
this._url = url
|
|
5
4
|
|
|
6
5
|
// Create context
|
|
@@ -58,5 +57,3 @@ class Notification {
|
|
|
58
57
|
source.start()
|
|
59
58
|
}
|
|
60
59
|
}
|
|
61
|
-
|
|
62
|
-
export default Notification
|
|
@@ -18,12 +18,14 @@ class WebChat {
|
|
|
18
18
|
* @param {string} options.channelId
|
|
19
19
|
* @param {string} options.environmentName
|
|
20
20
|
* @param {string} options.availabilityEndpoint
|
|
21
|
+
* @param {string} options.audioUrl
|
|
21
22
|
**/
|
|
22
23
|
constructor (id, options) {
|
|
23
24
|
this.id = id
|
|
24
25
|
this.brandId = options.brandId
|
|
25
26
|
this.channelId = options.channelId
|
|
26
27
|
this.availabilityEndpoint = options.availabilityEndpoint
|
|
28
|
+
this.audioUrl = options.audioUrl
|
|
27
29
|
this.environment = EnvironmentName[options.environmentName]
|
|
28
30
|
|
|
29
31
|
// Initialise state
|
|
@@ -39,7 +41,7 @@ class WebChat {
|
|
|
39
41
|
this.skiplink = new Skiplink()
|
|
40
42
|
|
|
41
43
|
// Initialise notification
|
|
42
|
-
this.notification = new Notification()
|
|
44
|
+
this.notification = new Notification(this.audioUrl)
|
|
43
45
|
|
|
44
46
|
// Reinstate html visiblity (avoid refresh flicker)
|
|
45
47
|
if (document.body.classList.contains('wc-hidden')) {
|