@defra/flood-webchat 0.0.1-alpha.1 → 0.0.1-alpha.10

package/README.md

@@ -1,25 +1,91 @@
 # flood-webchat
 
-## Development
-A demo server with hot module reloading can be started at http://localhost:9000 by running:
+## Useful Links
+
+- [Development Guide](./docs/development-guide.md)
+- [How to Publish](./docs/how-to-publish.md)
+
+## Usage
+
+### Installation
+
+Run:
 
 ```shell
-npm run dev
+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:
+
+```js
+
+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:
+
+```js
+import * as webchat from '@defra/flood-webchat';
+
+if (document.getElementById('wc-availability')) {
+  webchat.init('wc-availability', {
+    brandId: 'your brand id',
+    channelId: 'your channel id',
+    environmentName: 'your environment name',
+    availabilityEndpoint: '/webchat-availability',
+    audioUrl: 'path/to/notification.mp3'
+  })
+}
 ```
 
-## How to Publish
+### 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.
 
-### A Pre-Release
+```html
+
+<div id="wc-availability">
+    <p>Webchat is not supported with your browser</p>
+</div>
+```
 
-Via the GitHub GUI, create a release off your branch with a name matching a semver version pattern for the appropriate
-version with an added pre-release identifier, and check the pre-release identifier.
-For example if the latest published version was `v1.2.3` and you wish to publish a pre-release from your "cool-update"
-branch, name the release: `v1.2.4-cool-update.1`
+And finally a script tag, to prevent the webchat widget "flashing" on page load/reload.
 
-### A Release
+```html
 
-Via the GitHub GUI, create a release off the main branch with a name matching a semver version pattern with the
-appropriate version bump. For example if the latest published version was `v1.2.3` and you wish to release:
-- a patch update, the new release should be called `v1.2.4`
-- a minor update, the new release should be called `v1.3.0`
-- a major update, the new release should be called `v2.0.0`
+<script>
+    if (window.location.hash === '#webchat' && window.matchMedia('(max-width: 640px)').matches) {
+        document.body.classList.add('wc-hidden')
+    }
+</script>
+```

package/babel.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
+}