cognigy / webchatwidget

A graphical chat widget you can embed into your website to provide visitors access to a Conversational AI via Cognigy.AI.

Cognigy Webchat Widget

This repository contains a Webchat feature that seamlessly integrates with your website, enabling your users to chat with your Conversational AI, built with Cognigy.

Documentation

To get started using the Webchat on your website, you can refer to the Documentation section in this repository. For information on how to set up the Webchat on the Cognigy side, please consult the Deploy a Webchat Endpoint guide in our product documentation.

Read the documentation here for information about integrating this Webchat on your own website. For styling customization, refer to the guide on applying custom CSS to the Webchat.

About this Repository

This repository contains the source code for the Cognigy Webchat within our product. It is divided into multiple sub-projects:

• webchat-ui: contains the source code used to render the webchat and webchat-plugins via react.
• webchat: makes use of webchat-ui and adds the socket connection as well as state management to it. It can be used within React applications for seamless integration.
• webchat-embed: takes the webchat and renders it into a website without further manual integration into an existing React application.
• plugins: contains built-in webchat-plugins that can be understood as a basic feature set.

Building your Webchat

You need an installed version of Node.js to build your Webchat. Clone this repository, then run npm i and npm run bundle within the root folder to install dependencies and create bundle files in dist/.

Development

For development purposes, you can utilize npm run dev. This command spawns an HTTP server on port 8080, showcasing the current form of the webchat directly from the source code. It automatically reloads upon updating source files, simplifying the development process. It automatically reloads when you make changes, streamlining the development process.

Compatibility Builds

The npm run bundle command generates bundle files for the Webchat itself and basic Webchat plugins. Additionally, it produces a second version of each bundle ending in .legacy.js. These builds maintain the same feature set as the regular ones but are converted into an older JavaScript standard, enhancing compatibility for older browsers that lack support for modern JavaScript features, such as Internet Explorer 11. When you run the command npm run bundle, it creates bundle files for the Webchat along with some basic Webchat plugins. This command also produces a second version of each bundle, which has .legacy.js at the end of its name. These builds have the same features as the regular ones but are converted into an older JavaScript standard. This enhances compatibility for older browsers that don't support modern JavaScript features, such as Internet Explorer 11.

webchatwidget's Issues

Docs - Custom Avatar: Missing Example

Hey @pedily ,

It would be very helpful, if you could provide a short example in this documentation: https://github.com/Cognigy/WebchatWidget/blob/master/docs/custom-avatars.md

Teaser Message Settings are not documented

while the engagementMessage settings are documented in our helpcenter: https://support.cognigy.com/hc/en-us/articles/360020128379-Display-teaser-messages-Preview-Engagement-
They are missing in our Github docs

Expected identifier (JavaScript) in IE11 Browser while loading webchat.js file

Hello,
While loading the webchat in the .html page using IE11.1304 browser. Its not loaded in the page due to webchat.js error in the console.

