WhatsApp Chat Integration — Documentazione

Aggiunge al tuo negozio PrestaShop un pulsante WhatsApp click-to-chat. I clienti toccano il pulsante flottante, WhatsApp si apre con il numero del negozio già selezionato e, facoltativamente, con un messaggio già scritto per loro.

WhatsApp Chat Integration

WhatsApp Chat Integration offre al tuo negozio un pulsante di contatto WhatsApp diretto, senza aggiungere chatbot, dashboard esterne, servizi in abbonamento o connessioni alla WhatsApp Business API. Il modulo mostra un pulsante flottante nel front office e crea un normale link WhatsApp click-to-chat usando il numero di telefono configurato.

La configurazione predefinita posiziona un’icona verde WhatsApp nell’angolo in basso a destra, con un breve tooltip e animazione pulse. Puoi anche usare un pulsante più largo con testo, cambiare posizione, regolare colore e dimensione, mostrare o nascondere il pulsante su mobile, ritardarne la comparsa e scegliere su quali tipi di pagina visualizzarlo.

How It Works

Inserisci il tuo numero di telefono WhatsApp e, se vuoi, un messaggio precompilato. Il modulo aggiunge quindi il pulsante tramite gli hook front-office di PrestaShop e collega i clienti a WhatsApp usando questo formato:

https://wa.me/48511511286

Quando è configurato un messaggio precompilato, il modulo lo aggiunge come parametro text:

https://wa.me/48511511286?text=Hi%21%20I%27d%20like%20to%20ask%20about%20this%20product.

Il modulo supporta due segnaposto per il messaggio:

{product}
{url}

Messaggio di esempio:

Hi! I have a question about {product}: {url}

In una pagina prodotto, {product} viene sostituito con il nome del prodotto corrente. {url} viene sostituito con l’URL della pagina corrente.

Installation

1. Nel Back Office, vai su Modules → Module Manager
2. Fai clic su Upload a module e seleziona il file ZIP
3. Dopo l’installazione, fai clic su Configure
4. Inserisci il tuo numero di telefono WhatsApp
5. Salva la configurazione

Configuration

Enable Widget — Attiva o disattiva il pulsante WhatsApp. Ti permette di sospendere il canale di contatto senza disinstallare il modulo.

Phone Number — Inserisci il numero di telefono completo con prefisso internazionale, usando solo cifre. Non includere +, spazi, parentesi o trattini.

48511511286
447700900123
4915112345678

Il controllo di configurazione si aspetta un numero composto solo da cifre:

^[0-9]{7,20}$

Pre-filled Message — Testo facoltativo che appare nella casella del messaggio WhatsApp del cliente prima dell’invio.

Hi! I have a question about {product}: {url}

Position — Scegli dove deve apparire il pulsante flottante.

bottom-right
bottom-left

Button Style — Scegli un’icona rotonda oppure una barra con testo.

icon
bar

Button Text — Testo mostrato solo quando è selezionato lo stile bar.

Chat with us

Button Color — Imposta il colore di sfondo del pulsante. Il colore predefinito è il verde WhatsApp.

#25D366

Button Size (px) — Controlla il diametro del pulsante con icona. Il valore predefinito è:

60

Margin from Edge (px) — Controlla la distanza dal bordo dello schermo. Il valore predefinito è:

20

Show Tooltip — Attiva o disattiva la piccola etichetta al passaggio del mouse.

1
0

Tooltip Text — Testo mostrato sopra il pulsante quando la visualizzazione del tooltip è attiva.

Need help? Chat with us!

Animation — Scegli l’animazione del pulsante.

pulse
bounce
none

Show on Mobile — Controlla se il widget appare per i visitatori da mobile.

1
0

Fallback Delay (seconds) — Ritarda la visualizzazione del pulsante quando il valore è superiore a zero. Imposta 0 per la visualizzazione immediata.

0
3
5

Show on Pages — Scegli dove deve apparire il pulsante.

all
product
category
checkout

L’opzione checkout copre i controller del carrello e dell’ordine usati dalle pagine di checkout PrestaShop.

Default Settings

Durante l’installazione, il modulo crea questi valori predefiniti:

ENABLED=1
PHONE=
MESSAGE=
POSITION=bottom-right
STYLE=icon
CTA_TEXT=Chat with us
COLOR=#25D366
SIZE=60
MARGIN=20
SHOW_TOOLTIP=1
TOOLTIP=Need help? Chat with us!
ANIMATION=pulse
SHOW_MOBILE=1
DELAY=0
PAGES=all

Il modulo salva le impostazioni con il prefisso di configurazione MPRWHATSAPP. Le chiavi di configurazione utili sono:

