WhatsApp es la aplicación de mensajería más popular. Este artículo describe cómo puede agregar el botón Compartir de WhatsApp a su sitio web. En este ejemplo, creamos un sitio web simple que usa un botón para compartir de Whatsapp cuando hace clic en él, se abrirá en la aplicación de Whatsapp en su sistema y su mensaje ya estaba impreso allí.
Nota: Esto funcionará solo con WhatsApp instalado en su sistema (computadora de escritorio/portátil)
Ejemplo: Cree una página web simple usando la función, Compartir se realizará cuando el usuario haga clic en su botón.
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>
button {
width: 170px;
height: 50px;
background-color: #4ECC5B;
color: #fff;
border: 1px solid white;
font-size: 1rem;
cursor: pointer;
}
button:hover {
background-color: #3ae04b;
}
</style>
</head>
<body>
<div>
<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">
Hunting down a relevant job requires
proper techniques for showcasing your
potential to the employer. <br> But with
the advent of COVID-19, it has become
a bit challenging and competitive to
reach out for your dream job. <br> Many
individuals have lost their jobs
during these times, and on the other
hand, freshers are facing difficulties
while applying for a new job. <br> But
there is no need for panic, you can
change your ways and streamline things
in a way that you get a proper result.
</p>
<button class="fab fa-whatsapp"
onclick="whatsapp()">
Share on Whatsapp
</button>
</div>
</div>
</section>
</div>
</body>
<script type="text/javascript">
function whatsapp() {
window.open
('whatsapp://send?text=Hello folks, GeekforGeeks giving 40% Off on DSA course')
}
</script>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por gurjeetsinghvirdee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA