diff --git a/site/src/components/AutomationsDemo.astro b/site/src/components/AutomationsDemo.astro new file mode 100644 index 000000000..6e23641dd --- /dev/null +++ b/site/src/components/AutomationsDemo.astro @@ -0,0 +1,389 @@ +--- +/** + * Live demo of the Warmbly automation builder (/app/automations/:id). + * + * Pixel-faithful to web/src (PageTopbar + React-Flow canvas: TriggerNode / + * ConditionNode / ActionNode, sky-600 chrome, dot grid at 24px), authored at a + * fixed 1280px design width and uniformly scaled to fit its container. + * + * The demo is a 15s master timeline, all CSS keyframes on one shared duration: + * a cursor presses Test, the insights panel slides in, and the run travels the + * flow node by node: edges draw in, nodes flash as the run passes, result rows + * check off in the panel, a Slack notification pops, the summary lands. The + * "no" branch dims while the run takes the "yes" path. Clicking the real Test + * button restarts the run from zero. + */ +const zapIcon = ''; +const gitBranchIcon = ''; +const briefcaseIcon = ''; +const tagIcon = ''; +const sendIcon = ''; +const historyIcon = ''; +const playIcon = ''; +const wandIcon = ''; +const checkIcon = ''; +const checkCircleIcon = ''; +const arrowLeftIcon = ''; +const plusIcon = ''; +const xIcon = ''; +--- +
+ +
+
+ + + +
+ +
+ + app.warmbly.com/automations/reply-to-revenue +
+ +
+ + +
+
+ + +
+ + Reply to revenue + + + Active + +
+ History + + Tidy up + Saved +
+
+ + +
+ + +
+ Add action + Add condition +
+ + +
drag a node's dot to connect · IF block: right dot = yes, bottom dot = no
+ + + + + + yes + no + + +
+
+
+ + Prospect replies + Trigger +
+
+
When
+
campaign.reply_received
+
+ +
+
+ + +
+
+
+ + if + intent is positive · ≥ 80% +
+ + +
+
+ + +
+
+
+ S + Send a Slack message +
+
+
Then
+
#sales · reply from {`{{.contact_email}}`}
+
+ + +
+
+ + +
+
+
+ + Create a deal +
+
+
Then
+
Discovery · $4,800
+
+ + +
+
+ + +
+
+
+ H + Update HubSpot contact +
+
+
Then
+
lifecycle stage · opportunity
+
+ +
+
+ + +
+
+
+ + Add a tag +
+
+
Then
+
nurture
+
+ + +
+
+ + +
+
+
+ + Send a webhook +
+
+
Then
+
hooks.yourapp.com/replies
+
+ +
+
+ + + + + + + +
+ + + +
+
+ + + + +
diff --git a/site/src/components/AutomationsShowcase.astro b/site/src/components/AutomationsShowcase.astro new file mode 100644 index 000000000..9b95e22d8 --- /dev/null +++ b/site/src/components/AutomationsShowcase.astro @@ -0,0 +1,122 @@ +--- +import Icon from './Icon.astro'; +import AutomationsDemo from './AutomationsDemo.astro'; + +/** + * Landing-page centerpiece for Automations. Breaks the copy-beside-window + * rhythm of the feature showcase on purpose: the whole section is drawn as a + * builder canvas (edge-to-edge dot grid + faint flow strokes + floating node + * fragments), with the live demo window running a test end to end at + * near-full container width. + */ +const callouts = [ + { + icon: 'gitBranch', + label: 'Branches like you think', + text: 'One IF chip routes on intent, confidence, source, or a random split. Yes goes right, no goes down, and the no path is still yours to wire.', + }, + { + icon: 'layers', + label: 'Acts across your stack', + text: 'Seven built-in actions plus Slack, Discord, HubSpot, Salesforce, Pipedrive, Close and HMAC-signed webhooks. No keys to paste for automation tools.', + }, + { + icon: 'flask', + label: 'Test before it is on', + text: 'Dry-run any automation against a sample event and read every node verdict, yes or no, before the switch ever flips.', + }, +]; +--- +
+ + + + + + + + +
+
+
Automations
+

