Crea un mockup realistico di conversazione in stile WhatsApp e scaricalo in PNG. Scrivi entrambi i lati della chat, imposta il nome del contatto, le spunte, gli orari e il tema chiaro o scuro. Gratis, senza registrazione, e tutto funziona nel tuo browser. Solo per parodie, mockup e progetti di design.
Solo per parodie, mockup, didattica e progetti di design. Non usarlo per spacciarti per persone reali, creare prove false o ingannare qualcuno su una vera conversazione WhatsApp.
Hai appena progettato un mockup di chat. Questi widget gratuiti di CommonNinja trasformano la chat in un vero canale sul tuo sito, senza codice.
Metti un vero pulsante di chat WhatsApp sul tuo sito, così i visitatori possono scriverti con un tocco, direttamente dalla pagina che stanno già leggendo.
Un solo pulsante fluttuante, tutti i canali. Fatti contattare su WhatsApp, Messenger, Telegram o via email da un unico widget.
Rispondi in automatico alle domande che ti fanno tutto il giorno, poi passa quelle più complicate a una vera conversazione con te.
Permetti ai visitatori di condividere la tua pagina con un tocco. Ogni condivisione porta la grafica che hai appena creato oltre il tuo pubblico.
Altri strumenti gratuiti per contenuti social e mockup.
Progetta un mockup di chat in stile Telegram con tema chiaro o scuro ed esportalo in un PNG pulito.
Usa lo strumento →Crea un mockup di conversazione in stile Messenger con fumetti blu arrotondati. Gratis, nel tuo browser.
Usa lo strumento →Crea il mockup di un post in stile Reddit con voti, premi e una sezione di commenti a thread. Esporta un PNG.
Usa lo strumento →Crea screenshot realistici di post su X (Twitter) con visualizzazioni, badge di verifica e segnalibri. Scarica un PNG pulito.
Usa lo strumento →Crea un mockup di messaggi su iPhone con fumetti blu di iMessage o verdi degli SMS, reazioni e conferma di lettura.
Usa lo strumento →Crea il mockup di un post di Facebook con reazioni, condivisioni e commenti. Esporta un PNG.
Usa lo strumento →Progetta il mockup di un post di Instagram con la tua foto, didascalia, Mi piace e commenti.
Usa lo strumento →Crea un mockup di messaggi diretti di Instagram con fumetti sfumati, reazioni a cuore e la scritta Visualizzato.
Usa lo strumento →Crea un mockup di chat di Snapchat con barre laterali colorate, punteggio Snap e uno stato su ogni riga.
Usa lo strumento →Metti un testo in grassetto dietro il soggetto con un clic. Scontorno automatico, senza registrazione, nel tuo browser.
Usa lo strumento →Crea un mockup di conversazione in stile ChatGPT con tema chiaro o scuro, passaggi di ragionamento e blocchi di codice.
Usa lo strumento →Progetta un mockup di chat AI in stile Gemini con il simbolo a scintilla, attacchi in grassetto ed esportazione PNG pulita.
Usa lo strumento →Crea il mockup di un riquadro AI Overview di Google con barra di ricerca, risposta a punti e fonti citate.
Usa lo strumento →Come funziona
Nessun account, nessuna registrazione, completamente gratuito. Il mockup si aggiorna dal vivo e il PNG viene generato nel tuo browser, quindi né il tuo testo né la tua immagine vengono mai caricati su un server.
Aggiungi un messaggio, indica se è del Contatto o tuo (Tu) e scrivi il testo. Riordina le righe con le frecce e imposta un orario per ciascuna.
Imposta il nome del contatto e la riga di stato, carica una foto profilo, scegli chiaro o scuro e attiva o disattiva lo sfondo, le spunte, gli orari e i puntini di scrittura.
Con un clic esporti un PNG nitido in 2x a larghezza fissa da telefono, pronto per una slide, uno storyboard, il mockup di una landing page o un meme.
I dettagli
Uno screenshot di chat convincente non dipende quasi mai dai colori. Dipende dal ritmo della conversazione e dalla coerenza dei piccoli dettagli tra loro.
righe brevi + turni irregolari + minuti di distanza = ritmo vero
Le persone scrivono a frammenti. Mandano due messaggi di fila, rispondono in ritardo e scrivono raramente un paragrafo intero. Riproduci quel ritmo e il mockup sembra uno screenshot. Scrivilo come un'email e sembra una bozza.
L'altra metà è la coerenza. Se l'intestazione dice online, l'ultima risposta deve essere recente. Se lo stato di consegna dice letto, il messaggio più recente deve essere uno che hai inviato tu. Ognuno di questi dettagli è piccolo da solo, ed è la prima cosa che chi legge nota quando è sbagliato.
Diciamolo chiaramente: uno stile credibile serve al lavoro di design. Non è mai un motivo per presentare un mockup come una conversazione reale. Usalo come grafica, segnalalo quando conta e inventa tutti i nomi che contiene.
Impostazioni
Sei controlli definiscono l'aspetto dell'immagine esportata. Ecco cosa fa ciascuno e l'uso a cui si adatta meglio.
| Impostazione | Cosa fa | Ideale per |
|---|---|---|
| Tema chiaro | Sfondo della chat beige, fumetti ricevuti bianchi, fumetti inviati verde chiaro | Articoli di blog, presentazioni e tutto ciò che sta su una pagina bianca Il più usato |
| Tema scuro | Sfondo quasi nero con fumetti inviati verde scuro | Reel, miniature e immagini di prodotto che richiedono un forte contrasto Dipende dal caso |
| Sfondo della chat | Leggera texture a motivi dietro i fumetti | Screenshot che devono sembrare un vero telefono invece di una grafica piatta Dipende dal caso |
| Spunte di consegna | Una spunta per inviato, due per consegnato, due blu per letto | Mostrare se l'ultimo messaggio è partito, è stato consegnato o è stato letto Il più usato |
| Indicatore di scrittura | Tre puntini in un fumetto alla fine della conversazione | Mockup con suspense in cui la risposta deve ancora arrivare Dipende dal caso |
| Barra di stato | Orologio, tacche del segnale e batteria in alto | Aspetto da screenshot completo del telefono. Disattivala per una scheda più pulita in una presentazione Dipende dal caso |
I temi seguono le palette chiare e scure più comuni delle app di messaggistica, aggiornate al 2026. Questo strumento non è affiliato né approvato da alcuna piattaforma di messaggistica.
Usalo bene
Un mockup di chat è un elemento di design. Ecco gli usi quotidiani per cui è pensato, e quelli che lo trasformano in tutt'altro.
| Scenario | Di cosa si tratta | Verdetto |
|---|---|---|
| Mockup di app e siti web | Conversazioni di esempio in un mockup di prodotto, un flusso di onboarding o la demo di una funzione di chat | Uso corretto |
| Formazione per assistenza e vendite | Mostrare al tuo team come si presenta una buona risposta a un cliente, con nomi inventati | Uso corretto |
| Meme e sketch | Scambi chiaramente umoristici tra personaggi inventati | Uso corretto |
| Storyboard e copioni | Visualizzare una scena di chat per un video, una pubblicità o un esercizio in classe | Uso corretto |
| Fabbricare prove false | Presentare un mockup come una conversazione autentica in una controversia, un reclamo o una causa in tribunale | Mai |
| Furto di identità o truffe | Far sembrare che una persona, un marchio o una banca reali abbiano detto qualcosa che non hanno mai detto | Mai |
Da evitare
Quattro di questi punti sono questione di mestiere. I primi due non sono negoziabili. Leggili prima di esportare qualsiasi cosa che uscirà dal tuo schermo.
L'unica regola che conta più di tutti i consigli di design di questa pagina. Un mockup non documenta nulla. Usarlo per sostenere un'affermazione, vincere una discussione o ingannare un datore di lavoro, una piattaforma o un tribunale è una frode, non design.
Mai presentarlo come realeUn nome reale, un logo reale o un numero di telefono reale nell'intestazione trasformano un mockup in un furto di identità. Inventa invece il contatto. Non costa nulla e mantiene il mockup pulito.
Inventa il contattoRisposte che arrivano prima del messaggio a cui rispondono, o una conversazione che salta di ore tra due frasi, rompono subito l'illusione. Fai avanzare gli orari a piccoli passi.
Orari in ordineLe spunte di consegna compaiono solo sui messaggi che hai inviato, mai su quelli ricevuti. Questo strumento rispetta questa regola, quindi chiudi con un messaggio inviato se le spunte sono il punto dell'immagine.
Spunte solo sugli inviatiUna chat vera è breve, minuscola e un po' disordinata. Paragrafi interi con la punteggiatura perfetta sembrano testo pubblicitario, ed è proprio questo che fa sembrare un mockup costruito.
Scrivi come si scrive in chatUn mockup chiaro su una slide bianca sembra fluttuare, uno scuro in un reel scuro scompare. Scegli il tema in base a dove l'immagine verrà davvero pubblicata, non a cosa sta bene nell'editor.
Tema adatto al contestoBuone pratiche
Tutti i widget CommonNinja citati qui sotto si possono iniziare gratis. Applica questi consigli mentre scrivi la conversazione e dopo aver inserito l'immagine.
01
Un nome e un cognome generici tengono l'attenzione sul testo dei messaggi e ti tengono lontano da tutto ciò che sembra un contatto reale.
02
Le conversazioni vere sono sbilanciate. Due messaggi veloci di una persona, poi una risposta più lunga, suonano molto più veri di un botta e risposta ordinato a ogni riga.
03
Metti il primo messaggio qualche minuto prima dell'ultimo. Risposte allo stesso minuto in tutta la conversazione sono il modo più rapido per riconoscere un mockup.
04
Se la storia è «l'ha letto e non ha risposto», chiudi con un messaggio inviato e imposta lo stato di consegna su Letto. Se è «sta rispondendo», attiva l'indicatore di scrittura.
05
Orologio e batteria rendono credibile uno screenshot del telefono, ma in una slide aggiungono confusione. Toglili quando il mockup sta dentro un'altra cornice o l'immagine di un dispositivo.
06
Un mockup mostra come potrebbe apparire una conversazione. Un pulsante di chat avvia quella vera, da qualsiasi pagina in cui si trova già un visitatore.
Aggiungi la chat WhatsApp, gratis →EN07
Non tutti scrivono allo stesso modo. Un solo pulsante fluttuante può offrire WhatsApp, Messenger, Telegram ed email, così i visitatori scelgono quello che usano già.
Aggiungi All In One Chat, gratis →EN08
In un articolo, una presentazione o un pitch, una breve didascalia che indica che la conversazione è un mockup di design toglie ogni dubbio e non ti costa nulla.
Glossario
Sei termini che ricorrono ogni volta che progetti uno screenshot di messaggistica. Utili se ne crei per un team.
Dal blog
Altri articoli dal blog di CommonNinja (in inglese). Gratis, senza registrazione, solo articoli pratici su come parlare con i clienti dove si trovano già.
In this article, we are going to discuss how to build a chat application with Svelte and Firebase.
Leggi l'articolo →ENIn this article, we are going to discuss how to use social media to drive traffic to your website.
Leggi l'articolo →ENIn this article, we are going to discuss the top WhatsApp Chat Button widgets for your website. We’ll present a list of...
Leggi l'articolo →ENIn this article, we are going to discuss the top Telegram Chat widgets for your website. We’ll present a list of...
Leggi l'articolo →ENIn this article, we are going to discuss the top Social Media Links widgets for your website. We’ll present a list of...
Leggi l'articolo →ENIn this article, we delve into Messenger chat widgets and their role in enhancing customer service through streamlined...
Leggi l'articolo →EN