cognigy / webchatplugins

A collection of example plugins for the Cognigy Webchat as well as a developer guide to write your own plugins.

Cognigy Webchat Plugins

This repository contains example plugins for the Cognigy Webchat. Additionally, it contains a guide to get you started for plugin development.

Introduction

This guide will help getting you started building cognigy webchat plugins. While this page is focused primarily on basic concepts, you may want to jump in and build a plugin, see some explanatory examples or dive into the API reference.

• Get Started
• Examples
• API Reference
• Releases

Plugin Concepts

Display Types

Inline Message

By default, messages will get rendered inline, with an avatar next to it, aligned to the side of the message origin.

Input

If one needs to provide specific input text fields, the input plugin can be used. With this type, various input features can be implemented -- such as an auto-complete field.

Fullscreen Message

Message plugins can utilize a 'fullscreen' mechanism that will render it fullscreen, filling out all the viewport of the webchat. This can be used to create dialog-like mechanics where the user's attention can be locked onto the next step.

Fullwidth Message

When displaying content that needs space and is not directly percieved as a message (such as images, event notifications, qr codes), a plugin can be configured to be displayed fullwidth, without an avatar, alignment and padding.

Plugins as Middlewares

For every message, the webchat decides how to render it by iterating over all the registered message plugins. Every plugin contains a mechanism that can decide whether it matches a message or not. If a plugin matches a message, the webchat will stop iterating and use that plugin to render the message.

In the examples below, we have a total of five webchat plugins. The webchat iterates through each plugin from left to right until it finds a match. Outlined circles represent plugins that did not match, dark circles represent matched plugins, light circles represent plugins that were not taken into consideration.

If no matching custom plugin was found, the webchat will fall back to its default message plugin (the last one).

When a message is matched by a custom plugin that has the 'passthrough' option enabled, the webchat will render the message with that plugin and then continue iterating, making multiple outputs for a single message possible.

webchatplugins's Issues

package.json -> 'main' is not correct

I believe the location listed under main in your package.json is incorrect. It is listed as "index.jsx", but should be listed as "src/index.jsx". This error was noted in the process to upload to Cognigy. After making this update I could upload to Cognigy without errors.

rating: should not submit empty values

Possible solution: the Send Rating button can be disabled before the user enters any rating. Or we can allow the user to explicitly avoid entering any rating by e.g. adding a "Skip" button.

File Upload plugin for Azure Blob: blob name cannot be set up as unique name

Could you please consider adding an optional input argument to plugin for File Upload to pass a name of a blob to be created? In this case we may use custom Cognigy extensions to pass unique value for it, so that old files will be not overwritten in Azure Blob Storage. Many thanks!

Map not loading

Hi,

After adding the map plugin only pointer is displaying, background map is not displaying.

Multiselect: the number of options to select and message bubble

I have a few ideas on improving Multiselect:

1. A message bubble is always shown above the Open Button even if the message is null or empty text. It doesn't look good when it is empty, I suggest to simply hide it.
2. It would be very practical if the number of options, which the user can/must select, can be specified. E.g. selectAtLeast, selectAtMost. Now the user can select none or select all options.
3. After the user had used the select and the flow moved on, the user can open the select again and submit one more time. I suggest disabling the button to avoid this.
4. It would be nice to see the value(s) selected as a message from the user, similarly to how Rating does it.

Also, README.md can be improved by adding a real-life example of a message, e.g.:

const payload = {
    _plugin: {
        type: 'multiselect',
        allowUserAnswers: false,
        cancelButtonLabel: 'Cancel',
        inputPlaceholder: 'Enter Time',
        options: ['10:00', '10:30', '11:00', '11:45', '12:15'],
        openButtonLabel: 'Choose Time',
        submitButtonLabel: 'Submit'
    }
}
api.say('Select Time', payload)

Add a QR Code Scanner

Docs link get 404

Use 'adaptivecards-react" as dependency

Hi guys,

the current implementation uses an Adaptive Cards wrapper that does not seem to be maintained anymore.

