Francisco Chaves

Software Developer.
Chatbot Developer.

Modo escuro

Gerador de Links para WhatsApp

13 de janeiro de 2024

Algoritmo
JavaScript
Produtividade
WhatsApp

Olá pessoal, hoje iremos criar um programa para gerar links personalizados e facilitar o compartilhamento no WhatsApp.

O WhatsApp desempenha um papel crucial em nossas comunicações diárias, e ter uma maneira fácil de gerar links personalizados pode simplificar ainda mais a forma como nos conectamos com amigos, familiares e colegas.

Link para a Versão Web

Quando falamos sobre a versão web do WhatsApp, queremos garantir que os usuários possam iniciar uma conversa com facilidade. O código JavaScript a seguir trata de gerar um link que abre o WhatsApp Web com o número de telefone e a mensagem predefinidos:

const whatsappWebLink = `https://web.whatsapp.com/send?phone=${phoneNumber}${encodedMessage}`;

Link para a Versão Mobile

Por outro lado, para a versão mobile, precisamos de um link que funcione bem em dispositivos móveis. O seguinte trecho de código gera um link para a versão mobile do WhatsApp:

const whatsappMobileLink = `https://api.whatsapp.com/send?phone=${phoneNumber}${encodedMessage}`;

Desenvolvimento do Projeto

A estrutura básica do código HTML, destacando os elementos principais, como campos de entrada para o número de telefone e mensagem, além do botão para gerar os links.

<h1>Links para WhatsApp</h1>

<form id="whatsappForm">
  <label for="phoneNumber">Número de Telefone (com código do país):</label>
  <input
    type="text"
    id="phoneNumber"
    name="phoneNumber"
    placeholder="Ex: 5511999999999"
    required
  />

  <label for="message">Mensagem:</label>
  <input
    type="text"
    id="message"
    name="message"
    placeholder="Digite sua mensagem"
    required
  />

  <button type="button" onclick="generateWhatsAppLink()">Gerar Links</button>
</form>

<div id="result"></div>

Para deixar mais atraente o formulário e resultados será utilizado CSS. O código CSS abaixo proporcionará uma experiência visual mais agradável.

body {
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

form {
  max-width: 400px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 8px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  background-color: #4caf50;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #45a049;
}

#result {
  margin-top: 20px;
}

Na geração dos links a função generateWhatsAppLink() em JavaScript, codifica a mensagem e gera os links para a versão web e mobile do WhatsApp.

function generateWhatsAppLink() {
  // Obtenção de dados do usuário
  const phoneNumber = document.getElementById('phoneNumber').value;
  const message = document.getElementById('message').value || '';

  // Codificação da mensagem
  const encodedMessage = message ? `&text=${encodeURIComponent(message)}` : '';

  // Geração de links para versão web e mobile
  const whatsappWebLink = `https://web.whatsapp.com/send?phone=${phoneNumber}${encodedMessage}`;
  const whatsappMobileLink = `https://api.whatsapp.com/send?phone=${phoneNumber}${encodedMessage}`;

  // Exibição dos links gerados
  const resultContainer = document.getElementById('result');
  resultContainer.innerHTML = `
    <h2>Links Gerados:</h2>
    <p><strong>WhatsApp Web:</strong> <a href="${whatsappWebLink}" target="_blank">${whatsappWebLink}</a></p>
    <p><strong>WhatsApp Mobile:</strong> <a href="${whatsappMobileLink}" target="_blank">${whatsappMobileLink}</a></p>
  `;
}