Giter VIP home page Giter VIP logo

webchatplugins's Introduction

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

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.

Input

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

webchatplugins's People

Contributors

alexteusz avatar pedily avatar dependabot[bot] avatar mastasky avatar kwinto avatar miriamschroeder avatar dshire avatar cesarcs7 avatar mayrbenjamin92 avatar uzlopak avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.