Zelf een bel- en Whatsappknop maken met html en css

Belknop in css gr1

Als bezoekers je website hebben gevonden en na het lezen van een artikel met vragen zitten kunnen ze contact opnemen via het contactformulier. Hier heb je uiteraard ook je telefoonnr staan om via de telefoon vragen of problemen mee te kunnen bespreken.
Dat is met een desktop of een laptop natuurlijk geen probleem omdat het telefoonnr in beeld staat en je gelijk kunt bellen mocht je met dringende vragen zitten.

Als je de website op een mobiele telefoon bekijkt kun je ook contact opnemen via het contactformulier maar wil je contact opnemen via de telefoon moet je eerst het telefoonnummer onthouden of opschrijven, als je een belknop hebt waar de bezoeker op kan klikken om zo gelijk met je te kunnen bellen is dat een extra service. 

De oplossing hiervoor is een belknop samen met een WhatsApp knop zodat er gelijk via een mobiele telefoon contact kan worden opgenomen. Als de bezoeker op bijvoorbeeld de belknop klikt gaat de mobiele telefoon bellen naar het nummer dat aan de belknop is gelinkt. Maar als de bezoeker je liever eerst een WhatsApp bericht wil sturen kan dit ook heel eenvoudig door op de WhatsApp knop te klikken, de mobiele telefoon opent de app en via WhatsApp kan de bezoeker een bericht sturen. 

Ook een belknop en/of een berichtje via het zeer populaire WhatsApp

In deze blog ga ik dit uitleggen zodat je zelf ook een belknop en/of een knop voor WhatsApp op je website hebt staan.
Eerst zal je de afbeeldingen moeten hebben van een knop voor het bellen en/of WhatsAppen, daar kom ik zo op terug.

De onderstaande afbeeldingen zijn nu ook zichtbaar op een desktop maar dienen alleen als voorbeeld. Bellen met een desktop of laptop gaat niet maar whatsapp op een desktop of laptop gaat wel als je het programma van Whatsapp installeert, zo kun je met je eigen whatsapp toch een bericht sturen via de desktop of laptop.

Op een mobiel werkt dit perfect, test dit maar eens.

Test de belknopTest de whatsapp knop

Ik maak deze plaatjes met Photoshop, maar dit zou je ook met canva kunnen doen, deze online tool heeft vele mogelijkheden om zoiets te maken.

Voor de plaatje van het belknopje en de afbeelding van WhatsApp kun je het zipbestand downloaden, hier heb ik ook de code instaan die je kunt gebruiken om de knopjes te linken aan je telefoonnummer, dit is een gewoon kladblok bestand dus geen last van enge dingen.

Pak het gezipte bestand uit, hierin staan 5 bestanden, 2 plaatjes en 3 tekstbestandjes die je tijdens het linken moet gebruiken. Je kunt natuurlijk ook je eigen plaatjes gebruiken met een mobiele telefoon ofzo, wat je zelf leuk vindt.
Nu moeten deze plaatjes eerst op de webserver komen van je website, upload daarvoor de plaatje eerst naar de imagemap.

Nu moet je een artikel of module gaan maken zodat de plaatje zichtbaar worden op je website, maak daarvoor een artikel of module aan, zelf gebruik ik hier een module voor zodat deze op alle gewenste plaatsen zichtbaar kan worden gemaakt. Als je een nieuwe module hebt aangemaakt plaats je de gewenste plaatjes hierin.

Linken van html telefoonnr

Nu ga je het plaatje linken aan je telefoonnr, klik hiervoor op het bel mij plaatje.

Belknop linken aan telnr

Ga dan naar het ketting symbooltje, (groene pijl) dan kom het scherm zoals hier onder staat. Vul hier je eigen nr in incl. tel: ervoor, dus tel:0612345678

Belknop linken aan telnr stap 2

Vergeet niet om op insert te klikken. Nu heb je een werkende belknop op je website zodat het eenvoudiger is om contact op te nemen met een mobiele telefoon.

Werkende whatsapp knop op je website maken

Voor het symbool van WhatsApp doe je hetzelfde als bij de belknop, alleen vul je bij de url waar je het telefoonnr hebt ingevuld nu de code:

https://api.whatsapp.com/send?phone=0612345678

gebruik hier ook je eigen telefoonnr voor. Deze code staat ook in het tekstbestand wat in de download staat.

Als er nu op het WhatsApp symbool wordt geklikt komt de bezoeker in zijn eigen WhatsApp omgeving uit om een bericht te sturen.

Media Queries toevoegen aan de css van je template

Nu moet er nog worden voorkomen dat de belknop en het WhatsApp knopje word weergegeven op een desktop, alleen weergeven op een mobiel apparaat is genoeg omdat er met een computer toch niet kan worden gebeld of een WhatsApp kan worden verstuurd.

Hier moet er een nieuwe class voor worden aangemaakt die voorkomt dat de afbeeldingen van de belknop en WhatsApp zichtbaar zijn op een desktop of laptop.

Om dit te doen moet je een class toevoegen aan je module of artikel, open hiervoor je artikel in de code editor, bij JCE is dat rechtsbovenaan het artikel blok, nu zie je de code van je artikel of module.

Ga voor de eerste regel staan en klik op enter, nu krijg je een lege eerste regel waar je de class neerzet die er voor zorgt dat de plaatje alleen op een mobiel scherm zichtbaar zijn, helemaal onderaan sluit je de Div weer af met net als in het voorbeeld. De code die je daar neerzet is:<div class="belwhats"> hier staan de plaatjes en teksten.

De class naam kun je zelf verzinnen, ik heb deze nu belwhats genoemd maar hoe je dit noemt maakt helemaal niets uit als je het ook maar gebruikt in de code die de zichtbaarheid bepaalt.

Nu gaan we de class in de template zetten zodat deze uitgevoerd wordt en de plaatje alleen zichtbaar zijn op schermen die kleiner zijn dan 720px wat meestal mobiele schermen zijn. Ga naar extenties-templates nu kom je op de pagina waar alle templates staan die op je website staan.

Als voorbeeld gebruiken we nu Protostar welke standaard in Joomla aanwezig is. Ga nu naar de rechtse rij met de naam template:

klik nu op protostar
maak een nieuw bestand aan met de naam user
kies bij bestandstype voor css, klik nu bij de mappen op css en dan op maken
let er wel op dat je nieuwe bestand bij css komt te staan anders werkt het niet

Open het nieuwe user.css bestand, nu moet je het onderstaande bestand er naar toe kopieren. De class naam belwhats moet beginnen met een punt dus dat is geen schrijffout.

/***** Belknop en WhatsApp knopje******/
@media screen and (min-width: 720px) {
.belwhats{
display:none;
}
}

Nu worden de afbeeldingen van de belknop en Whatsapp knop alleen getoond op schermen die kleiner zijn dan 720px omdat als de schermafmeting groter is als 720px de weergave (display) op none staat.

Als je een ander template gebruikt zoek dan naar user.css of custom.css. Nu zou het moeten werken, controleer dit door je scherm kleiner te maken of de website te openen op je telefoon.

Het nadeel hiervanvan is dat dit alleen voor gebruikers van een Android telefoon of een iPhone is te gebruiken, de gebruikers van een oude Blackberry of Windows telefoon kunnen hier geen gebruik van maken omdat het eenvoudigweg niet gaat werken maar deze systemen worden bijna niet meer gebruikt.

Kun je er niet uitkomen of ervaar je problemen met het toepassen van de belknop neem dan vrijblijvend contact op.

 Joomla Webdesign Dussen
 Bredeweer 1
 4271 CJ Dussen
 06 - 10 72 15 64