Hi, i was trying to setup your project as described in the README.md, when i ran into following Error after running npm start

ERROR in ./src/index.js
Module build failed: Error: /Users/falk/git/node_modules/eslint-config-airbnb/rules/react.js:
Configuration for rule "react/jsx-boolean-value" is invalid:
Value "never,[object Object]" has more items than allowed.

Referenced from: airbnb
Referenced from: /Users/falk/git/.eslintrc.js
at validateRuleOptions (/Users/falk/git/chat-web-sdk-sample-app/node_modules/eslint/lib/config/config-validator.js:116:15)
at /Users/falk/git/chat-web-sdk-sample-app/node_modules/eslint/lib/config/config-validator.js:163:13
at Array.forEach ()
at Object.validate (/Users/falk/git/chat-web-sdk-sample-app/node_modules/eslint/lib/config/config-validator.js:162:35)
at load (/Users/falk/git/chat-web-sdk-sample-app/node_modules/eslint/lib/config/config-file.js:523:19)
at /Users/falk/git/chat-web-sdk-sample-app/node_modules/eslint/lib/config/config-file.js:392:36
at Array.reduceRight ()
at applyExtends (/Users/falk/git/chat-web-sdk-sample-app/node_modules/eslint/lib/config/config-file.js:363:28)
at load (/Users/falk/git/chat-web-sdk-sample-app/node_modules/eslint/lib/config/config-file.js:530:22)
at /Users/falk/git/chat-web-sdk-sample-app/node_modules/eslint/lib/config/config-file.js:392:36
@ multi main
webpack: Failed to compile.

Everything is in place, node version is v9.4.0

when use zChat.sendChatRating('good'); it gives 400 error code invalid message

It would be super awesome if you exported the chat widget as a react component that we could just use in our app 😄

I have a couple of triggers and those are not shown when using this new widget. It would be really nice if the button would have a badge icon with the number of unread messages, and when clicking on the the badge clears. Would it be possible to add this to the sample?

If not could you maybe point me in the right direction to open the chat window when a chat message (from an agent or trigger) arrives?

Hi,

I am getting this error when I deployed the widget on a webpage.
Uncaught ReferenceError: zChat is not defined
It was running fine locally. Am I missing some other libraries that need to be linked in the webpage?

Thanks,
Jehan

Hi,
Is there a way to get concierge's informations (image/slogan ...) ?

Mathias

Issue summary
This sample is for React projects. The web-sdk only works for browsers and is heavily opinionated. There are references to window, navigator, document and document.createElement calls.

Request
Could the SDK be built with no reference to any browser specific items?

Is it open source?

Hi.

There are users refreshing the page which results in losing the current chat. They have to open a new chat to get back in touch with customer-support. It would be a welcomed feature to persist the state of the chat i.e. sessionstorage. That way the chat could be stored untill the browser is fully closed. I couldn't find this feature in the current reactjs-demo.

This is probably not the right place to post this and I don't know if you guys accept feature requests, but it would be great if the zChat.setVisitorInfo options would support notes.

ERROR in Cannot find module 'node-sass'
@ ./src/styles/Widget.scss 4:14-183

Hello,

I configured the widget with my account key, the load page, the chat button too, but when I click on it the chat window goes up well but then there is a load with a small blue circle which gets bigger and it never stops.

And when I compile, and I host the file on the site, even the chat button does not load.

Thank you in advance,
cordially

I dont see any documentation in the developer docs that references how to add the agent rating option to this sample app. Is there something i'm missing? Thanks!

I have attached the standard Zendesk chat widget rating for reference.

Departments in the store gets overwritten everytime department_update event is fired

