Skip to content
A collection of example plugins for the Cognigy Webchat as well as a developer guide to write your own plugins.
Branch: master
Clone or download
Latest commit 2154920 Jun 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets add documentation May 21, 2019
docs Update get-started.md May 26, 2019
plugins Update README.md Jun 13, 2019
.gitignore changed build target Jun 3, 2019
LICENSE Initial commit May 9, 2019
README.md Update README.md May 23, 2019
package-lock.json update dialog example to use local parcel Jun 11, 2019
package.json update dialog example to use local parcel Jun 11, 2019
webpack.config.js add example plugin for a themed dialog May 29, 2019
webpack.production.js
webpack.production.legacy.js add flightseat-picker plugin May 9, 2019

README.md

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.

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.

Inline Message

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.

Fullscreen Message

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.

Fullwidth Message

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.

Plugin Message

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

Default Message

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.

Passthrough Plugin Message

You can’t perform that action at this time.