MPRWHATSAPP_ENABLED
MPRWHATSAPP_PHONE
MPRWHATSAPP_MESSAGE
MPRWHATSAPP_POSITION
MPRWHATSAPP_STYLE
MPRWHATSAPP_CTA_TEXT
MPRWHATSAPP_COLOR
MPRWHATSAPP_SIZE
MPRWHATSAPP_MARGIN
MPRWHATSAPP_SHOW_TOOLTIP
MPRWHATSAPP_TOOLTIP
MPRWHATSAPP_ANIMATION
MPRWHATSAPP_SHOW_MOBILE
MPRWHATSAPP_DELAY
MPRWHATSAPP_PAGES

Front-Office Placement

Il modulo registra questi hook PrestaShop:

displayHeader
displayBeforeBodyClosingTag
displayFooter

displayHeader carica il CSS del front-office. Il widget viene renderizzato verso la fine della pagina tramite displayBeforeBodyClosingTag, con displayFooter come hook aggiuntivo. Il modulo impedisce output duplicati se entrambi gli hook di rendering sono disponibili sulla stessa pagina.

Il widget frontend usa questo ID HTML:

mprwhatsapp-widget

La posizione e l’aspetto sono controllati da classi come:

mprwhatsapp-bottom-right
mprwhatsapp-bottom-left
mprwhatsapp-icon
mprwhatsapp-bar
mprwhatsapp-pulse
mprwhatsapp-bounce

Il pulsante usa variabili CSS per le impostazioni del merchant:

--mprwa-color: #25D366;
--mprwa-size: 60px;
--mprwa-margin: 20px;

Practical Setup Examples

Un semplice pulsante di contatto per tutto il negozio:

PHONE=447700900123
MESSAGE=Hi! I have a question about your store.
POSITION=bottom-right
STYLE=icon
PAGES=all

Un pulsante per domande commerciali sulla pagina prodotto:

PHONE=447700900123
MESSAGE=Hi! I have a question about {product}: {url}
POSITION=bottom-right
STYLE=bar
CTA_TEXT=Ask on WhatsApp
PAGES=product

Un pulsante di assistenza per il checkout:

PHONE=447700900123
MESSAGE=Hi! I need help finishing my order: {url}
POSITION=bottom-left
STYLE=bar
CTA_TEXT=Need help?
PAGES=checkout
ANIMATION=none

Tips

• Usa il numero di telefono collegato all’account WhatsApp o WhatsApp Business che controlli davvero.
• Mantieni breve il messaggio precompilato. Il cliente può modificarlo prima di inviarlo.
• Usa {product} e {url} sulle pagine prodotto, così il primo messaggio ti dice già che cosa sta chiedendo il cliente.
• Se il tuo tema ha già un banner cookie, una live chat, un pulsante torna-su o un badge recensioni flottante, sposta WhatsApp sul lato opposto con bottom-left o bottom-right.
• Usa lo stile bar quando vuoi una call-to-action testuale chiara, come Ask on WhatsApp; usa lo stile icon quando vuoi occupare il minimo spazio.
• Per negozi con molti visitatori da mobile, lascia Show on Mobile attivo, così i clienti possono aprire WhatsApp direttamente dal telefono.
• Se vuoi offrire supporto WhatsApp solo durante il checkout, imposta Show on Pages su checkout.

Compatibility

Compatibile con PrestaShop da 1.6 a 9.0 (latest) e PHP 7.1+. Continuiamo a supportare le prossime versioni di PrestaShop.

Frequently Asked Questions

Quale formato devo usare per il numero di telefono?
Usa il numero internazionale completo con prefisso paese e solo cifre. Non includere il segno più, spazi, parentesi o trattini.

+48 511 511 286  ->  48511511286
+44 7700 900123  ->  447700900123
+49 151 12345678 ->  4915112345678

Posso aggiungere il nome del prodotto corrente al messaggio WhatsApp?
Sì. Usa {product} nel messaggio precompilato. Nelle pagine prodotto, il modulo lo sostituisce con il nome del prodotto corrente.

Hi! Is {product} currently available?

Posso aggiungere l’URL della pagina al messaggio?
Sì. Usa {url}.

Hi! I have a question about this page: {url}

Posso mostrare il pulsante solo sulle pagine prodotto?
Sì. Imposta Show on Pages su:

product

Posso mostrare il pulsante solo durante il checkout?
Sì. Imposta Show on Pages su:

checkout

Questo modulo usa la WhatsApp Business API?
No. Usa il formato standard dei link WhatsApp click-to-chat:

https://wa.me/PHONE

Funziona con numeri WhatsApp normali e con numeri dell’app WhatsApp Business. Non si collega alla WhatsApp Business API.

Il modulo aggiunge un chatbot?
No. I clienti ti scrivono direttamente su WhatsApp e tu rispondi da WhatsApp come al solito.

Il pulsante apparirà su ogni pagina?
Sì, per impostazione predefinita. Il valore predefinito installato è:

PAGES=all

Puoi cambiarlo in product, category o checkout nella configurazione del modulo.

Posso disattivare il pulsante senza disinstallare il modulo?
Sì. Imposta Enable Widget su No. Le tue impostazioni rimangono salvate.