0:00
Hello everyone, welcome to Key2 blogging and in this video, I will show you how you can add a
0:04
WhatsApp chat button to your blogger website. So adding a WhatsApp chat button helps you connect
0:09
with your visitors and visitors can easily contact you through this button. So all you
0:14
need to do is click on the button and it will redirect to the WhatsApp page. And here the
0:20
message will be typed automatically in the message box that we set in the HTML code
0:26
and they can easily contact you through WhatsApp. So let's check how you can add this to your
0:32
blogger website. So for this, let me just quickly remove this and then I will show you how you can
0:38
add it to blogger. Okay, I have removed the WhatsApp chat button. So let's go to the blogger
0:45
dashboard. And here you have to go to the theme section. Now before changing anything in your
0:51
theme, make sure to take a backup of your theme so that in case if you do anything wrong, then you
0:56
can copy all the code and go to the edit HTML section and paste the code so that your website
1:02
will be restored to the original position. So let me just scroll down and find the CSS code
1:10
So here you can search for bskintag where the CSS code ends. So here this is the bskintag
1:17
So here you have to create a space and you have to paste a CSS code. So let me just scroll down
1:24
and here this is the CSS code. So just copy the all CSS code and paste it just above the bskintag
1:33
And if you are not seeing this tag, then you can paste it just above the closing style tag
1:39
Now you have to scroll down to the bottom. And here in the closing body tag, you have to paste
1:45
the HTML code. So let me just copy the HTML code from here
1:53
Now paste it just above the closing body tag. Now let's save this code
2:00
Now let's go to the website and refresh this page. And as you can see, the WhatsApp chat
2:06
button is added. And when I click on this button, it will redirect me to the WhatsApp page
2:12
So let's check how we can customize this WhatsApp button. So first of all, you have to change this
2:18
title. So you can add any text here. So let me just go to the edit HTML. And here you have to
2:26
change the text like Do you have any doubt? Chat with us on WhatsApp. So you can change this text
2:34
here. And here you can change the text like Hello, how can I help you? So it will show the text here
2:42
And here you can change the text like click me to start the chat. So here you can change the text
2:50
And here you have to add the phone number, basically the WhatsApp number in this place
2:56
so that the user will connect with you through this number. Here I have added a demo number
3:03
to show you how it works. And here you can set the predefined message like Hello Abhishek
3:09
I need your help. So in this place, you can put any text here and this message will automatically
3:16
type in the WhatsApp app or the WhatsApp web. I hope you got the idea how to add WhatsApp
3:21
chat button to your blogger website. And you can also further customize this, like you can set the
3:27
position of the WhatsApp chat button. If you want to shift this button to the right side. So let me
3:34
just show you just click on inspect element. And here you have to select the WhatsApp button
3:40
So this is the WhatsApp button. And here in the left position, you can select the right position
3:46
like let me just change it to right. And as you can see, the WhatsApp chat button is shift to the
3:53
right. And here you can set the pixel like let me just add a pixel of 30 pixel or 40 pixel
4:02
or you can change it to 50 pixel. And as you can see, you can set the exact position where you want
4:08
to add the button. You can also change the button color, but I don't recommend to change the color
4:15
I hope you got the idea how to do this. And if you have any doubt regarding this, then you can
4:21
ask me in the comment section. And if you want to add this WhatsApp chat button to WordPress
4:25
then I have already made a video about this. So you can watch this video or you can add the
4:31
same HTML code to your WordPress website and it will work in any theme or any CMS platform that
4:37
you use. And if this video helped, then make sure to hit the like button and subscribe to my channel
4:43
for more upcoming videos like this. I will see you in the next video. Thank you
