/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [title, setTitle] = useState(""); const [embedCode, setEmbedCode] = useState(""); const [error, setError] = useState(""); const generateEmbedCode = () => { setError(""); const code = ``; setEmbedCode(code); }; return (

🌐 Quick WhatsApp Sender

Share messages quickly with a single click

setTitle(e.target.value)} /> {error && {error}}

{embedCode && (

Embed Code

Add the text in HREF/URL{" "} Copy the above code and embed it on your site

)}

Preview

Note: Customize the button text above. Once generated, copy the code to embed on your website.

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Quick WhatsApp Sender

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; background-color: #f0f2f5; } .container { max-width: 450px; margin: 40px auto; padding: 20px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .header h1 { font-size: 28px; text-align: center; color: #128c7e; } .header p { text-align: center; color: #666; margin-top: 5px; } .form { margin-top: 20px; } .input { width: 100%; padding: 15px; border-radius: 8px; border: 1px solid #ddd; font-size: 16px; margin-bottom: 10px; outline: none; transition: border-color 0.3s; } .input:focus { border-color: #128c7e; } .input-error { border-color: #e74c3c !important; } .error-message { color: #e74c3c; font-size: 14px; margin-bottom: 10px; } .primary-btn { width: 100%; padding: 15px; background-color: #25d366; color: white; border: none; border-radius: 8px; font-size: 18px; cursor: pointer; transition: background-color 0.3s; } .primary-btn:hover { background-color: #128c7e; } .embed-section { margin-top: 20px; background-color: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px solid #ddd; } .embed-code { width: 100%; padding: 10px; border-radius: 8px; font-family: monospace; background-color: #f5f5f5; border: 1px solid #ddd; margin-bottom: 10px; } .copy-note { font-size: 14px; color: #666; text-align: center; } .preview { margin-top: 20px; text-align: center; } .preview-btn { padding: 15px 30px; background-color: #128c7e; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } .preview-btn:hover { background-color: #075e54; } .note { font-size: 14px; color: #666; margin-top: 15px; text-align: center; } .whatsapp-icon { margin-right: 8px; } `;

Whatsapp_Send

Version 1