The new wrapper is based on MS's original adaptive cards implementation. That means it uses the one directly from Microsoft, which is maintained and updated by Microsoft directly.

https://www.npmjs.com/package/adaptivecards-react

Regards,

Sascha

GoogleMaps

The Google Maps Plugin isn't working properly in my google chrome webbrowser.

Google Chrome version: 84.0.4147.105 (Offizieller Build) (64-Bit)

What could be my issue?

Rating: property `size` does not change anything when variant = emoji

It works only when variant = star or variant = heart.

Rating: Webchat dies when variant=emoji and precision=0.5

When the aforementioned combo is selected in the message payload, then the browser console shows this error and the whole webchat breaks (empty page).

Possible solution: in case of out-of-range values for the given variant, fall back to the nearest value that makes sense. E.g. consider precision=1 even when the message has precision=0.5

webchat.legacy.js:279 TypeError: Cannot read property 'label' of undefined
    at getLabelText (rating.webchat-plugin.js:966)
    at he (rating.webchat-plugin.js:379)
    at rating.webchat-plugin.js:379
    at Array.map (<anonymous>)
    at rating.webchat-plugin.js:379
    at Array.map (<anonymous>)
    at rating.webchat-plugin.js:379
    at da (webchat.legacy.js:279)
    at Ua (webchat.legacy.js:279)
    at Ts (webchat.legacy.js:279)
ps @ webchat.legacy.js:279
Ls.n.callback @ webchat.legacy.js:279
ki @ webchat.legacy.js:279
wi @ webchat.legacy.js:279
wu @ webchat.legacy.js:279
t.unstable_runWithPriority @ webchat.legacy.js:287
Jo @ webchat.legacy.js:279
vu @ webchat.legacy.js:279
su @ webchat.legacy.js:279
(anonymous) @ webchat.legacy.js:279
t.unstable_runWithPriority @ webchat.legacy.js:287
Jo @ webchat.legacy.js:279
Xo @ webchat.legacy.js:279
$o @ webchat.legacy.js:279
nu @ webchat.legacy.js:279
enqueueSetState @ webchat.legacy.js:279
w.setState @ webchat.legacy.js:271
(anonymous) @ webchat.legacy.js:322
b @ webchat.legacy.js:6
(anonymous) @ webchat.legacy.js:322
(anonymous) @ webchat.legacy.js:322
(anonymous) @ webchat.legacy.js:322
(anonymous) @ webchat.legacy.js:322
(anonymous) @ webchat.legacy.js:322
(anonymous) @ webchat.legacy.js:322
(anonymous) @ webchat.legacy.js:322
u.emit @ webchat.legacy.js:6
(anonymous) @ webchat.legacy.js:263
r.emit @ webchat.legacy.js:263
m.onevent @ webchat.legacy.js:263
m.onpacket @ webchat.legacy.js:263
(anonymous) @ webchat.legacy.js:263
r.emit @ webchat.legacy.js:263
m.ondecoded @ webchat.legacy.js:263
(anonymous) @ webchat.legacy.js:263
r.emit @ webchat.legacy.js:320
f.add @ webchat.legacy.js:6
m.ondata @ webchat.legacy.js:263
(anonymous) @ webchat.legacy.js:263
r.emit @ webchat.legacy.js:6
f.onPacket @ webchat.legacy.js:320
(anonymous) @ webchat.legacy.js:320
r.emit @ webchat.legacy.js:6
i.onPacket @ webchat.legacy.js:6
i.onData @ webchat.legacy.js:6
ws.onmessage @ webchat.legacy.js:322
Show 16 more frames
webchat.legacy.js:279 Uncaught TypeError: Cannot read property 'label' of undefined
    at getLabelText (rating.webchat-plugin.js:966)
    at he (rating.webchat-plugin.js:379)
    at rating.webchat-plugin.js:379
    at Array.map (<anonymous>)
    at rating.webchat-plugin.js:379
    at Array.map (<anonymous>)
    at rating.webchat-plugin.js:379
    at da (webchat.legacy.js:279)
    at Ua (webchat.legacy.js:279)
    at Ts (webchat.legacy.js:279)