React Support Chat - Impress Users with Custom & Powerful Chat in 1 Hour (2021)
HTML-код
- Опубликовано: 21 авг 2024
- This react chat app will focus on customer support and impress users when they visit your website.
This React Support Chat tutorial will teach you about React, APIs, Sockets, DOM, Animations, and Chat Engine while you build this project.
Starter Project: github.com/ala...
Section 1 - Starter Project
Time: 2:03
Code: github.com/ala...
Section 2 - Avatar Button
Time: 5:01
Code: github.com/ala...
Section 3 - Support Window
Time: 11:35
Code: github.com/ala...
Section 4 - Email Form
Time: 18:42
Code: github.com/ala...
Section 5 - Create Chat APIs
Time:
Code: github.com/ala...
Website: chatengine.io/
Section 6 - Chat Feed
Time:
Code: github.com/ala...
Section 7 - Admin Dashboard Page
Time:
Code: github.com/ala...
Section 7 - Email Notifications
Time:
![Eminem - Somebody Save Me (feat. Jelly Roll) [Official Music Video]](http://i.ytimg.com/vi/Vwa0HenQMi4/mqdefault.jpg)
If you want to use a local image for your avatar image, change the backgroundImage key value to backgroundImage:`url(${self})` after you have imported your local image as self in this example. Hope it makes since or helps someone.
I tried to give more than one like to this great video but unfortunately youtube doesn't allow. Really awesome tutorial and your explanation is really very clear. thank you very much, you got a new subscriber :)
Haha awesome thanks!
i've been looking for a tutorial like yours for a while, thanks a lot!!!
Thanks happy to help!!
Loving your Content, Delivery style and Clarity great video
Thanks a bunch!
This was awesome! I also would have never guessed this was your first youtube video!
This was awesome! I've been looking for a tutorial like this and thanks a lot.
This chat API is amazing!!! 🥰🥰🥰
Absolutely banger video!! Thanks a lot! Saved a ton of my time
Awesome. Would be watching this
Great vid mate
Thank ya!!
@@adam_la_morre Kindly help us out, few of us are facing an issue "web socket error and connection is closed even before establishment". I'm trying to implement the chat support in my project and does the version/react-script version depends on it? Kindly respond and do let us know how to overcome the error
Fantastic tutorial
Excellent tuto I really apreciated your tuto thanks
Great video helpful, will try this one out.
I am unable to get anything on Chatengine page i am just getting loading... and in console i am getting socket error and socket closed how can i set this ??
I am facing the same problem did you find the solution
Please, how do I specify through the chat creation API the admin. Because it automatically and randomly adds one, even if it is not from the users array, but some other user already created on the app.
I think it is quite impressive what you do! Do you plan to use any time only vanilla-js? That would be awesome!
React can be bundled into vanilla JS apps 👍
@@adam_la_morre as a self learner, and starting year 3, that is tricky. But I can see clearly that year 4 will be more of laughter and looking back than 1,2, or 3 have or can provide. React is awesome and available for all languages to incorporate, but what a headache as a DIY!.
Great job! Thank you so much
Thank you very much!
man! that's so cool
I am getting an error "Uncaught (in promise) AxiosError {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}" as soon as I enter the email and clicking enter. I have rewatched the video so many times to make sure there are no errors in my code but I have failed to find the cause. Can you maybe explain what would cause that error?
I want to know too
Hi Kyle have you managed to solve Uncaught promise AxiosError ?
Hello, no I did not figure out the solution to my problem
pass the password and username in the getorcreatechat function also
it always kept loading and i could not access the chatbox
Adam, you are very very talented and knowledgeble, and it was inspiring to follow along, but Chat Engine has changed, and they charge, so I could not finish it. Thank you very much, Adam.
Any recommendations on react based chat tutorials?
Chat engine is free forever
@@wheres.the.future how pls ? you are required to pay after 30 days
@@elvisosuji2707you are right, any other alternative we can do with?
Nice job bro
Chat Engine isn't working anymore for me...
I have the WebSocket issue, the WebSocket is closed before the connection is established. Does anyone tell me how to fix that?
Where you able to resolve it? I need to know too
@@sreshtareddy7283 bro
mee too were u able to solve it?
@@igrit2659 Nope, not yet
Not working because of a websocket error pls fix it
is this also mobile responsive? for instance the admin dashboard ?
Warning! Currently not working!
Okay
This is fire 🔥
I just have to know how ro host a .env file in real time
hey, can u pls tell me why my chatbot is showing chats twice? I have imported react-simple-chatbot package and is using it.
I'm showing your credentials are incorrect. Make sure the project ID, Username, and Password are correct here. Did the console log, same error there too. Project is reset done, yet it's not working. Restarted the server. Please suggest.
How can I include administrators so that a user can switch between connected admins and a user of my website won't need to give his email again. It will just be collected from my database. Thanks I really enjoy your works and I want to use it in my school project.
Hi Adam , does any way to create full support chat like , first chat comes with some prebuild question or faq , if the query resolve by chat faq no neeed to live chat, if the user query not resolved by the faq chat questions. IN this case we want live chat.
Thanks in advance
"This is going to save you a ton of head banging, so your're welcome". I mean, So far, and I've watched years of 'how to videos', you've done this without being cool like that haha. Do you freelance as well?
Having issues with npm install with many errors, how to resolve it as this is from 2021? A large migration I am hoping to avoid...
For me it’s not working it says something like couldn’t find package.json
Very informative and legit Project . The only problem i am facing is socket error and socket closed before connection . can u help me out
Hey were you able to solve the issue? I'm facing the same problem
@@sreshtareddy7283 nope
hey guys are you able to solve socket error , workes perfectly fine in ReactJs project but getting this in NextJs project ?
Hey Adam! Cool video. But I'm not able to render EmailForm or anything else into the div in support window. Could you help me out please :)
Hi I am facing the same problem I am getting the input email address box once I enter the mail I am unable to get the clear chat engine window
I want to make chat system for both support and also for user to user chat system...this both possible by this library??
I can't use the API, is it still in work???
How can I use this for react native
I have a question, I did the same as you, I can t not see the message i sent but in the side of administration i see the message I sent, and in the top of chat engine after entering the email there is a infinite loading
Hi I am facing the same problem did you find the solution?
@@VinayKrishnamurthy-xg3ix i have also the same issue is there anyone find out the solution ?
Something wrong with Socket... Just infinite loading(
yup
hi, thanks for the tutorial, unfortunately i'm getting Socket Error. failed: Insufficient resources
can anyone help with that pls?
please i need it for my project..someone help...
@@avivovgen7786 ur rendering it too many times
@@avivovgen7786 Were you able to rectify the error? Please do let me know, I'm facing the same issue "facing is socket error and socket closed before connection"
hii is chatengine is paid
Chat engine is not free anymore
should be free free
it was forcing me to to pay min 7$ :(
Just prefect
How do you deal with the input when you write multiple lines and it expands?
@Adam La Morre => Is there any way we can connect. I have some work for you.