Integrate React 17.0.2 with LiveChat

[abettinf]

Hello LiveChat team, my development team and I, we want to integrate the LiveChat service to our web application developed with React version 17.0.2, we have followed the documentation: https://developers.livechat.com/docs/extending-chat-widget/chat-widget-adapters/react-adapter

However, we have not been successful, we get an error indicating that we must use TypeScript files (.tsx), but we are working with .jsx files.

In this order of ideas, we need your help to confirm if it is possible to integrate the LiveChat service with the current version of React.

Currently, we have the LiveChat service functional on our WordPress site iproveedor.com and we want that same chat to work on our web app https://app.iproveedor.com/login/index.html.

[walaszczykm]

Hello @abettinf 👋

Thanks for the report and sorry for any inconvenience.
Yes, the version of React you are using is supported as also usage of both TypeScript and JavaScript languages.

The problem on your screenshot is that you use the TypeScript code from our documentation example inside JavaScript code. Mainly the type annotation for the event handler which is highlighted is something that does not exist in JavaScript and just cannot be used there. You can simply delete the usage and import of EventHandlerPayload type 🙂

The same example from our documentation without TypeScript language specfifc features will look like this:

import { LiveChatWidget } from "@livechat/widget-react";

function App() {
  function handleNewEvent(event) {
    console.log("LiveChatWidget.onNewEvent", event);
  }

  return (
    <LiveChatWidget
      license="12345678"
      visibility="maximized"
      onNewEvent={handleNewEvent}
    />
  );
}

Let me know if we can help your team in anything else in case of integrating LiveChat into your website.

[abettinf]

Hi, I ran the npm
npm install @livechat/widget-react

I applied the code as follows:

But I don't get the chat icon does not appear to start using it. What am I doing wrong or what do I need to apply?

note: the license number I show in the image is not the real one we use for the chat, I do not put it for security reasons.

[walaszczykm]

Hi, no problem with not providing the license number directly. I was able to obtain your license details in our company’s CRM thanks to the company/product name: iProveedor. Using that information I see what is going on here in your situation 🙂

The problem

Currently, you should be able to see a message inside the developer console while running your website:

[LiveChat] Current domain is not added to the allowed domains. LiveChat has been disabled. 

It means that the domain you are currently on (localhost) is not configured on your LiveChat account as trusted and because of that, the LiveChat Chat Widget is automatically disabled.

The cause

You have enabled a feature called "trusted domains" which means that the LiveChat Chat Widget will be available only on the websites whose domains are explicitly specified in the list located here: https://my.livechatinc.com/settings/trusted-domains. This allows preventing someone from loading Chat Widget with your license on his website.

The solution

It is a good practice for website development purposes to add a localhost domain to the allowed list while using this feature as in another way you will not be able to successfully load the Chat Widget on your local development environment.. You can read more about this feature and how to configure it on our Help Center: https://www.livechat.com/help/trusted-domains

[abettinf]

Hello, you are right, LiveChat disabled message appears in the localhost console.

So I deployed the changes to the test domain, however, the chat still does not appear, in this case LiveChat disabled message is no longer displayed in console.

I appreciate all the collaboration you are providing and I trust that together we can find the solution, I look forward to your feedback. Thank you.

[walaszczykm]

Hi @abettinf, good to hear that the message is gone.

I have entered the test domain you have on your screenshot and I don't see any sign of the existence of the LiveChat Chat Widget in the website code. I am not entirely sure when and how you render the LiveChatWidget component but you should be able to access a LiveChatWidget global variable inside the developer console. You can always test it by pasting 'LiveChatWidget' in window inside the console and after hitting enter it should return true.

Using your previous example from localhost I don't see any reference to the @livechat/widget-react package in the LoginScreem.jsx on https://app2.iproveedor.com/login-dev/index.html.

Did everything go properly with the deployment? Or maybe you have already removed this recent deployment with LiveChat Chat Widget from the test site?

Please, use mentioned above method to validate if the LiveChat Chat Widget is actually loaded on the website and that its code is deployed together with the application code. Let me know how it goes 🙂

[abettinf]

You were right, there was an error in the deployment and we did not know. After deploying correctly, we saw the chat in our app, which fills us with much happiness. Thank you very much for all your support, a hug.

[walaszczykm]

I am glad everything is working correctly now on your side 🙂
If you would encounter any problems or would like to just ask about the product or this project feel free to do so 😉