Hoe maak je zelf een e-mail template?
Wat is een template?
Een template gebruik je voor de opbouw van jouw E-mail, hierin kun je dus instellen hoe jouw e-mail word opgesteld. Denk aan jouw Footer met algemene informatie, of de Header met eventueel logo. In deze help doc ga ik jou aantal code regels laten zien hoe je een template maakt.
Verschil tussen template en handtekening
Zoals hierboven uitgelegd weet je nu wat een e-mail template inhoud, mensen verwarren dit nog wel eens met de handtekening. Een handtekening in Belco is jouw persoonlijke begroeting op het einde van de mail, deze kun je doormiddel van een code regel toepassen, bijvoorbeeld boven de footer van jouw template.
Hoe maak je een template?
Hieronder ga ik uitleggen hoe je stap voor stap een template kan opzetten!
Standaard template
In dit hoofdstuk gaan we langzaam onze standaard template opbouwen. Als je ons standaard template ziet kun je al gauw denken dit is abra kadabra. Maar eigenlijk is het vrij simpel! Hier ga ik stap voor stap uitleggen hoe deze template is opgebouwd.
<!DOCTYPE html> , <html> en </html> zijn sowieso verplicht om te gebruiken in de template hiermee geef je aan dat je de code HTML gebruikt.
<!DOCTYPE html>
<html>
</html>
Voordat je de header opent, starten we eerst met de Body deze open je met <body> en sluit je met </body>. In de body voeg je alles toe wat er in jouw mail moet komen te staan.
Vervolgens gaan we naar <header> dit is de kop van jouw e-mail hierin verwerk je bepaalde informatie bijvoorbeeld jouw logo, of standaard kop tekst. Vergeet niet om </header> te gebruiken om de header af te sluiten. Deze tekst is voor gegenereerd en zorgt ervaar dat jouw e-mail goed leesbaar is. Om een afbeelding toe te voegen gebruik je de <img> tag daarna gebruik je src=" " , tussen de dubbele quotes zet je de directe link van de afbeelding dus upload de foto ergens op je website zodat deze niet zo gauw offline gaat. Mocht je afbeelding te groot zijn, dan kun je met width=" " en height=" " de grootte aanpassen. Dit gaat altijd in pixels!
Tevens is de header niet verplicht om toe te voegen in de template!
<!DOCTYPE html>
<html>
<body>
<header>
<img src="https://p33.p1.n0.cdn.getcloudapp.com/items/kpuJRowL/ded60f63-917c-41ee-ac92-588e18e92c29.png?v=c976b3f8b31a4b8ed7a1df6d86442344" width="100" height="100" alt="ded60f63-917c-41ee-ac92-588e18e92c29">
</header>
</body>
</html>
Hieronder zie je een voorbeeld hoe het er nu uitziet! De afbeelding heb ik 100 bij 100 pixels gemaakt zodat deze vrij klein is.
Vervolgens gaan we uit de <header> en beginnen we in de <body>, in de body komt het middelste stukje van jouw mail te staan, waaronder jouw tekst.
Om jouw tekst in de body te krijgen openen we eerst markdown, dit openen we met {{#markdown}} . De tekst die je hebt getypt in de chatbox van Belco kun je tonen door de tag {{message}} in de afbeelding hieronder zie je Lorem ipsum staan als voorbeeld.
Voor in de chatbox gebruiken we Markdown. We gebruiken Markdown omdat je hierin bijvoorbeeld gemakkelijk een linkje kunt toevoegen dit doe je als volgt: [klik hier](www.belco.io) in je mail zie je dan dit: klik hier.
<!DOCTYPE html>
<html>
<body>
<header>
<img src="https://p33.p1.n0.cdn.getcloudapp.com/items/kpuJRowL/ded60f63-917c-41ee-ac92-588e18e92c29.png?v=c976b3f8b31a4b8ed7a1df6d86442344" width="100" height="100" alt="ded60f63-917c-41ee-ac92-588e18e92c29">
</header>
{{#markdown}}
{{message}}<br>
{{/markdown}}
</body>
</html>
Hieronder is de afbeelding hoe de template er nu uitziet, het gedeelte Lorem Ipsum is je Message die je via markdown hebt neergezet.
Mocht je 1 shop hebben dan zou je je persoonlijke handtekening eronder kunnen zetten dit doe je met {{user.signature}}, na de message tag doe je eerst een <br> dit is een einde van de lijn, een soort Enter. let wel op dat je een persoonlijke handtekening maakt in Belco om dit te gebruiken. Klik op deze link om naar de helpdoc te gaan om zelf je handtekening te maken.
<!DOCTYPE html>
<html>
<body>
<header>
<img src="https://p33.p1.n0.cdn.getcloudapp.com/items/kpuJRowL/ded60f63-917c-41ee-ac92-588e18e92c29.png?v=c976b3f8b31a4b8ed7a1df6d86442344" width="100" height="100" alt="ded60f63-917c-41ee-ac92-588e18e92c29">
</header>
{{#markdown}}
{{message}}<br>
{{user.signature}}
{{/markdown}}
</body>
</html>
In de template kun je natuurlijk ook je eigen handtekening maken. Dit is handig voor als je in Belco een meerder shops hebt. Want elke shop heeft zijn eigen mail adres met dan ook weer zijn eigen template. Hierin ga ik je laten zien hoe je dit gaat maken.
Om te beginnen haal ik mijn handtekening uit de template, die heb ik niet meer nodig want die ga ik maken in mijn template. We gaan in de body de footer openen met <footer>. Vervolgens zet ik als voorbeeld er eerst Met vriendelijke groet neer.
<!DOCTYPE html>
<html>
<body>
<header>
<img src="https://p33.p1.n0.cdn.getcloudapp.com/items/kpuJRowL/ded60f63-917c-41ee-ac92-588e18e92c29.png?v=c976b3f8b31a4b8ed7a1df6d86442344" width="100" height="100" alt="ded60f63-917c-41ee-ac92-588e18e92c29">
</header>
{{#markdown}}
{{message}}<br>
{{/markdown}}
<footer>
Met vriendelijke groet,
</footer>
</body>
</html>
Na Met vriendelijke groet, doe je een <br> zodat je weer een enter hebt. En kan je met de tags {{user.firstName}} en {{user.lastName}} je voor en of achternaam er neer zetten.
<!DOCTYPE html>
<html>
<body>
<header>
<img src="https://p33.p1.n0.cdn.getcloudapp.com/items/kpuJRowL/ded60f63-917c-41ee-ac92-588e18e92c29.png?v=c976b3f8b31a4b8ed7a1df6d86442344" width="100" height="100" alt="ded60f63-917c-41ee-ac92-588e18e92c29">
</header>
{{#markdown}}
{{message}}<br>
{{/markdown}}
<footer>
Met vriendelijke groet,<br>
{{user.firstName}} {{user.lastName}}
</footer>
</body>
</html>
Wil je bijvoorbeeld ook je Social media linkjes erin toevoegen, maar niet je hele URL dat doe je met de <a href= tag. Als je bijvoorbeeld een Belco link wilt toevoegen dan ziet dat er als volgt uit: <a href="https://www.belco.io">Belco</a> zo komt er alleen het woordje Belco te staan.
<!DOCTYPE html>
<html>
<body>
<header>
<img src="https://p33.p1.n0.cdn.getcloudapp.com/items/kpuJRowL/ded60f63-917c-41ee-ac92-588e18e92c29.png?v=c976b3f8b31a4b8ed7a1df6d86442344" width="100" height="100" alt="ded60f63-917c-41ee-ac92-588e18e92c29">
</header>
{{#markdown}}
{{message}}<br>
{{/markdown}}
<footer>
Met vriendelijke groet,<br>
{{user.firstName}} {{user.lastName}}<br>
<a href="www.belco.io">Belco</a>
</footer>
</body>
</html>
Template stylen
Hierboven kon je lezen over hoe je een template in elkaar zet, in dit stukje ga ik laten zien dat je ook verschillende fonts kan gebruiken in je template mocht je dat willen. Hierdoor kun je je template nog beter personaliseren.
Hieronder ga ik je laten zien hoe je fonts kunt gebruiken in de template, mocht je bijvoorbeeld jouw bericht in de font Helvetica willen dan gebruik je de tag style="font-family: Helvetica;" tussen de <span> tag. Het komt er dan als volgt uit te zien: <span style="font-family: Helvetica"> zoals hieronder dan ook te zien.
<!DOCTYPE html>
<html>
<body>
<header>
<img src="https://p33.p1.n0.cdn.getcloudapp.com/items/kpuJRowL/ded60f63-917c-41ee-ac92-588e18e92c29.png?v=c976b3f8b31a4b8ed7a1df6d86442344" width="100" height="100" alt="ded60f63-917c-41ee-ac92-588e18e92c29">
</header>
<span style="font-family: Helvetica">
{{#markdown}}
{{message}}<br>
{{/markdown}}
</span>
<footer>
Met vriendelijke groet,<br>
{{user.firstName}} {{user.lastName}}<br>
<a href="www.belco.io">Belco</a>
</footer>
</body>
</html>
HTML/Markdown Cheatsheet
| Hierin geef je aan wat voor type bestand het is, oftewel HTML. Je opent de stuk code met Doctype html en sluit alle tags met een |
| In de header vul je algemene informatie in, auteur eigenschappen of eventueel je logo |
| De body is het middelste gedeelte van je mail, hier zet je bijvoorbeeld je tekst in hoe je dit aangeeft laat ik hieronder zien. |
| Hiermee geef je de start en het einde van je markdown aan, markdown gebruiken we zodat je wat simpeler linkjes etc kunt toevoegen. |
| Deze tag zet je tussen de markdown tags neer om je bericht te laten weergeven. Als je deze vergeet stuur je mailtjes zonder tekst. |
| Met deze tag tussen de markdown tags zet je je persoonlijke handtekening, deze kun je maken onder je profiel instellingen van Belco. |
| Met deze tag eindig je de lijn van je zin en begin je op een nieuwe regel. |
| Voeg afbeeldingen toe in je template. |
| Je voornaam in de template |
| Je achternaam in de template |
| Een hyperlink |
