|
WhatsApp is the most popular messaging app. This article describes how you can add the WhatsApp share button to your website. In this example we make a simple website that uses a Whatsapp share button when you click on it will open on the Whatsapp app on your system and your message was already printed there.
Note: This will work only with WhatsApp installed in your system (desktop/laptop)
Example: Create a simple webpage using the function, Sharing will be done when the user clicks on its button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity=
"sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
crossorigin="anonymous">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.navbar {
width: 100%;
display: flex;
justify-content: center;
}
.logo img {
max-width: 100px;
}
.section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.box-main {
max-width: 600px;
padding: 20px;
}
button {
width: 170px;
height: 50px;
background-color: #4ECC5B;
color: #fff;
border: 1px solid white;
font-size: 1rem;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #3ae04b;
}
</style>
</head>
<body>
<nav class="navbar background">
<ul class="nav-list">
<div class="logo">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" />
</div>
</ul>
</nav>
<section class="section">
<div class="box-main">
<div class="firstHalf">
<h1 class="text-big">
7 Best Tips To Speed Up Your Job Search in 2022
</h1>
<p class="text-small">
Hello GFG
</p>
<button class="fab fa-whatsapp" onclick="whatsapp()">
Share on Whatsapp
</button>
</div>
</div>
</section>
<script type="text/javascript">
function whatsapp() {
window.open(
'whatsapp://send?text=Hello folks, GeekforGeeks giving 40% Off on DSA course');
}
</script>
</body>
</html>
Output:
|
