Visuele Builder & Workflow Canvas
Beheers de visuele automatiseringsbuilder — voeg triggers toe, keten acties, maak condities met vertakkingen, gebruik drag-and-drop om workflows te ontwerpen.
De Visuele Builder
De automatiseringsbuilder gebruikt een interactief visueel canvas waar je trigger- en actienodes verbindt om je workflow te maken. Het wordt aangedreven door React Flow, wat je een vloeiende drag-and-drop ervaring geeft.
De Builder Openen
- Nieuwe automatisering: Automations → "+ New Automation"
- Bestaande bewerken: Klik op het ✏️ potlood-icoon op een automatiseringskaart
- Vanuit template: Templatespagina → "Use Template" (vult het canvas vooraf in)
Canvas Elementen
Nodetypes
| Node | Uiterlijk | Doel |
|---|---|---|
| Trigger | Blauw-omrande kaart met trigger-icoon | Startpunt — welk event start de automatisering |
| Actie | Witte kaart met actie-icoon | Wat er gebeurt — bericht sturen, team toewijzen, enz. |
| Conditie | Kaart met Ja/Nee uitgangen | Vertakkingslogica — splitst de flow op basis van criteria |
| Branch Placeholder | Gestippelde omtrekkaart | Lege Ja- of Nee-tak, klik om acties toe te voegen |
| End Flow | 🏁 vlag-indicator | Markeert het einde van de automatisering |
Edges (Verbindingen)
Nodes worden verbonden door insertable edges — lijnen met een "+"-knop in het midden. Klik op "+" om een nieuwe actie in te voegen tussen twee bestaande stappen.
Conditievertakkingen
Wanneer je een Check Condition-node toevoegt, maakt deze twee takken:
- Ja-tak (links) — acties wanneer de conditie waar is
- Nee-tak (rechts) — acties wanneer de conditie onwaar is
Takken worden weergegeven met geanimeerde gestippelde edges en naast elkaar getoond.
Builder Werkbalk
De bovenste werkbalk bevat:
- Workflownaam — klik om te bewerken (standaard "Naamloze automatisering")
- WhatsApp template-instellingen — naam, taal, categorie (bij WhatsApp-actie)
- Opslaan-knop — slaat de workflow op
- Activeren-knop — slaat op en zet de automatisering aan
Configuratiepanelen
Wanneer je op een node klikt, opent een configuratiepaneel aan de rechterkant. Elk nodetype heeft zijn eigen paneel:
- Triggerpaneel — selecteer triggertype, sub-event en vertraging
- Bericht versturen paneel — templatetekst, variabelen, emoji-picker
- Interactief menu paneel — header, body, footer, menu-items
- Team toewijzen paneel — selecteer doelteam
- E-mail versturen paneel — selecteer opgeslagen e-mailtemplate
- Conditiepaneel — definieer de checkcriteria
- En meer voor elk actietype
Stappen Toevoegen
- Klik op de "+"-knop op een edge tussen nodes
- Een popup-menu verschijnt met alle beschikbare actietypes
- Klik op een actie om deze op die positie in te voegen
- De nieuwe node verschijnt inline, verbonden met de vorige en volgende stappen
Verplaatsen & Herordenen
Nodes in de hoofdketen kunnen omhoog of omlaag worden verplaatst om de uitvoeringsvolgorde te wijzigen. Het canvas herschikt automatisch en verbindt edges opnieuw.
Canvas Bediening
- In/uitzoomen — scrollwiel of knijpbeweging
- Pannen — klik en sleep de canvas-achtergrond
- Passend maken — past automatisch aan na wijzigingen om alle nodes te tonen
- Achtergrond — gestippeld patroon als visuele referentie
Opslaan & Activeren
- Opslaan — bewaart je workflow zonder te activeren (blijft inactief)
- Opslaan & Activeren — slaat op en schakelt de automatisering meteen in
- Bestaande automatiseringen kunnen worden bijgewerkt door er overheen op te slaan
Testen met de Playground
Voordat je activeert, gebruik de Playground om je workflow te testen. Klik op de ▶ Playground-knop in de werkbalk om een simulatiepaneel naast je canvas te openen. Je kunt testberichten sturen en elke stap zien uitvoeren — zonder echte tickets aan te maken of credits te verbruiken. Zie Automatisering Playground — Je Workflows Testen voor alle details.