SCRIPT:1002:Syntax error
webchat.js (4630,1)
Its pointing to below line of code,
eval("webpack_require.r(webpack_exports);\n/* harmony import / var react__WEBPACK_IMPORTED_MODULE_0__ = webpack_require(/! react / "./node_modules/react/index.js");\n/ harmony import */ var
.......
...................................
......................................... ")
In Mozilla browser 68.5 It works good and no error in console.

Thank you.

How to handle webchat.toggle() with localStorage?

Hello Team,
How to use to toggle with localStorage.?
to toggle the current open / close state, there is also a webchat.toggle() method.

My Code Toggle not working:

<script>
   	if(window.localStorage.getItem('chatbotPopupShown') && window.localStorage.getItem('chatbotPopupShown') === 'true') {
			// chatbot popup was already shown --> do nothing
			loadChatbot("toggle");
	} else {
			// load chatbot popup
	    	        loadChatbot("open");
		}
		
	function loadChatbot(paramValue){	
		 <!-- Initialize the Webchat towards a Cogngiy Endpoint via initWebchat() -->    
			initWebchat('webchat_url', {           
	         settings: {
	                 	headerLogoUrl:'Image_url'                 	       
	            }
	        },function(webchat){	        			
						window.cognigyWebchat = webchat;
						if(paramValue == "open"){
							webchat.open();
						} else {
							webchat.toggle();
						}	
				});
			window.localStorage.setItem('chatbotPopupShown', true);
	}	
    </script>

How to achieve the toggle here when the user open the new page(second time) chatbot bot should be displayed in an minimized(toggle) mode? Then user can click bot icon in bottom manually to open chatbot.
Thank you.

CSS feature request: allow referring to settings.colorScheme in custom CSS

When I do customizations in CSS, I often need to set the settings.colorScheme color to some elements. I am hardroding it in my CSS, but the issue is when I change colorScheme in the bot configuration, my becomes CSS out of sync.

It would be nice to be able to refer to @colorScheme in the custom CSS.

Facebook List Element CSS Customization

Hi @pedily, @kwinto and @Cesarcs7,

if I am right, it is yet not possible to customize the style of the Facebook List Element. Can you add this functionality?

Thanks.

// Alex

Docs: Image Gallery is missing [data-cognigy-webchat] to make it work

Hey,

In order to make the .webchat-carousel-template-frame work, the [data-cognigy-webchat] must be added to the command:

* *webchat-carousel-template-frame*  
The frame that adds the "card styles" such as background-color or box-shadow.
```CSS
[data-cognigy-webchat-root] .webchat-carousel-template-frame {
  box-shadow: none;
}

working:

* *webchat-carousel-template-frame*  
The frame that adds the "card styles" such as background-color or box-shadow.
```CSS
[data-cognigy-webchat-root] [data-cogngiy-webchat] .webchat-carousel-template-frame {
  box-shadow: none;
}

webchat.js is file absurdly huge

the webchat.js file (v2.56.0) has a size of 1.5mb, that can hardly be necessary.
There is an existing plugin system that should be used for special cases, while the file should really only contain the basis that is needed.

At a quick glance, the file seems to contain:

• multiple date/time picker libraries, including tons of localisation strings for many languages
• occurencies of CSS, SVG, Base 64 PNGs, audio files inlined in js, that should probably be handled differently.
• Rich-Text editor
• social sharing integrations
• multiple video players

Messages are getting duplicated on reconnect

When the connection is restored, messages are duplicated in the local storage.

To reproduce:

1. Exchange some messages with the chatbot.
2. Simulate network loss. For Chrome: Developer Tools -> Network -> Change from "No throttling" to "Offline"
3. Wait for the connection to get lost.
4. Change back to "No throttling".
5. Now you have double the messages in the local storage.

This can cause the chatbot to completely break if you have enough of reconnects. Messages are going to be exponentially increased until the limit is reached and exception is going to be thrown in options-middleware.ts on setting the messages in the storage:

browserStorage.setItem(key, JSON.stringify({
  messages,
  rating
}));

I believe the issue is because of reducer.ts class that has a small typo:

export const reducer = (state = rootReducer(undefined, { type: '' }), action) => {
    switch (action.type) {
        case 'RESET_STATE': {
            // We only restore messages and prepend them to the current message history
            return rootReducer({
                ...state,
                messages: [
                    ...action.state.messages, // This I believe should be ...action.state.message (singular)
                    ...state.messages,
                ],
                rating: {
                    ...state.rating,
                    hasGivenRating: action.state.rating.hasGivenRating,
                }
            }, { type: '' })
        };
    };

    return rootReducer(state, action);
};

Class Names

It would be very useful to have class names for the rich message formats to style them easily.

Feature Request: Download Conversation (Button)

Hey @pedily and @kwinto ,

On another webchat I saw this Download Conversation button:

Maybe this could be interesting for us as well. What do you think?

Persistent History is not working in Mozilla 68.5

Dear Team,
Persistent History is not working in mozilla and chat window itself not allowing users to enter some value. Web-chat experience across the page navigation.

Link: https://codesandbox.io/s/local-persistent-history-0dvwm

How will the previous conversion history will be pushed to the same chat window even after the user moves to different page?
Thank you.

CSS Customization: Add Example for changing Avatar position

Hey @kwinto and @pedily ,

Could we please add the following example to the related CSS class documentation in css-customization.md in order to show that one could change the bot avatar position from left bottom to left top?

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.bot {
  align-items: flex-start !important;
}

Not connecting without forcing Websockets

Hi,

in the current version of the webchat, the connection to Cognigy breaks if the following parameter is not given in the initWebchat() function:

• forceWebsockets=true;

Otherwise, the webchat client tries to connect to Cognigy for ever :)

Best regards,
Alex

Here is my working index.html (without config url):

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="/manifest.webmanifest">
</head>

<body>
    <script src="./webchat.js"></script>
    <script>
        initWebchat('<webchat-config-url>', {
            forceWebsockets: true,
            settings: {
                // colorScheme: '#FAB'
            }
        }).then(webchat => {
            window.cognigyWebchat = webchat;
            // webchat.open();
        });
    </script>
</body>

</html>

Default placeholder is arabic

Typing Indicator repeats random times

A few weeks ago the typing indicator began to repeat the animation more often than needed to show that the bot is typing. Since these animations are not fluent, it seems to be a bug, maybe?