You need to change ChatStore.js to something like this

 const DEFAULT_STATE = {
        connection: 'closed',
        account_status: 'offline',
-       departments: [],
+       departments: {},
        visitor: {},
        agents: {},
        chats: SortedMap(),
@@ -29,9 +29,9 @@ function update(state = DEFAULT_STATE, action) {
                                account_status: action.detail
                        };
                case 'department_update':
+                       state.departments[action.detail.id] = action.detail;
                        return {
-                               ...state,
-                               departments: action.detail
+                               ...state
                        };

When I run npm run dist and place the new widget.js on my site it always shows the docked version.

I dont see anything in the docs in terms of a config option that will compile the normal version.

How can I accomplish this?

Currently, if you want to get the queue length with the 'chat.wait_queue' event you can only get it on the initial connection. After which, the event is never emitted again. Ideally this should be sent every, say, 60 seconds so that the API ingestor can get updates on the queue status.

This widget will break Array.prototype.find in any project its included into because of this shim in collections

montagejs/collections#165
montagejs/collections#182
montagejs/collections#178

It also breaks Array.prototype.from
montagejs/collections#169

And the crypto library
montagejs/collections#162

We are getting the error while calling endChat() to end the current chat session. Even we are not able to make out anything from the error display in logs.

Using Web-SDK 1.4.0

Error: Failed
at eval (web-sdk.js?4b43:603)
at e.$ (web-sdk.js?4b43:3014)
at e.l [as fire] (web-sdk.js?4b43:840)
at c.k.work (web-sdk.js?4b43:4125)
at c.k.process (web-sdk.js?4b43:4097)
at c.k.queueFrame (web-sdk.js?4b43:4090)
at e.onmessage (web-sdk.js?4b43:3991)
at e.socket.onmessage (web-sdk.js?4b43:3843)
at WebSocket.t.onmessage (web-sdk.js?4b43:4289)

Not sure what's missing with our implementation.

Hey guys,

This is a great reference project. We're building a React-based frontend on top of the Web SDK (but using a different store library). I'd love to see testing examples thrown into this project, as this might give me a better sense of how to stub/mock the WebSDK for our own testing purposes.

Again, thanks for this reference project. It has been a big help.

How to open zopim livechat when message received

Hi. I see that the login form data is used to change the visitor information, but this is not used to identify the user on the server chat side. That is, if I identify as user "user1", chat a little, then refresh the page and identify as "user3", both "sessions" go to the same chat history and support ticket.

This sample web-sdk gave Object doesn't support property or method 'assign' on IE. We resolved it using this polyfill.

Hi,
I'm trying desperately to get the operating hours via the getOperatingHours() function of your SDK https://api.zopim.com/web-sdk/#zchat-getoperatinghours. I set in "Parameter => Account => business hours" the schedule and I saved my changes. However the function always returns "undefined". Is there something I missed?

On my react zendesk webchat, I try to make a form to send the user name, email, and phone number.

For this I initialize the webchat, set the current visitor, then I send the data.

Here is my code:

const msg = {
    name: this.inputNameRef.current.value,
    email: this.inputMailRef.current.value,
    phone: this.inputPhoneRef.current.value,
    message: `Demande de démo depuis ${this.getDemoRequestPath()}`
}; // {name: "foo bar", email: "[email protected]", phone: "0611223344", message: "Demande de démo depuis /solutions/theapp"}

// Need to init the chat to be able to send offline message..
if (!this.props.data.isChatInit) {
    zChat.init({
        account_key: ACCOUNT_KEY
    });
    this.props.dispatch({
        type: 'initChat'
    });
}

zChat.setVisitorInfo({
    display_name: this.inputNameRef.current.value,
    email: this.inputMailRef.current.value,
    phone: this.inputPhoneRef.current.value
}, (err) => {
    if (err) log('Error setting visitor info');
});

zChat.sendOfflineMsg(msg, (err) => {
    if (err) log('Error sending demo request form');
});

When I try this, setVisitorInfo trigger this error:

web-sdk.js?452d:1453 Uncaught TypeError: Cannot set property 'lastIndex' of undefined
    at eval (eval at <anonymous> (widget.js:1465), <anonymous>:1453:21)
    at i.E.validate (eval at <anonymous> (widget.js:1465), <anonymous>:1533:13)
    at eval (eval at <anonymous> (widget.js:1465), <anonymous>:1411:25)
    at i.E.validate (eval at <anonymous> (widget.js:1465), <anonymous>:1533:13)
    at eval (eval at <anonymous> (widget.js:1465), <anonymous>:1433:22)
    at i.E.validate (eval at <anonymous> (widget.js:1465), <anonymous>:1533:13)
    at le (eval at <anonymous> (widget.js:1465), <anonymous>:5038:27)
    at h (eval at <anonymous> (widget.js:1465), <anonymous>:4559:12)
    at Object.eval [as setVisitorInfo] (eval at <anonymous> (widget.js:1465), <anonymous>:5220:33)
    at DemoRequestForm.send (eval at <anonymous> (widget.js:2221), <anonymous>:139:24)

If I comment setVisitorInfo, and just leave sendOfflineMsg the same error is trigger.

I check: my msg is correct, and the init is executed. And I do not receive anything from zChat.on()

This is a zChat bug or just me who is forgotten an info?

We are trying to identify our logged in visitors via a simple script and push their credentials into Zendesk Chat — the following script works fine with the standard zendesk widget but when testing with this React app we are getting an error in console:

Uncaught ReferenceError: zChat is not defined
at HTMLDocument. ((index):1162)
at o (jquery.js:1)
at Object.fireWith (jquery.js:1)
at Function.ready (jquery.js:1)
at HTMLDocument.B (jquery.js:1)

Script that previously worked

`<script>
function zendeskChatIdentify()
{
var customerData = storageGetValue(customerLocalStorage);
if( customerData ){
/$zopim(function() {
$zopim.livechat.setName(customerData.full_name);
$zopim.livechat.setEmail(customerData.email);
if(customerData.phone) $zopim.livechat.setPhone(customerData.phone);
});/

}

}
$(document).ready(function(e) {
//if( typeof zendeskChatIdentify!=='undefined' ) zendeskChatIdentify();
zChat.init({
account_key: 'account_key',
suppress_console_error : true
});

});
</script>`

I'm getting warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MessageList. See https://fb.me/react-warning-keys for more information.
in div (created by MessageList)
in MessageList (created by App)
in div (created by App)
in div (created by App)
in App (created by Connect(App))
in Connect(App)
in Provider

It occurs when trigger message is sent. Then I refresh the page, no warning is displayed. I suppose it occurs when 'typing' event and 'chat.memberjoin' event occured sequentially.

The web sdk seems broken somehow. The web socket is immediately closed, returning an "illegal_web_sdk" error which is not documented anywhere.

I've tried the 3 latest versions of the SDK but none of them work.

Is the SDK still supported?

Hi,
I'm trying to set department switch the button clicked by the user.
Scenario Example :
User click on "Department 1" => start chat with the agent in the "department 1" => user leave the chat => user click on "Department 2" => {here is my problem} user should start chat with the agent in "department 2" but the chat is started with the agent on "department 1" instead....

If I reload the page, the visitor id change and if user click on "Department 2" everything works fine.
So I'm searching for a solution to force Visitor department Or to reset Visitor id when user leave the chat the first time....

thanks