- The Demo Webchat — test plugins from the collection by using the Webchat Endpoint settings.
- In your code — add custom plugins or plugins from the collection to the Webchat widget in your website.
Plugins created for Webchat v2 are compatible with Webchat v3 but may display a different styling.
Test Plugins in Demo Webchat
To test a plugin from the plugin collection, follow these steps:- Open the Cognigy GitHub repository and select the plugin you want to use.
- On the Releases page, copy the URL of the JavaScript file from the Assets section of the plugin you selected. For example, the URL for the Google Firebase Authentication Webchat Plugin is
https://github.com/Cognigy/WebchatPlugins/releases/download/google-firebase-authentication100/google-firebase-authentication.webchat-plugin.js
. - In Cognigy.AI, select a Project from the Projects list.
- In Deploy > Endpoints, select an Endpoint or create a new one:
- Webchat v3
- Webchat v2
- Select the Webchat (v3) Endpoint.
- In the Webchat v3 Endpoint settings, paste the URL into the Webchat Plugins field under the Demo Webchat Settings section.
Set Up Plugins in Your Code
You can set up plugins in your code in the embedding code of your Webchat v3 or Webchat v2. To add the plugins in your code, proceed as follows:- Plugin from Collection
- Custom Plugin
- Open the Cognigy GitHub repository and select the plugin you want to use.
- On the Releases page, copy the URL of the JavaScript file from the Assets section of the plugin you selected. For example, the URL for the Google Firebase Authentication Webchat Plugin is
https://github.com/Cognigy/WebchatPlugins/releases/download/google-firebase-authentication100/google-firebase-authentication.webchat-plugin.js
. - Add the plugin using a
<script>
tag after loadingwebchat.js
and before callinginitWebchat()
in your HTML code, for example:
Trigger Plugins
Most plugins based on Cognigy plugin examples are activated only when specific data is present in a message. The plugin code specifies the"match": "plugin-name"
condition, which determines when the plugin is triggered. For example, the "match": "dialog"
condition triggers the plugin when the message contains the word dialog
. See the source code.
For instance, consider a plugin that displays images in a chat interface, extracting the URL from the message’s data. This plugin has two parameters: match
set to inline-image
, and url
which retrieves the image URL from message.data._plugin.url
. When Webchat receives a message, it triggers the inline-image
plugin if the condition message.data._plugin.type === 'inline-image'
is met. Then, the plugin retrieves the image URL from message.data._plugin.url
.
You can trigger plugins using the following components:
Basic Nodes
- In the Node Editor, navigate to the Options section.
- In the Data field, enter the following JSON to trigger plugin.
Code Node
If you prefer using a Code Node to send a message, you can pass the structureddata
payload as a second parameter to the actions.output
method.
Example: