Vai al contenuto
OmniChannels.ai
Menu

Strumento gratuito

Pulsante chat WhatsApp per il vostro sito web

Aggiungete un pulsante WhatsApp flottante a qualsiasi sito in pochi minuti. Impostate numero, messaggio precompilato, colore, posizione, saluto e ritardo, guardatelo dal vivo in un'anteprima desktop o mobile, poi copiate un piccolo snippet autonomo con i passaggi di installazione per WordPress, Shopify, Wix e HTML semplice.

Gratis · senza registrazione · funziona nel vostro browser

Numero e messaggio

Scrivetelo come lo comporreste in locale, oppure iniziate con + o 00. Spazi, trattini e parentesi vanno bene.

Compare nella casella di testo del cliente, che può modificarlo prima di inviarlo. Arabo, emoji e a capo vengono codificati per voi.

Impostazioni del pulsante

Posizione

Un’icona bianca su questo colore ha un contrasto di 2.0:1, inferiore alla soglia di 3:1 indicata per le icone. Ha comunque un nome accessibile, ma un verde più scuro si legge meglio.

Mostrato accanto al pulsante; i visitatori possono chiuderlo per il resto della visita. Lasciate vuoto per non mostrare il fumetto.

Letta dagli screen reader e mostrata come suggerimento al passaggio del mouse.

Mostra su

0 lo mostra subito. Un breve ritardo evita di competere con la principale call to action della vostra pagina.

Anteprima dal vivo

Il vostro codice da incorporare

Inserite un numero WhatsApp valido per completare il codice.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>Ciao 👋 Come possiamo aiutare?</span><button type="button" class="ocwa-x" aria-label="Chiudi">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=Buongiorno%21%20Ho%20una%20domanda%20sul%20vostro%20sito." target="_blank" rel="noopener" aria-label="Chat su WhatsApp con il nostro team" title="Chat su WhatsApp con il nostro team"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

Autonomo: circa 3,8 KB, nessuno script esterno, font o immagini, nessun cookie.

Come installarlo

  1. 1Copiate il codice qui sopra.
  2. 2Installate un plugin per il codice di intestazione e piè di pagina, come WPCode, oppure aprite Aspetto → Editor se usate un tema a blocchi.
  3. 3Incollate il codice nella sezione del piè di pagina (fine del body) oppure in un blocco HTML personalizzato nella parte del template del piè di pagina.
  4. 4Salvate, svuotate la cache con l’eventuale plugin di caching e provate dal telefono.

Le chat si accumulano su un solo telefono? Rispondete a queste chat da una casella condivisa del team

Nulla di ciò che scrivete qui viene inviato ai nostri server.

Risposta breve

Un pulsante chat WhatsApp è un piccolo pulsante flottante su un sito web che, al clic, apre una chat WhatsApp con l'azienda. È un link a https://wa.me/ più il numero dell'azienda e un messaggio precompilato facoltativo, con lo stile di un'icona in un angolo della pagina. I visitatori avviano la conversazione dal proprio telefono o da WhatsApp Web, senza moduli né dover salvare il numero.

Infrastruttura affidabileMeta Business Solution Provider ufficialePartner Google RBMMembro GSMAISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type IIConforme al GDPR

Come aggiungere un pulsante WhatsApp al vostro sito web

  1. 1

    Inserite numero e messaggio

    Scegliete il paese, digitate il vostro numero WhatsApp e scrivete il messaggio che i visitatori invieranno, ad esempio una domanda su un ordine.

  2. 2

    Personalizzate il pulsante

    Scegliete angolo, colore, fumetto di saluto, dispositivi e un ritardo. L'anteprima dal vivo mostra il pulsante su una pagina di esempio su desktop e mobile.

  3. 3

    Copiate il codice

    Copiate lo snippet. Sono pochi kilobyte di HTML, CSS e JavaScript senza richieste esterne, cookie né tracciamento.

  4. 4

    Incollatelo prima di </body>

    Seguite i passaggi per WordPress, Shopify, Wix o HTML semplice, pubblicate e provate il pulsante su un telefono e su un computer.

Cosa fa il codice generato

Lo snippet aggiunge un link a posizione fissa nell'angolo in basso delle vostre pagine. Il link è un URL standard di click-to-chat nel formato documentato da WhatsApp nella sua pagina di assistenza (faq.whatsapp.com/5913398998672934): https://wa.me/ più il vostro numero internazionale completo e, se volete, ?text= con un messaggio codificato come URL. Apre l'app WhatsApp sui telefoni e WhatsApp Web o l'app desktop sui computer.

Tutto è inline: il glifo di WhatsApp è un tracciato SVG, gli stili hanno come ambito un unico prefisso di classe e lo script è fatto di poche righe che gestiscono il ritardo e il saluto chiudibile. Non ci sono script, font, immagini né cookie esterni, quindi il pulsante non rallenta la pagina né aggiunge un tracker di terze parti.

Accessibile e pronto per l'RTL fin dalla progettazione

