Up next in 10
Build a React.js Chat Window to Send Text,Images & Emoji Using react-chat-window Library
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to add
0:04
a chat window Facebook Messenger style
0:07
kind of a window inside your website to
0:10
increase the website visitors so some
0:12
users will visit your website and they
0:14
will see this chat window appearing in
0:16
the bottom right corner of the screen
0:19
and when they click it you will see this
0:21
chat window will
0:23
appear and you will they can be able to
0:27
send messages direct messages once they
0:30
send you will see it also supports this
0:33
emojis as well you can send out emojis
0:36
as well alongside with the messages or
0:39
you can even send out
0:45
uh direct pictures as well by clicking
0:48
this file attachment
0:50
icon so you can send out all kind of
0:53
messages text images emojis this is
0:57
actually the package which is react chat
0:59
window
1:00
so if you go to npmjs.com just search
1:03
for this package which is react chat
1:07
window so it's very helpful to build out
1:10
these chatting kind of applications with
1:12
this
1:12
component it's a fairly new component
1:15
385 weekly download so this is actually
1:17
the
1:18
command uh I have already installed it
1:20
so I will just show you a very basic
1:23
example so now to get started we just
1:26
need to create a basic functional
1:28
component
1:31
let me create
1:33
this so the very first thing we need to
1:35
do you need to import this module by
1:37
using the import statement so just write
1:40
here import the module and it contains
1:43
this launcher component coming from
1:47
react chat
1:49
window so once you import this you can
1:52
directly include this component in the
1:56
jsx just use this component and it takes
1:59
some option options the very first
2:01
option it takes is an
2:04
object which is called as agent profile
2:08
and it actually contains the information
2:10
about your company so I will just say my
2:14
team is react chat window you can
2:17
replace your own image as well from
2:20
here so if you have a URL you can
2:23
replace it here I just providing a very
2:26
basic image coming from a
2:28
URL so so if you just refresh now what
2:31
you will see this chat
2:33
window you this icon will appear now in
2:36
the bottom right corner of the screen
2:38
and when they click it you will see this
2:42
you can replace it with your own name
2:44
right
2:45
here so company name your or personal
2:48
name as well so I will replace it with
2:51
free media tools
2:54
so so now you can see so here you can
2:57
replace the company logo as well
2:59
anything
3:00
and then they can directly send out
3:02
messages by clicking so once they send
3:05
the messages we do need to create a
3:07
variable for this so that the messages
3:09
can be shown if the user sends out
3:13
messages so we can create a simple
3:15
variable here to carry to keep track of
3:19
the messages so for this we are using
3:23
simple use State initial value will be
3:25
empty arror so we can actually bind an
3:29
uh
3:30
a call back function so when the message
3:32
is sent we have this call back in this
3:35
on message was
3:36
sent and here we can actually bind and
3:41
call back function and also we can
3:44
attach the messages to this component so
3:48
the messages will be stored in this
3:49
variable messages list and we have
3:51
configured a call back function so when
3:53
the message will be sent by the user
3:55
this call back function will execute on
3:58
message was sent so now we just need to
4:01
Define this function so inside this
4:04
function we just need to add the message
4:09
which is sent by using this hook
4:12
function so the sent M message will be
4:15
already be this available in this
4:17
function this call back function so we
4:19
will get this
4:21
message and insert this inside the
4:24
message
4:27
list so
4:29
now if you see if you try to send out a
4:33
message in the chat window click on
4:55
enter so you can even to toggle the
4:58
option if you want to send out emojis
5:00
you will just need to set this option
5:03
which is show
5:05
Emoji so now you can even send out
5:08
emojis as well in the chat window so you
5:11
will see this option
5:13
appearing so you can send out
5:17
messages as well as emojis as well so
5:20
it's a great component if you are
5:22
building some kind of chat application
5:24
in react sh you can directly use this
5:26
component and it supports all these
5:28
options you can replace is your own name
5:30
image URL and these are set of call back
5:34
functions when the message is sent so
5:36
you can create a very basic chat
5:38
chatting kind of application in react CH
5:40
with this
5:41
module so thank you very much for
5:43
watching this please also check out my
5:46
website as well free mediat tools.com
5:49
which contains thousands of tools
5:51
regarding audio video and image and I
5:54
will be seeing you in the next video
#Business & Productivity Software
#Other