Your AI Connector Docs

Widget WhatsApp

Integrazione del Widget WhatsApp

Aggiungi un pulsante di chat WhatsApp fluttuante al tuo sito web con questa semplice guida.

Buono a sapersi. Il widget di WhatsApp è un semplice pulsante “clicca per chattare”: cliccandoci sopra, si apre WhatsApp per il visitatore in modo che possa inviarti un messaggio. Non importa i messaggi nella tua casella di posta Chat né attiva l’IA autonomamente. Per un’esperienza di chat con IA integrata direttamente nella pagina del tuo sito web, utilizza invece il Chat Widget dedicato.

Vuoi solo un link semplice o un tuo pulsante personalizzato? Se non desideri il widget fluttuante e preferisci collegare un tuo pulsante (o una porzione di testo) direttamente a una chat di WhatsApp, passa alla sezione Preferisci un link o un pulsante semplice? (wa.me) qui sotto. Per un equivalente via SMS, consulta Aggiungere un link Clicca per inviare un SMS.

Installazione

  1. Apri il file HTML del tuo sito web in un editor di testo.
  2. Individua il tag </body> (solitamente alla fine del file HTML).
  3. Incolla il seguente script subito prima del tag </body>:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  1. Nel codice qui sopra, sostituisci:
    • NUMBER con il tuo numero WhatsApp
    • Ad esempio: per il numero +1 555 123 4567, usa semplicemente: 15551234567

Aggiunta di un messaggio personalizzato

Se desideri che appaia un messaggio precompilato quando qualcuno clicca sul pulsante:

  1. Usa invece questo codice:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. Esempio con un numero e un messaggio reali:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

Cosa otterrai

Dopo l’installazione, vedrai automaticamente:

  • Un pulsante WhatsApp verde nell’angolo in basso a destra del tuo sito web
  • Il pulsante rimane visibile durante lo scorrimento della pagina
  • Il pulsante funziona perfettamente sui dispositivi mobili
  • Un’animazione discreta appare quando si passa il mouse sopra il pulsante

Informazioni aggiuntive

  • Il tuo numero di telefono può essere scritto con o senza:
    • Segno più (+)
    • Spazi
    • Trattini (-)
    • Questi verranno elaborati automaticamente in modo corretto
  • Il messaggio può contenere spazi naturalmente
  • Non sono necessari file o installazioni aggiuntive
  • Il pulsante si adatta automaticamente agli schermi dei dispositivi mobili

Esempio di pagina web completa 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

Il widget qui sopra ti fornisce un pulsante mobile già pronto. Ma se hai già il tuo pulsante (o un link nel menu, un’immagine o un testo) e vuoi semplicemente che apra una chat WhatsApp con il tuo numero, non hai affatto bisogno del widget: ti basta collegarlo a un URL wa.me.

Il formato è:

https://wa.me/NUMBER

Sostituisci NUMBER con il tuo numero completo in formato internazionale — solo cifre, senza segno più, spazi o trattini. Ad esempio, per +31 6 5801 5937 useresti:

https://wa.me/31658015937

Precompilazione di un messaggio

Per avere un messaggio già scritto all’apertura della chat, aggiungi ?text= seguito dal tuo messaggio:

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

Gli spazi nel messaggio devono essere scritti come %20 (è semplicemente il modo in cui i link gestiscono gli spazi).

Inserimento su un pulsante

Collega qualsiasi pulsante a quell’URL — esattamente nello stesso modo in cui collegheresti un pulsante a qualsiasi altro indirizzo web. In HTML grezzo appare così:

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

In un costruttore di siti web (Wix, Squarespace, WordPress, Webflow, ecc.), aggiungi un pulsante come al solito e incolla l’URL wa.me nel suo campo “link” / “URL”.

Vuoi un link breve che ruoti tra diversi numeri, ricordi i visitatori ricorrenti e tenga traccia dei clic? Utilizza i Link brevi (alla voce Impostazioni → Canali) invece di un URL wa.me non elaborato.