Wanneer je in Salesdock een tekst schrijft voor een e-mail, sms, scriptlog, online offertepagina of PDF-template, kun je naast platte tekst ook HTML en eenvoudige CSS gebruiken om de opmaak rijker te maken. De editor accepteert echter niet alle HTML- en CSS-mogelijkheden. Dit artikel beschrijft welke onderdelen wel en niet worden ondersteund, en geeft tips voor het opzetten van een rijkere visuele opmaak binnen die grenzen.

Hoe de Salesdock-editor met HTML omgaat

Alle HTML die je in de editor plakt wordt na opslaan door een veiligheidsfilter (HTMLPurifier) gehaald. Die filter laat een vooraf gedefinieerde set tags en CSS-eigenschappen door, en strip al het overige. Het filter is bedoeld om kwetsbaarheden zoals XSS te voorkomen, maar legt ook beperkingen op aan wat je visueel kunt opbouwen.

Tip: als je opmaak na opslaan ineens verdwenen is — geen kleuren meer, geen afgeronde hoeken, vlakken die wit worden — dan is dat bijna altijd het filter dat een tag of property heeft gestript. Het overzicht hieronder helpt om te zien welke aanpassing wel veilig opgeslagen wordt.

Toegestane HTML-tags

De volgende tags blijven na opslaan behouden. De aangegeven attributen zijn de enige die worden geaccepteerd op die tag.

Toegestane CSS-eigenschappen (inline op style-attribuut)

CSS plaats je inline op het style-attribuut van een tag die style ondersteunt (vooral <td>, <p>, <span>, <a>). Alleen onderstaande properties worden geaccepteerd:

Wat niet werkt

Onderstaande zaken worden bij opslaan automatisch verwijderd. Plak je ze toch, dan zie je dat de styling verdwijnt zodra je de pagina herlaadt of de mail verstuurt.

• Een <style>-blok bovenaan met CSS-classes — wordt volledig gestript. Inline styles op individuele tags zijn de enige werkende route.
• <svg> en SVG-iconen — niet ondersteund. Gebruik in plaats daarvan een <img>-tag met een PNG/JPG op een publieke URL, of een emoji-teken.
• Externe afbeeldingen op je eigen computer (zoals src="logo.png") — afbeeldingen moeten via een publieke URL bereikbaar zijn (bijvoorbeeld een eigen CDN).
• Achtergrondafbeeldingen (background-image) — alleen background-color werkt.
• Padding aan andere kanten dan links — padding-top, padding-right en padding-bottom worden gestript, ook de samengevatte padding-shorthand.
• margin — geen enkele variant werkt. Gebruik spacer-rijen voor verticale ruimte.
• border — alleen border-radius wordt geaccepteerd. Voor zichtbare lijnen gebruik je <hr> of een tabel-rij met een achtergrondkleur.
• Inline style op <table> en <div> — wordt gestript. Verplaats de styling naar de onderliggende <td>'s.
• JavaScript en interactieve elementen — <script> en attributen zoals onclick worden om veiligheidsredenen geweigerd.
• Layout via Flexbox of CSS Grid — display, flex, grid zijn niet beschikbaar. Gebruik tabel-based layout zoals in klassieke e-mail-templates.

Praktische tips voor opmaak binnen de regels

1. Gebruik tabellen, geen div-blokken

Omdat <div> alleen class ondersteunt en <style>-blokken niet werken, kun je geen klassen-gebaseerde layout opbouwen. Gebruik daarom de klassieke e-mail-aanpak: een <table> als wrapper, met de styling op elke <td>.

2. Verticale ruimte met spacer-rijen

Omdat padding-top/bottom en margin niet werken, gebruik je een lege rij met een height-attribuut:

<tr><td height="20" style="background-color:#ffffff;">&nbsp;</td></tr>

3. Padding-rechts via geneste tabel met spacer-cellen

Omdat alleen padding-left werkt, krijg je tekst die tot aan de rechterrand doorloopt. Oplossing: een geneste tabel met drie cellen: spacer links, content midden, spacer rechts.

<td>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td style="width:40px;">&nbsp;</td>
      <td>Hier komt de inhoud, met witruimte aan beide kanten.</td>
      <td style="width:40px;">&nbsp;</td>
    </tr>
  </table>
</td>

