Reimar/whatsapp-send
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add share buttons

Browse Source
This commit is contained in:
Reimar 2025-03-15 16:17:58 +01:00
parent cdebf5beb7
commit 7a384b0885
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
2 changed files with 62 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@ -5,6 +5,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#3C503A" /> <meta name="theme-color" content="#3C503A" />
<meta name="description" content="Send WhatsApp messages directly to a phone number without adding as a contact first" />
<link rel="manifest" href="webmanifest.json" /> <link rel="manifest" href="webmanifest.json" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<script> <script>
@ -51,11 +52,19 @@
} }
}); });
} }
function share() {
navigator.share({
text: "Send WhatsApp messages directly to any phone number without adding them as a contact first",
url: location.href,
});
}
</script> </script>
</head> </head>
<body> <body>
<h1>Start a new WhatsApp chat</h1> <h1>Start a new WhatsApp chat</h1>
<p>Type a phone number, including country code</p> <p>Type a phone number, including country code</p>
<input id="phone" type="tel" placeholder="+1 (123) 456-7890" /> <input id="phone" type="tel" placeholder="+1 (123) 456-7890" />
<details id="message-wrapper"> <details id="message-wrapper">
<summary>Write a message</summary> <summary>Write a message</summary>
@ -63,23 +72,53 @@
</details> </details>
<button id="send" class="primary" onclick="submit()">Submit</button> <button id="send" class="primary" onclick="submit()">Submit</button>
<br> <br>
<button onclick="copyLink()">
<button id="copy-link" onclick="copyLink()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" style="transform: rotate(45deg);"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" style="transform: rotate(45deg);">
<path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z"/> <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z"/>
</svg> </svg>
Copy WhatsApp link Copy WhatsApp link
</button> </button>
<br> <br>
<div id="add-to-home-screen">
<span>Add to your home screen</span> <center>
<button class="primary" onclick="install()">Add</button> <div id="add-to-home-screen">
</div> <span>Add to your home screen</span>
<button class="primary" onclick="install()">Add</button>
</div>
</center>
<button id="share" onclick="share()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
<path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5"/>
</svg>
Share this site
</button>
<p id="or-share-using">or share using</p>
<a href="whatsapp://send?text=Send+WhatsApp+messages+directly+to+any+phone+number+without+adding+them+as+a+contact+first%3A+https%3A%2F%2Freim.ar%2Ftools%2Fwhatsapp-send%2F"><button>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
WhatsApp
</button></a>
<a href="tg://msg?text=Send+WhatsApp+messages+directly+to+any+phone+number+without+adding+them+as+a+contact+first%3A+https%3A%2F%2Freim.ar%2Ftools%2Fwhatsapp-send%2F"><button>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
Telegram
</button></a>
<a href="https://x.com/intent/post?text=Send+WhatsApp+messages+directly+to+any+phone+number+without+adding+them+as+a+contact+first%3A+https%3A%2F%2Freim.ar%2Ftools%2Fwhatsapp-send%2F"><button>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
Twitter
</button></a>
<p id="desc"> <p id="desc">
By default, WhatsApp does not allow you to message By default, WhatsApp does not allow you to message
users who are not in your contacts list. This website users who are not in your contacts list. This website
allows you to directly message any phone number through allows you to directly message any phone number through
WhatsApp, without having to add that number to your contacts. WhatsApp, without having to add that number to your contacts.
</p> </p>
<input id="copy-input" type="text" /> <input id="copy-input" type="text" />
</body> </body>
</html> </html>

22
style.css
View File

@ -7,10 +7,9 @@ body {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
h1 { h1 {
margin-bottom: 0;
opacity: 0.7; opacity: 0.7;
} }
p, summary { p, summary, i {
opacity: 0.5; opacity: 0.5;
font-size: 0.85rem; font-size: 0.85rem;
} }
@ -32,6 +31,7 @@ summary:focus {
height: 1.25rem; height: 1.25rem;
position: relative; position: relative;
top: 0.25rem; top: 0.25rem;
padding-right: 0.15rem;
} }
input, textarea { input, textarea {
@ -88,13 +88,17 @@ button.primary:focus {
} }
#send { #send {
margin-top: 1rem;
margin: 0.25rem 0; margin: 0.25rem 0;
margin-top: 2rem;
}
#copy-link {
margin-bottom: 2rem;
} }
#add-to-home-screen { #add-to-home-screen {
background-color: white; background-color: white;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 2rem; margin: auto 2rem;
margin-top: 2rem;
border-radius: 4px; border-radius: 4px;
max-width: 400px; max-width: 400px;
display: none; /* Shown through JS */ display: none; /* Shown through JS */
@ -108,4 +112,14 @@ button.primary:focus {
margin-top: 2rem; margin-top: 2rem;
font-size: 0.75rem; font-size: 0.75rem;
} }
#share {
margin-top: 2rem;
}
#or-share-using {
font-size: 0.75rem;
font-style: italic;
margin: 0.5rem auto;
margin-top: 0.75rem;
opacity: 0.3;
}