+ When this happens, do that. +

+

+ Every reply, booked meeting, bounce and warmup dip is a trigger. Wire it to your stack on a canvas: branch on intent, post to Slack, open the deal, update the CRM. The one below is running its test right now. Press Test in the window to fire it again. +

+
+ + +
+ +
+ + +
+ {callouts.map((c) => ( +
+
+ +
{c.label}
+
+

{c.text}

+
+ ))} +
+ +
+ + Explore automations + + + + or start free + + +
+
+ + +
diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro index 1b800e74a..396010722 100644 --- a/site/src/components/Footer.astro +++ b/site/src/components/Footer.astro @@ -9,6 +9,7 @@ const groups: { title: string; links: { label: string; href: string }[] }[] = [ { label: 'Sending engine', href: '/sending/' }, { label: 'Unified inbox', href: '/inbox/' }, { label: 'Campaigns', href: '/campaigns/' }, + { label: 'Automations', href: '/automations/' }, { label: 'Analytics', href: '/analytics/' }, { label: 'CRM', href: '/crm/' }, { label: 'API & Webhooks', href: '/developers/' }, diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro index 4f67c1f66..28e532eaf 100644 --- a/site/src/components/Header.astro +++ b/site/src/components/Header.astro @@ -10,6 +10,16 @@ const { onSky = false } = Astro.props; const path = Astro.url.pathname; +// Featured product: rendered as a full-width row above the grid, with a +// miniature trigger -> if -> action flow as its visual. +const productFeatured = { + icon: 'zap', + href: '/automations/', + title: 'Automations', + desc: 'When a reply lands: open the deal, ping Slack, update the CRM. A visual builder for every Warmbly event.', + tag: 'Orchestration', +}; + // Product mega-menu items (6 meaningful products) const products = [ { icon: 'flame', href: '/warmup/', title: 'Warmup', desc: 'Reputation-safe pools and gradual ramps that earn placement, not just inflate it.', tag: 'Deliverability' }, @@ -38,17 +48,19 @@ type NavItem = { megaTitle?: string; megaTagline?: string; megaItems?: MegaItem[]; + megaFeatured?: MegaItem; }; const nav: NavItem[] = [ { label: 'Product', href: '/warmup/', - match: '/warmup|/developers|/inbox|/campaigns|/analytics|/crm', + match: '/warmup|/developers|/inbox|/campaigns|/analytics|/crm|/automations', mega: true, megaTitle: 'The cold-email platform.', - megaTagline: 'Six systems designed to work together. Warmup that earns reputation, sending that respects it.', + megaTagline: 'Seven systems designed to work together. Warmup that earns reputation, sending that respects it.', megaItems: products, + megaFeatured: productFeatured, }, { label: 'Use cases', @@ -124,8 +136,59 @@ function active(match?: string) { - -
+ +
+ {n.megaFeatured && (() => { + const f = n.megaFeatured; + const isCurrent = path === f.href || path.startsWith(f.href); + return ( + + + {f.tag} + + {f.title} + {isCurrent && } + + {f.desc} + + + {/* miniature flow: trigger -> if -> actions, same node language as the app */} + + + + Open + + + + ); + })()} +
{(n.megaItems ?? []).map((it, i) => { const isCurrent = path === it.href || path.startsWith(it.href); const colBreak = (i + 1) % 3 !== 0; @@ -150,6 +213,7 @@ function active(match?: string) { ); })} +
@@ -255,7 +319,7 @@ function active(match?: string) {
- {(n.megaItems ?? []).map((it) => ( + {[...(n.megaFeatured ? [n.megaFeatured] : []), ...(n.megaItems ?? [])].map((it) => ( {it.title} {it.desc.split('.')[0]}. diff --git a/site/src/components/Icon.astro b/site/src/components/Icon.astro index 6ac95ff53..94a9012f7 100644 --- a/site/src/components/Icon.astro +++ b/site/src/components/Icon.astro @@ -52,6 +52,7 @@ const icons: Record = { warning: '', star: '', rocket: '', + plus: '', }; const path = icons[name] ?? ''; diff --git a/site/src/pages/automations.astro b/site/src/pages/automations.astro new file mode 100644 index 000000000..5c365aca5 --- /dev/null +++ b/site/src/pages/automations.astro @@ -0,0 +1,624 @@ +--- +import Layout from '../layouts/Layout.astro'; +import HeroAtmosphere from '../components/HeroAtmosphere.astro'; +import Icon from '../components/Icon.astro'; +import CTA from '../components/CTA.astro'; +import AutomationsDemo from '../components/AutomationsDemo.astro'; + +// =========================================================================== +// Automations page. The centrepiece is the live builder demo (AutomationsDemo, +// shared with the landing page): the real /app/automations/:id canvas with a +// test run firing end to end. Catalog content mirrors the product: +// web/src automations builder (trigger events, native + integration +// actions, condition fields, test runs) +// migrations 000033..000035 (automations, branching graph, history) +// +// Astro JSX caveat: template tokens are written as {`{{.Field}}`}. +// =========================================================================== + +// --- Trigger events ---------------------------------------------------------- +const triggers = [ + { icon: 'reply', label: 'Prospect replies', key: 'campaign.reply_received', desc: 'The classifier labels intent and confidence before the trigger fires, so you can branch on both.' }, + { icon: 'calendarCheck', label: 'Meeting booked', key: 'meeting.booked', desc: 'Calendly and Cal.com invitees, matched back to the contact that booked.' }, + { icon: 'calendarClock', label: 'Meeting rescheduled', key: 'meeting.rescheduled', desc: 'Same payload, new time, so downstream reminders stay honest.' }, + { icon: 'calendarX', label: 'Meeting canceled', key: 'meeting.canceled', desc: 'Catch the cancellation and put the contact back to work.' }, + { icon: 'mailWarning', label: 'Email bounces', key: 'campaign.email_bounced', desc: 'Hard or soft, with the provider and reason attached to the event.' }, + { icon: 'userMinus', label: 'Contact unsubscribes', key: 'campaign.unsubscribed', desc: 'Suppression already happened. This is your cue to sync it everywhere else.' }, + { icon: 'activity', label: 'Warmup health changes', key: 'warmup.health_changed', desc: 'A mailbox moves bands: healthy, watch, quarantined. React before placement slips.' }, + { icon: 'shieldAlert', label: 'Spam complaint', key: 'deliverability.complaint', desc: 'The signal worth reacting to fastest. Page the channel, pause the risk.' }, + { icon: 'workflow', label: 'Launched by a campaign step', key: 'campaign.action', desc: 'A sequence action node can fire any automation, per contact, mid-flow.' }, +]; + +const tIcons: Record = { + reply: '', + calendarCheck: '', + calendarClock: '', + calendarX: '', + mailWarning: '', + userMinus: '', + activity: '', + shieldAlert: '', + workflow: '', +}; + +const aIcons: Record = { + tag: '', + checkSquare: '', + briefcase: '', + userMinus: '', + zap: '', + send: '', + gitBranch: '', + checkCircle: '', + xCircle: '', +}; + +// --- Actions: built in ------------------------------------------------------- +const nativeActions = [ + { icon: 'tag', tint: 'bg-emerald-50 text-emerald-600 ring-emerald-200', name: 'Add a tag', key: 'warmbly.add_tag', desc: 'Label the contact for the next segment or suppression list.' }, + { icon: 'tag', tint: 'bg-amber-50 text-amber-600 ring-amber-200', name: 'Remove a tag', key: 'warmbly.remove_tag', desc: 'Pull them out of a segment the moment the reason expires.' }, + { icon: 'checkSquare', tint: 'bg-violet-50 text-violet-600 ring-violet-200', name: 'Create a task', key: 'warmbly.create_task', desc: 'Typed, owned, with a due date: call back, review, follow up.' }, + { icon: 'briefcase', tint: 'bg-sky-50 text-sky-600 ring-sky-200', name: 'Create a deal', key: 'warmbly.create_deal', desc: 'Open the pipeline record with a stage, value and currency.' }, + { icon: 'briefcase', tint: 'bg-sky-50 text-sky-600 ring-sky-200', name: 'Move the deal stage', key: 'warmbly.move_deal_stage', desc: 'Advance or park the deal as the signal comes in.' }, + { icon: 'userMinus', tint: 'bg-rose-50 text-rose-600 ring-rose-200', name: 'Unsubscribe the contact', key: 'warmbly.unsubscribe', desc: 'Workspace-wide suppression, applied before anything else queues.' }, + { icon: 'zap', tint: 'bg-indigo-50 text-indigo-600 ring-indigo-200', name: 'Run another automation', key: 'warmbly.run_automation', desc: 'Compose playbooks. Self-reference is blocked, so no loops.' }, +]; + +// --- Actions: across the stack ---------------------------------------------- +const stackActions = [ + { initial: 'S', tile: 'bg-fuchsia-50 text-fuchsia-600 ring-fuchsia-200', name: 'Slack', action: 'Send a channel message, templated per event.' }, + { initial: 'D', tile: 'bg-indigo-50 text-indigo-600 ring-indigo-200', name: 'Discord', action: 'Same message action, pointed at a Discord channel.' }, + { initial: 'H', tile: 'bg-orange-50 text-orange-600 ring-orange-200', name: 'HubSpot', action: 'Create or update the contact as events land.' }, + { initial: 'Sf', tile: 'bg-sky-50 text-sky-600 ring-sky-200', name: 'Salesforce', action: 'Upsert the contact into your org.' }, + { initial: 'P', tile: 'bg-slate-100 text-slate-700 ring-slate-300', name: 'Pipedrive', action: 'Create or update the person record.' }, + { initial: 'C', tile: 'bg-indigo-50 text-indigo-600 ring-indigo-200', name: 'Close', action: 'Upsert the lead, ready for the calling queue.' }, + { initial: '{}', tile: 'bg-sky-50 text-sky-600 ring-sky-200', name: 'Webhook', action: 'HMAC-signed POST to any URL you run.' }, +]; + +// --- Condition surface -------------------------------------------------------- +const conditionFields = [ + { field: 'intent', on: 'replies', type: 'enum' }, + { field: 'confidence', on: 'replies', type: 'number' }, + { field: 'subject', on: 'replies', type: 'string' }, + { field: 'source', on: 'meetings', type: 'enum' }, + { field: 'event_name', on: 'meetings', type: 'string' }, + { field: 'provider', on: 'deliverability', type: 'enum' }, + { field: 'reason', on: 'deliverability', type: 'string' }, + { field: 'new_state', on: 'warmup health', type: 'enum' }, + { field: 'contact_email', on: 'everything', type: 'string' }, +]; + +const operators = [ + { type: 'string', ops: 'equals · not equals · contains · exists' }, + { type: 'number', ops: 'greater or equal · less or equal · equals' }, + { type: 'enum', ops: 'equals · not equals · exists' }, + { type: 'random', ops: 'chance, a weighted split for testing playbooks' }, +]; + +// --- Template variables ------------------------------------------------------- +const variables = ['{{.contact_email}}', '{{.intent}}', '{{.confidence}}', '{{.subject}}', '{{.snippet}}', '{{.campaign_id}}']; + +// --- Trust strip --------------------------------------------------------------- +const trust = [ + { icon: 'lock', t: 'Signed deliveries', d: 'Every webhook a run sends carries an HMAC SHA-256 signature header. Verify it in four lines and drop anything that does not match.' }, + { icon: 'shield', t: 'Throttled, fail-open', d: 'Dispatch is rate-limited per organization and event with generous plan-based limits. If the limiter itself has a bad day, events still flow.' }, + { icon: 'layers', t: 'Safe to compose', d: 'Automations can run automations, and campaign steps can launch them per contact. Anything referenced by a live campaign step cannot be deleted out from under it.' }, + { icon: 'key', t: 'No keys to paste', d: 'Automation tools connect in one click. OAuth where the provider has a per-user identity, a minted webhook URL for the rest.' }, +]; + +// --- FAQ ----------------------------------------------------------------------- +const faq = [ + ['What can start an automation?', + 'Nine triggers: a classified reply, a booked, rescheduled or canceled meeting, a bounce, an unsubscribe, a warmup health change, a spam complaint, and a campaign step that launches the automation per contact mid-sequence.'], + ['Do I still need Zapier?', + 'For the common paths, no: Slack, Discord, HubSpot, Salesforce, Pipedrive, Close and the built-in CRM actions are direct. Zapier, Make and n8n still connect with a scoped key when you want them, and the signed webhook action reaches anything else.'], + ['What happens when a step fails?', + 'Each run records a per-node result. A failed step keeps the response it got, the run shows up in history with exactly which node broke and why, and the verdicts of the other nodes stay readable. Test runs exist so most failures never reach production.'], + ['Can one automation run another?', + 'Yes. The run-another-automation action composes playbooks, and a campaign sequence step can launch an automation for each contact that reaches it. Self-reference is blocked in the picker, and an automation referenced by a campaign step cannot be deleted.'], + ['Does the test run send anything?', + 'No. Test is a dry run against a sample event for your trigger. Every node reports what it would do, conditions report yes or no, and nothing leaves Warmbly until the automation is switched on.'], +]; +--- + + +
+ + + + +
+
+ + Automations + + A visual builder for every Warmbly event +
+ +

+ When this happens,
do that. +

+

+ A reply lands, a meeting books, a mailbox slips. Wire each moment to your playbook on a canvas: branch on intent, post to Slack, open the deal, update the CRM, fire a signed webhook. Then dry-run it before it ever touches production. +

+ +
+ + Build your first automation + + + + Watch it run + +
+
+
+ + + + +
+ + + +
+
+
Live demo
+

+ Watch a run, end to end. +

+

+ This is the builder as it ships. A positive reply comes in, the IF chip routes it, and the yes path posts to Slack, opens the deal and updates HubSpot while the test panel checks off every node. The no path waits its turn. Press Test in the window to fire it again. +

+
+ +
+ +
+
+
+ + +
+
+
+
Triggers
+

+ Nine moments it can fire. +

+

+ Every automation starts from one event. Replies arrive already classified, meetings arrive matched to the contact, and a campaign step can launch an automation for each contact that reaches it. +

+
+ +
+ {triggers.map((t) => ( +
+
+ + + +
+
{t.label}
+
{t.key}
+
+
+

{t.desc}

+
+ ))} +
+
+
+ + +
+
+
+
Actions
+

+ Do it in Warmbly. Do it everywhere else. +

+

+ Seven actions ship built in and need no connection at all. The rest reach your stack through the integrations you have already connected, with message templates rendered per event. +

+
    +
  • Built-in actions run inside Warmbly: tags, tasks, deals, suppression.
    • +
  • Stack actions reuse the connection: pick it from a dropdown, done.
    • +
+
+ +
+
+
Built in · no connection needed
+ {nativeActions.map((a) => ( +
+ + + +
+ {a.name} + +
+ +
+ ))} +
+ +
+
Across your stack
+ {stackActions.map((s) => ( +
+ {s.initial} +
+ {s.name} + · {s.action} +
+
+ ))} +
+
+
+
+ + +
+
+
+
Branching
+

+ One chip, two paths, full graph. +

+

+ A condition reads one field off the event and routes it: yes out the right dot, no out the bottom. Chain conditions for AND logic, point both paths anywhere, and converge them back when the playbooks rejoin. +

+
    +
  • Fields follow the trigger: intent and confidence on replies, source on meetings, provider and reason on bounces.
    • +
  • A random split routes a weighted share of events down a different path.
    • +
+
+ +
+ +
+
+ +
+
Condition
+
on campaign.reply_received
+
+
+
+
+
Field
+
intent
+
+
+
Operator
+
equals
+
+
+
Value
+
positive
+
+
+
+ Fields by trigger + {conditionFields.map((f) => ( + + {f.field} + · {f.on} + + ))} +
+
+ + +
+
+
Field type
+
Operators
+
+ {operators.map((o) => ( +
+ {o.type} + {o.ops} +
+ ))} +
+
+
+
+ + +
+
+
+
Templating
+

+ Messages written from the event. +

+

+ Slack messages, Discord messages and webhook payloads are Go templates, the same syntax as the rest of Warmbly. Pull any field the trigger carries and the message reads like a teammate wrote it. +

+
+
Reply event fields
+
+ {variables.map((v) => ( + {v} + ))} +
+
+
+ +
+ +
+
+ + + + slack message · template +
+
+
:fire: {`{{.contact_email}}`} replied to {`{{.subject}}`}
+
intent {`{{.intent}}`} at {`{{.confidence}}`}% · “{`{{.snippet}}`}”
+
+
+ + +
+
+ + Lands in #sales as +
+
+
+ S +
+
+ Warmbly + app + 2:14 pm +
+

+ 🔥 maya@northwind.dev replied to Re: Quick question
+ intent positive at 92% · “Thursday works for me” +

+
+
+
+

+ Rendered with the event that fired the run. A blank field never breaks the message, it just renders empty. +

+
+
+
+
+ + +
+
+
+
Test runs & history
+

+ Know what it did, every time. +

+

+ Test fires a dry run against a sample event: every node reports what it would do, every condition reports yes or no, and nothing leaves Warmbly. Once live, every real run lands in history with per-node results, so a broken step is a read, not an investigation. +

+
    +
  • Per-node verdicts, with the provider response kept on failures.
    • +
  • Branch decisions are recorded too: you can see which path a contact took.
    • +
+
+ +
+
+ +
Run history · Reply to revenue
+
+ + +
+
+ + Run passed + 2 min ago · 5 steps · 1.9 s +
+
+ {[ + { label: 'Trigger · Prospect replies', right: 'maya@northwind.dev', ok: true }, + { label: 'intent is positive · ≥ 80%', right: 'yes · 92%', ok: true }, + { label: 'Slack message · #sales', right: '212 ms', ok: true }, + { label: 'Deal created · Discovery', right: '$4,800', ok: true }, + { label: 'HubSpot contact updated', right: '2 fields', ok: true }, + ].map((r) => ( +
+ + {r.label} + {r.right} +
+ ))} +
+
+ + +
+ + Run passed + 1 h ago · took the no path · 2 steps + no · 41% +
+ + +
+
+ + Run failed + yesterday · step 3 of 5 + failed +
+
+ + Slack message · #sales + 404 · channel_not_found +
+
+
+
+
+ + +
+
+
+
Plumbing
+

+ Built to not wake you up. +

+
+ +
+ {trust.map((c) => ( +
+ +
{c.t}
+

{c.d}

+
+ ))} +
+
+
+ + +
+
+
+
Automations FAQ
+

+ Five questions about how runs behave. +

+
+
+ {faq.map(([q, a]) => ( +
+ +
+
+

{a}

+
+
+
+ ))} +
+ + +
+
+ + + diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro index ac9efee45..e08a37906 100644 --- a/site/src/pages/index.astro +++ b/site/src/pages/index.astro @@ -15,6 +15,7 @@ import CRMMock from '../components/CRMMock.astro'; import TemplatingShowcase from '../components/TemplatingShowcase.astro'; import ChangelogShowcase from '../components/ChangelogShowcase.astro'; import OpenSourceShowcase from '../components/OpenSourceShowcase.astro'; +import AutomationsShowcase from '../components/AutomationsShowcase.astro'; const compare = [ ['Per-mailbox cold cap', '50 / day default', '200 / day if you ask for it'], @@ -343,6 +344,13 @@ const softwareJsonLd = { + + +