Budget Energie mailtool
E-mails coderen is complexe materie. Doordat e-mails in een groot scala e-mailprogramma’s ondersteunend moet worden, maakt het gebruik van verouderde HTML- en CSS versies. Denk hierbij aan Outlook, Gmail, Thunderbird en alle mobile e-mailprogramma’s. Dan maakt het óók nog uit wat voor besturingssysteem je gebruikt. Ieder e-mailprogramma leest e-mails op een andere manier uit. Kortom, een heleboel zaken om rekening mee te houden!
Voor het ontwikkelen van maatwerk e-mails is een hoog kennisniveau van HTML en CSS vereist, en voornamelijk oudere versies. Moderne oplossingen worden niet door alle e-mailprogramma’s ondersteund en je moet dus precies weten wat wel mogelijk is en wat niet mogelijk is.
Gelukkig is er voor e-mail developers sinds een aantal jaar een framework die dit proces makkelijker maakt. Dit framework heet MJML. Door e-mails in dit framework (wat te vergelijken met een soort programmeertaal) te coderen, kun je met behulp van de MJML compiler HTML code genereren. Echter, vereist dit alsnog wel enige vorm van programmeerkennis.
Als je een groter bedrijf hebt met een marketingafdeling, wil je graag periodiek e-mails versturen naar je klanten. Fijn als dit in je eigen branding kan en als medewerkers met weinig moeite zo’n mail kunnen opstellen. Dit was precies de vraag van het marketing- en salesteam van Budget Energie aan ons:
Kan Alterio een tool ontwikkelen die op basis van een set contentblokken, invulvelden en een intuïtieve interface, een HTML email template voor ons kan genereren?
Ook voor ons een nieuwe uitdaging, maar we houden bij Alterio van het oplossen van complexe vraagstukken. Op naar de tekentafel dus!
Voor de techniek hebben we uiteindelijk gekozen voor Nuxt 3, Node.js en een S3-Storage bij Digital Ocean en uiteraard het MJML framework. Vanuit een bestaand e-mail ontwerp hebben we verschillende contentblokken gemaakt. Dit is een set van ca. 20 verschillende opties, maar is eenvoudig uit te breiden.
Bij het ontwerpen van de tool hebben we gekozen voor een layout met drie vlakken. Links hebben we een overzicht van de content blokken. In het midden komt de voorvertoning van de e-mail en aan de rechterzijde zie je de structuur van de e-mail.v
Afbeelding 1: Overzicht van de mailtool
Wanneer je een blok wilt gebruiken in je e-mail, opent er een pop-up met de instellingen voor het blok dat je gekozen hebt.
Afbeelding 2: Pop-up met blok-instellingen
Op die manier kan er eenvoudig op een dynamische manier content gevuld worden en zijn de blokken onbeperkt in te zetten en is vrijwel iedere combinatie mogelijk. Dit geeft het team van Budget Energie de vrijheid om een groot scala aan e-mails op te stellen.
Afbeelding 3: Voorbeeld van de opbouw van een e-mail
De afbeeldingen die in de e-mail moeten komen worden via een koppeling met een DigitalOcean Spaces, S3-Compatible Cloud Object Storage op een veilige plek opgeslagen. Vervolgens worden de afbeeldingen vanuit daar uitgelezen in de e-mail. Hiervoor hebben we in de tool zelf ook een handige mediabibliotheek gemaakt, waarin afbeeldingen kunnen worden geüpload, bewerkt of verwijderd kunnen worden.
De tool zal in de toekomst worden doorontwikkeld met meerdere features, zoals het opslaan van templates en de uitbreiding van contentblokken.
Heeft jouw bedrijf ook te maken met dit probleem? Deze oplossing verhoogt de efficiëntie van het maken van custom e-mails aanzienlijk. Daarnaast kun je door meerdere mensen in je team e-mails laten opstellen en zorgt het gebruik van de tool ervoor dat er minder fouten gemaakt worden.
Wil je meer weten?
Ik vertel je er met alle liefde meer over. Bel ons, mail ons of vul hieronder het contactformulier in!