4. Achtergrondkleuren op <td> — nooit op <table>

De filter accepteert geen style-attribuut op <table>. Zet daarom alle visuele styling (achtergrondkleur, breedte, lettertype) op de onderliggende <td>'s. De tabel zelf krijgt alleen width, border="0", cellspacing="0" en cellpadding="0".

5. Iconen via <img> of een tekst-badge

Voor visuele iconen zijn er twee werkbare routes:

• PNG/JPG via <img src="..."> — vereist een publieke URL waar de afbeelding op gehost staat.
• Een tekst-badge als simpele vervanger: een <td> met achtergrondkleur, een groot cijfer of letter, en border-radius voor afgeronde hoeken. Bijvoorbeeld: <td style="background-color:#77bb66;color:#fff;width:80px;border-radius:12px;text-align:center;font-size:42px;font-weight:bold;">1</td>.

Hulp van AI bij het omzetten van bestaande HTML

Heb je een complexe e-mail-template van een ontwerper of een externe tool en wil je die in Salesdock kunnen gebruiken? Dan helpt het om de HTML eerst om te laten zetten naar een Salesdock-compatibele variant. AI-tools zoals ChatGPT of Claude kunnen daarbij helpen, mits je de juiste context meegeeft.

Voorbeeld-prompt: kopieer de tekst hieronder en plak je eigen HTML op de aangegeven plek. Geef het geheel aan een AI-tool en je krijgt een Salesdock-compatibele variant terug.

Ik wil onderstaande HTML omzetten naar een variant die werkt in de Salesdock markdown-editor. De Salesdock-editor gebruikt een veiligheidsfilter (HTMLPurifier) en heeft de volgende beperkingen:

TOEGESTANE TAGS (en hun attributen):
- p (style, class), span (style, class), a (href, title, target, style, class)
- strong, em, b, i, u
- h1 t/m h6
- ul, ol, li, br, hr
- img (src, alt, width, height, class) — alleen via publieke URL
- table (class, width, height, border, cellspacing, cellpadding) — GEEN style!
- tr (width, height, border)
- td (style, border)
- div (alleen class) — GEEN style!

TOEGESTANE CSS-PROPERTIES (alleen op style-attribuut, dus vooral op td/p/span/a):
- color, background-color
- font, font-size, font-weight, font-style, font-family
- text-decoration, text-align
- padding-left (padding-top/right/bottom werken NIET)
- width
- border-radius

NIET ondersteund (wordt gestript):
- <style>-blokken met CSS-classes
- <svg> en SVG-iconen
- background-image
- padding-top, padding-right, padding-bottom, margin
- border (wel: border-radius)
- inline style op <table> of <div>
- JavaScript en attributen zoals onclick
- display: flex / grid

WERKWIJZE:
- Gebruik tabel-gebaseerde layout (geneste <table><tr><td>), zoals bij klassieke e-mail-templates.
- Verticale ruimte: spacer-rijen via <tr><td height="20">&nbsp;</td></tr>.
- Padding aan beide kanten van tekst: geneste 3-koloms-tabel met spacer-cellen links en rechts.
- Alle achtergrondkleuren en breedtes op <td>, niet op <table>.
- Vervang SVG-iconen door een <img>-tag (publieke URL) of een tekst-badge (gekleurde <td> met cijfer/letter en border-radius).

Behoud de visuele uitstraling (kleuren, hiërarchie, typografie, layout) zo goed mogelijk binnen deze beperkingen. Geef de output terug als platte HTML zonder extra uitleg eromheen, gevolgd door een korte samenvatting van de belangrijkste keuzes en eventuele compromissen.

Hieronder de HTML die ik wil omzetten:

[plak hier je HTML]

Tip: AI-output is een vertrekpunt, geen eindpunt. Test de gegenereerde HTML altijd in Salesdock door een test-e-mail te versturen en te controleren of de styling overleeft (en dus correct opgeslagen wordt). Komt er iets niet goed door, kijk dan bovenstaande lijst even na om te zien welke property of tag is gestript — en stel de output handmatig bij waar nodig.

Hulp nodig?

Loop je vast met een specifiek stuk HTML, of merk je dat je opmaak na opslaan steeds gestript wordt? Neem contact op met Salesdock support en deel je HTML — we helpen je graag op weg.