Comments (7)
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.
from chat-widget-adapters.
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 π
from chat-widget-adapters.
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.
from chat-widget-adapters.
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.
from chat-widget-adapters.
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
from chat-widget-adapters.
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.
from chat-widget-adapters.
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 π
from chat-widget-adapters.
Related Issues (20)
- Color Change on react js HOT 1
- Question: How to use with Custom Identity Provider? HOT 2
- Set LiveChat Customer Avatar HOT 1
- Angular v15 update HOT 4
- Angular v15 update HOT 2
- Add SvelteKit Support HOT 1
- Intermittent white bar on bottom on mobile devices HOT 1
- Angular Adaptor Event Handlers
- uniapp require is not defined.
- hook to open the chat from a button or event
- Update window types
- Support Angular 16 HOT 1
- Programmatically start chat HOT 2
- asyncInit incorportation
- visibility="minimized" do hide chat icon in mobile view. HOT 1
- Cannot read properties of null (reading 'useRef')
- Hooks for interacting with the widget
- How to get baseAPI when use customIdentityProvider
- Minimised hides the vue chat widget, if the support is offline. HOT 1
- Update library to support Angular v18 compatibility HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chat-widget-adapters.