Salesdock Support

In veel teksten in Salesdock kun je naast gewone tekst ook HTML en eenvoudige CSS gebruiken, bijvoorbeeld om een e-mail of offerte in je eigen huisstijl op te maken. Wat er van je opmaak overblijft, hangt af van waar je de tekst gebruikt. In dit artikel lees je per plek wat wel en niet werkt, en hoe je binnen die grenzen toch een mooie opmaak bouwt.

Twee situaties: e-mails en overige teksten

Elke tekst wordt eerst als Markdown verwerkt. Daarna zijn er twee situaties:

Tip: is je opmaak in de offerte-PDF ineens weg, zoals een kleur, afgeronde hoeken of witruimte? Dan heeft het filter een tag of eigenschap verwijderd. Vergelijk je HTML met de lijsten hieronder.

Toegestane HTML-tags in overige teksten

Deze tags blijven behouden, met alleen de genoemde attributen. Andere attributen worden verwijderd.

Toegestane CSS in overige teksten

Zet CSS altijd in het style-attribuut van een tag die dat toestaat: <td>, <p>, <span> of <a>. Alleen deze eigenschappen blijven over:

Wat niet werkt in overige teksten

• Een <style>-blok met classes. Alleen inline styles op de tags zelf werken.
• margin, border en padding boven, rechts of onder, ook als padding-shorthand.
• Attributen op <table> (behalve class) en op <tr>, zoals width, height en cellpadding.
• Een style op <table> of <div>.
• <svg>, background-image en afbeeldingen die niet via een openbare URL bereikbaar zijn.
• Flexbox en CSS Grid (display, flex, grid).
• JavaScript en attributen zoals onclick.

Let op Markdown: geen inspringing en geen lege regels

Omdat elke tekst eerst als Markdown wordt verwerkt, gelden twee regels voor alle plekken, ook voor e-mails:

• Spring je HTML niet in. Een regel die met vier spaties begint, toont Markdown als code. Je ziet dan je HTML als tekst in plaats van de opmaak.
• Laat geen lege regels vallen binnen een HTML-blok. Na een lege regel verwerkt Markdown de rest los, waardoor tabellen uit elkaar kunnen vallen.

Praktische tips voor een mooie opmaak

1. Bouw met tabellen en zet de opmaak op de cel

Een vlak met een achtergrondkleur maak je met een tabel van één cel. De kleur, breedte en afgeronde hoeken zet je op de <td>:

<table><tr><td style="width: 100%; background-color: #E8F5E9; border-radius: 8px; padding-left: 16px;"><p>Je tekst</p></td></tr></table>

2. Witruimte via alinea's

Margin en padding boven of onder werken niet, en een height op een rij wordt verwijderd. Witruimte maak je daarom met de standaardruimte rond een <p>, ook binnen een gekleurde cel, of met een <br> tussen twee tabellen.

3. Een accentbalk in plaats van een rand

Een border werkt niet. Een gekleurde balk links van je tekst maak je met een smalle cel met een achtergrondkleur en een harde spatie erin:

<table><tr><td style="width: 8px; background-color: #00A859; border-radius: 4px;">&nbsp;</td><td style="padding-left: 16px;"><p>Je tekst</p></td></tr></table>

4. Genummerde stappen met een tekstbadge

Voor iconen gebruik je een afbeelding via een openbare URL, of een cel met een cijfer, een achtergrondkleur en afgeronde hoeken:

<td style="width: 34px; background-color: #0F3822; color: #ffffff; font-weight: bold; text-align: center; border-radius: 6px;">1</td>

5. Volle breedte en ruimte aan de rechterkant

Een tabel zonder width wordt zo breed als de inhoud. Een korte kop in een gekleurd vlak blijft dus smal, en padding rechts is niet mogelijk. Werkt dat niet mooi uit, kies dan voor een accentbalk met tekst op een witte achtergrond (tip 3). Dat ziet er bij elke breedte goed uit.

E-mails: tips voor e-mailprogramma's

In e-mails haalt Salesdock niets weg, maar elk e-mailprogramma toont HTML weer anders. Zo negeren sommige programma's afgeronde hoeken en <style>-blokken. De tips hierboven werken ook in e-mails en zijn een veilige keuze. Verstuur altijd een testmail en bekijk die in de programma's die je klanten het meest gebruiken.

Tip: per flow een eigen e-mail. De offertemail en de bevestigingsmail stel je één keer in voor het hele account. Wil je per flow een andere tekst, zet de inhoud dan tussen {{#flow.is.identifier.warmtepomp}} en {{/flow.is.identifier.warmtepomp}}, met het ID van je flow. Voor alle andere flows gebruik je {{^flow.in.identifier.warmtepomp,thuisbatterij}} ... {{/flow.in.identifier.warmtepomp,thuisbatterij}}. Dit werkt ook in het onderwerp.

Hulp van AI bij het omzetten van bestaande HTML

Heb je een HTML-template van een ontwerper of een ander programma? Een AI-tool zoals ChatGPT of Claude kan die omzetten naar een variant die in Salesdock werkt. Kopieer de prompt hieronder, plak je eigen HTML op de aangegeven plek en geef het geheel aan de AI-tool.

Zet onderstaande HTML om naar een variant die werkt in de Salesdock-editor. De tekst wordt eerst als Markdown verwerkt en daarna door een veiligheidsfilter (HTMLPurifier) gehaald, met deze regels:

TOEGESTANE TAGS (met attributen):
- p (style, class), span (style, class), a (href, title, target, style, class)
- strong, b, em, i, u, br, hr
- h1 t/m h6 (geen attributen, h3 mag class)
- ul (class), ol, li
- img (src, alt, width, height, class), alleen met een openbare URL
- table (alleen class), tr (geen attributen), td (alleen style)
- div (alleen class)

TOEGESTANE CSS (alleen in het style-attribuut van td, p, span of a):
- color, background-color
- font, font-family, font-size, font-weight, font-style
- text-align, text-decoration
- padding-left (geen padding boven, rechts of onder)
- width
- border-radius

NIET TOEGESTAAN: style-blokken, svg, background-image, margin, border, padding behalve links, attributen op table (behalve class) en tr, style op table of div, flexbox, grid, JavaScript.

WERKWIJZE:
- Bouw met tabellen en zet alle opmaak op de td.
- Maak witruimte met p-alinea's of een br tussen tabellen, niet met hoogtes.
- Maak een accentbalk met een smalle td met achtergrondkleur en   erin.
- Vervang iconen door een img met een openbare URL of een td met een cijfer, achtergrondkleur en border-radius.
- Spring de HTML niet in en laat geen lege regels vallen.

Behoud de kleuren, de hiërarchie en de typografie zo goed mogelijk. Geef de HTML terug zonder uitleg eromheen, met daarna een korte samenvatting van de keuzes en compromissen.

Hier is mijn HTML:
[plak hier je HTML]

Let op: de uitkomst van een AI-tool is een startpunt. Test het resultaat altijd: maak een testofferte en bekijk de PDF, of verstuur een testmail. Mist er opmaak, vergelijk je HTML dan met de lijsten in dit artikel.

Hulp nodig?

Kom je er niet uit, of verdwijnt je opmaak steeds na het opslaan? Mail je HTML naar support@salesdock.nl, dan kijken we met je mee.