SaaS · e-mail marketing
Editor e-mail integrabile: template generati dall'IA, editor visuale e pipeline di rendering in un solo prodotto
Un editor e-mail drag-and-drop che le piattaforme software integrano nel proprio prodotto: l'IA pianifica il layout, un compilatore fisso assembla l'e-mail con sezioni del brand e un servizio di rendering produce HTML sicuro per i client.
- Settore
- SaaS · e-mail marketing
- Tecnologie
- Laravel 11 · PostgreSQL 16 with row-level security · Redis
La sfida
Un'azienda di software di marketing voleva un proprio editor di e-mail invece di prenderne uno in licenza: uno strumento che i suoi clienti usano all'interno del prodotto, che altre piattaforme SaaS possono integrare con il proprio marchio e che sfrutta l'IA per produrre una prima bozza utilizzabile. Due vincoli escludevano le scorciatoie più ovvie. Le e-mail devono apparire uguali in Outlook, Gmail e Apple Mail, quindi l'HTML scritto liberamente da un modello non era un'opzione. E template, brand kit e chiavi API di ogni cliente dovevano restare isolati da quelli di tutti gli altri.
La soluzione
Abbiamo costruito il prodotto come un insieme di servizi legati da un unico contratto. Un JSON Schema definisce che cos'è un template: l'API convalida ogni salvataggio su questo schema e il servizio di rendering convalida ogni rendering sullo stesso file. L'IA non scrive mai HTML. Restituisce un breve blueprint, cioè quali sezioni usare e quale testo inserirvi, e un compilatore deterministico assembla l'e-mail a partire da 16 pattern di sezione con i colori e i font del brand, prima che un linter controlli il risultato. L'editor visuale lavora sullo stesso modello a blocchi, quindi un'e-mail generata resta interamente modificabile. Il rendering avviene in cinque fasi: convalida, risoluzione, trasformazione, compilazione con MJML, poi post-elaborazione e sanitizzazione.
Come si collega
- 01 Brief
- 02 Blueprint IA
- 03 Compilatore di pattern
- 04 Editor visuale
- 05 Rendering MJML
- 06 Integrazione o esportazione
Cosa abbiamo realizzato
- Editor drag-and-drop con 15 tipi di blocco, layout fino a sei colonne, testo formattato con menu slash, annulla e ripristina, verifica del contrasto e selettore di merge tag
- Chat IA, modifica diretta con l'IA, suggerimenti per oggetto, preheader e call to action, controllo antispam e un profilo del tono di voce del brand appreso dalle e-mail passate
- Generazione di template con l'IA tramite un blueprint e un compilatore di pattern, seguita da un linter di qualità
- Una libreria di oltre 100 sezioni pronte, più moduli salvati che restano sincronizzati tra i template, con cronologia delle versioni e gestione dei conflitti
- Servizio di rendering che trasforma i template in HTML per e-mail, comprese immagini animate con conto alla rovescia
- Importazione da file HTML e da esportazioni di altri editor di e-mail, compresa l'importazione in blocco di archivi zip tramite una coda
- Portale clienti, galleria di template, webhook in uscita e un widget integrabile fornito come iframe, come script loader e come componente React
- Oltre 1'200 test automatizzati sui diversi servizi
Funzionalità
- Isolamento dei tenant con la row-level security di PostgreSQL e prefissi di cache per tenant
- Un unico JSON Schema convalida i template sia nell'API sia nel servizio di rendering
- API REST con risposte di errore RFC 7807, aggiornamenti JSON Merge Patch, paginazione a cursore e chiavi di idempotenza
- Tutto l'output renderizzato viene sanitizzato con DOMPurify, compreso il markdown nella chat IA
- Webhook firmati con protezione SSRF, IP pinning, nuovi tentativi con attesa progressiva e rotazione del segreto con un periodo di tolleranza
- Accesso al widget con token di breve durata che non compaiono mai in un URL; messaggi inviati solo all'origine padre dichiarata
- Tre livelli di controllo dei costi IA per tenant e un secondo fornitore di modelli come failover
- Ogni push verso lo staging deve prima superare controlli dei tipi, linting e tutte le suite di test
- Interfaccia localizzata con supporto per i layout da destra a sinistra
Integrazioni
- API Anthropic, con un secondo fornitore di modelli come failover
- L'API della piattaforma ospite per merge tag, contatti e invii di prova
- Object storage per immagini e risorse renderizzate
- Webhook in uscita per gli eventi dei template
Tecnologie
Risultato
In funzione in un ambiente di staging con tutti i servizi attivi: API, servizio di rendering, servizio IA, portale clienti e widget. Hosting di produzione, fatturazione e consolidamento del widget sono la fase successiva; questo caso verrà aggiornato quando il prodotto andrà in produzione.
Perché l’IA non scrive l’HTML?
I client di posta interpretano ancora l’HTML in modi diversi, e un modello che scrive markup liberamente produce e-mail che si rompono in Outlook o perdono il layout su un telefono. Per questo il modello prende le decisioni che prenderebbero un copywriter e un designer di layout: quali sezioni, in quale ordine, con quali parole. Il resto lo fa il codice. Il compilatore usa solo pattern di sezione testati e il brand kit, e il risultato passa per la stessa convalida e lo stesso rendering di un’e-mail costruita a mano. Ogni template generato si può anche aprire e modificare blocco per blocco.
Parliamo del tuo progetto
Raccontaci il tuo progetto