I pulsanti flottanti sono spesso solo icone, il che lascia chi usa uno screen reader a indovinare. Il link generato ha un aria-label che controllate voi (“Chat with us on WhatsApp” per impostazione predefinita), un contorno di focus visibile per chi usa la tastiera e un'icona decorativa nascosta alle tecnologie assistive. Il saluto ha un vero pulsante di chiusura con una propria etichetta.

I visitatori che impostano il dispositivo per ridurre il movimento vedono il pulsante senza l'animazione di ingresso né lo zoom al passaggio. Il saluto usa la direzione del testo automatica e proprietà CSS logiche, quindi l'arabo e gli altri testi da destra a sinistra si impaginano correttamente, e potete posizionare il pulsante in basso a sinistra per i siti RTL.

  • Link raggiungibile da tastiera con un nome accessibile chiaro.
  • Rispetta prefers-reduced-motion.
  • Nascosto in stampa e facoltativo per tipo di dispositivo.
  • Chiusura del saluto ricordata per la durata della visita, senza cookie.

Scegliere colore, posizione e tempi

In basso a destra è la convenzione nei siti da sinistra a destra, mentre in basso a sinistra si adatta spesso ai siti in arabo, ma verificate che il pulsante non copra un banner dei cookie, l'icona di un chatbot o la barra di checkout su mobile. Il verde WhatsApp (#25D366) è subito riconoscibile; con un'icona bianca ha un contrasto di circa 2:1, quindi se l'accessibilità è la priorità un verde più scuro come #128C7E dà circa 4:1.

Un ritardo di pochi secondi permette ai visitatori di leggere la pagina prima che compaia il pulsante, e mostrarlo solo su mobile è una scelta sensata se il vostro team risponde dai telefoni. Mantenete il saluto a una riga breve e specifica, come “Domande sulla consegna? Scrivici in chat.”

Il pulsante ufficiale Chat on WhatsApp e le regole di brand

WhatsApp pubblica anche un pulsante di brand “Chat on WhatsApp” in verde e bianco e in tre dimensioni, e chiede alle aziende di usarlo senza modifiche. Secondo il centro assistenza di WhatsApp è attualmente disponibile solo in inglese. Il pulsante flottante a icona di questo strumento è un modello diverso e compatto; qualunque usiate, non alterate il logo di WhatsApp né lasciate intendere che WhatsApp approvi la vostra azienda.

Quando un solo telefono non basta più

Un pulsante sul sito può moltiplicare rapidamente le chat in arrivo. Nell'app WhatsApp Business le conversazioni risiedono su un numero limitato di dispositivi collegati. Sulla WhatsApp Business Platform (API), lo stesso link wa.me può alimentare una casella condivisa del team, dove le chat vengono assegnate agli operatori, gestite prima da chatbot o agenti IA e seguite con template approvati dopo la chiusura della finestra di assistenza clienti di 24 ore.

Pianificate chi risponde, in quali orari e con quale rapidità. Indicate nel saluto gli orari di risposta se non coprite le chat 24 ore su 24.

Domande sul pulsante WhatsApp per il sito

Come aggiungo un pulsante WhatsApp al mio sito web?

Generate il codice qui sopra con il vostro numero e messaggio, copiatelo e incollatelo subito prima del tag di chiusura </body> del vostro sito, oppure nell'area del codice del piè di pagina del vostro website builder. Comparirà poi su ogni pagina.

Questo widget chat WhatsApp è gratuito?

Sì. Il generatore e il codice sono gratuiti, non richiedono un account e non hanno limiti di utilizzo. Il pulsante rimanda direttamente a WhatsApp, quindi non c'è alcun abbonamento né script ospitato dietro.

Un pulsante WhatsApp rallenterà il mio sito?

No. Lo snippet è di pochi kilobyte di HTML, CSS e JavaScript inline e non effettua richieste di rete finché un visitatore non lo clicca, a differenza dei widget che caricano script, font e tracker esterni.

Come aggiungo un pulsante WhatsApp in WordPress?

Usate un plugin per il codice di intestazione e piè di pagina come WPCode e incollate lo snippet nella sezione del piè di pagina, oppure aggiungetelo a un blocco HTML personalizzato nel modello del piè di pagina se usate un tema a blocchi. Svuotate la cache e provate.

Come aggiungo un pulsante WhatsApp a Shopify?

Nell'amministrazione di Shopify aprite Negozio online, Temi, poi Modifica codice sul vostro tema attivo. Aprite layout/theme.liquid e incollate lo snippet subito prima di </body>, poi salvate e controllate il vostro negozio su mobile.

Posso mostrare il pulsante WhatsApp solo su mobile?

Sì. Togliete la spunta a Desktop nel generatore e il pulsante viene nascosto sugli schermi larghi 768 pixel e oltre. Potete anche togliere la spunta a Mobile per mostrarlo solo su desktop.

Più operatori possono rispondere alle chat del pulsante sul sito?

Non bene da un solo telefono. Collegate il numero alla WhatsApp Business API e instradate le chat verso una casella condivisa del team, dove più operatori e chatbot possono rispondere allo stesso numero.

Altri strumenti gratuiti