How can i add What'sApp to Blocs?

I Need Help
1

Is there anyone ever try to add Whatsapp in Blocs?

2

Yes it’s not that difficult and I’ve done it on a couple sites now. Add a link like this:

https://wa.me/+447444359XXX

That will then open WhatsApp.

1 Like
3

Hi, thanks @Flashman. Is it possible to make a Whatsapp chat button that is always visible in the corner of the page?

4

Hello @jcapel in page definitions go to Add code and insert the following code:

<a href="https://api.whatsapp.com/send?phone=1234567890&text=Please%20contact%20me%20about%20the%20following:" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>
</a>

<style>
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}
</style>

Just change the number to your / costumer number and change the text if you want for other thing…

Hope it helps you…

7 Likes
5

Hi @Pealco this is perfect, thank you so much!
It’s exactly what I needed.
Cheers

1 Like
6

Thank you Pealco for this :slight_smile:

2 Likes
7

The WhatsApp icon does not show on mobile. Is there a solution?

8

Hello @khorram welcome to the community…

Please check this website: Home

In my case is working:

telegram-cloud-photo-size-4-5879736595760919069-y
telegram-cloud-photo-size-4-5879736595760919069-y591Ă—1280 67.7 KB

1 Like
9

Hello one of the users alert me that in B4 the icon is not showing, is related that B4 uses Font Awesome 5, so for who wants to use the code above there is the code fixed to B4:

<a href="https://api.whatsapp.com/send?phone=1234567890&text=Please%20contact%20me%20about%20the%20following:" class="float" target="_blank">
<i class="fab fa-whatsapp my-float"></i>
</a>

<style>
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:16px;
}
</style>
2 Likes
10

how can I change colour of the icon when mouse hover?

11

Hello @theenrico just add the following code between .float and .my-float:

.float:hover {
	color:#cb2ff1;
}

Hope it helps you…

1 Like
12

Hello everyone. Today I found an interesting article about WhatsApp. As described, it is suitable for use in a browser. I don’t really understand what is written there, I’m just learning) but it’s interesting that this truth can be built in BLOCSAPP. This is where I read Floating Whatsapp Click To Chat Button In jQuery - venom-button | Free jQuery Plugins

13

Hi @LyalkoDenis, I think the solution to your problem is going to be there very soon. When watching @PeteSharp tutorials I do see a WhatsApp icon in the bottom left corner and its not on his website https://blocsbuilder.com. He must be cooking something! :man_cook: :woman_cook: :new_zealand: :star_struck: :upside_down_face:

2020-12-15_20-19-59
2020-12-15_20-19-592584Ă—1564 295 KB

2 Likes
14

Also want to have this :slight_smile:
@PeteSharp cooking something ?

1 Like
15

Hello all, that is not entirely true, the only think they have is like a modal with a theme of what’s app and you have a field to input a message and when you press send it will open the web WhatsApp.

2 Likes
16

Yes, as @Pealco says, It’s a fake chat window that sends the first message. My Bric has a similar feature you can enable or disable.

17

I like this because I don’t need to install the version on the PC. I wonder who came to your site, he needs to install the application on a PC?

18

Where can I download your bloc for whatsapp?

19

It hasn’t been released yet. Soon though.

2 Likes
20

Now it has! ChatPosh | Blocs Store