Cognigy Webchat Plugins are built on top of React. If you are unfamiliar with React or the jsx file format, i would recommend taking the Tutorial on their site first.

Setting up your development environment

Since we are using React, we need a bit of setup before coding. The easiest way is to use a bundler called parcel.

If your parcel installation is slow, make sure to update to the newest NPM version

  • npm init
  • npm i -D parcel
  • npm i react

Open your package.json file and add a new "build" job at the "scripts" field:

{
    ...,
    "scripts": {
        ...,
        "build": "parcel build --out-file webchat-plugin.js src/index.jsx"
    },
    "alias": {
        "react": "./alias/react"
    }
    ...
}
  • create a folder called alias
  • in this new folder, create a file called react.js
  • insert the following code in it:
if (!window.__COGNIGY_WEBCHAT)
    throw new Error('Cognigy Webchat v2.7 or higher has to be loaded before this plugin');

module.exports = window.__COGNIGY_WEBCHAT.React;
  • this configuration will make the webchat plugin use the webchat's built-in react version
  • create src/index.jsx

Define a Message Component

In the first step, we will create a React Component that will be used to render a message. Via its props, it will get a message property representing the content of the message we want to render. Inside that message object, we have a text property containing the raw text of the message. We will return a <span> with red font color containing the text value of the message.

// src/index.jsx

import * as React from 'react'

const RedText = (props) => {
    const text = props.message.text

    return (
        <span style={{ color: 'red' }}>
            {text}
        </span>
    )
}

Create a Plugin Object

Now that we have our Message Component, it's time to use it in a plugin definition. A Message Plugin definition is an object that must contain a match and a component value. The match value is used to decide for which messages this plugin should be used, and the component value tells the webchat what Message Component to use with this plugin.

// src/index.jsx (continued)

const redTextPlugin = {
    match: 'red-text',
    component: RedText
}

Setting match to 'red-text' means that this plugin will match if a message has data that is set up like this:

{
  "_plugin": {
    "type": "red-text"
  }
}

Register the Plugin

In order to cause the plugin to be recognized by the webchat, it needs to be put at a specific location in the window object. At that location, we have a list of webchat plugins where we want to append out plugin. Because our plugin might be registered first, it may be that the list does not exist yet, so we have to make sure to create it if it does not exist yet.

// src/index.jsx (continued)

// create if it does not exist yet
if (!window.cognigyWebchatMessagePlugins) {
    window.cognigyWebchatMessagePlugins = []
}

window.cognigyWebchatMessagePlugins.push(redTextPlugin);

Intermediate Recap

By now, our plugin code should contain

  • a Message Component
  • a Plugin definition
  • a 'registration' of our plugin definition
import * as React from 'react'

const RedText = (props) => {
    const text = props.message.text

    return (
        <span style={{ color: 'red' }}>
            {text}
        </span>
    )
}

const redTextPlugin = {
    match: 'red-text',
    component: RedText
}

if (!window.cognigyWebchatMessagePlugins) {
    window.cognigyWebchatMessagePlugins = []
}

window.cognigyWebchatMessagePlugins.push(redTextPlugin);

Building the Plugin

Now that we have our complete plugin code ready, we can go on and build it by running npm run build in the command line within the plugin folder. It should create a webchat-plugin.js file. Load that file into a website before calling initWebchat and you are set!

Notes

If you run into problems when building the plugin, please try to change the version of parcel to 1.12.3, by running

npm i --save-dev parcel@1.12.3

 


Comments

0 comments

Article is closed for comments.

Was this article helpful?
0 out of 2 found this helpful