Studio Pod Email Flow
15 built  ·  10 need action

Create

New flow

Build a new triggered flow message. Specify the Klaviyo metric that fires it and the delay timing. We generate the registry entry and starter HTML; you build the flow shell in Klaviyo's flow editor and paste back the flow message ID once.

Identity

Inbox

Trigger

Audience & Goal

Notes

Generated code

Copy each block into the matching file, then build the flow shell in Klaviyo and paste the flow message ID back.

1. Registry entry → site/src/pages/emails-internal/_emails.ts 
 
 2. HTML starter → site/public/emails/{slug}.html  
 
 
 
Next steps
 
     
  1. Paste the registry entry into _emails.ts.
    2.  
  2. Save the HTML starter at site/public/emails/{slug}.html and refine.
    3.  
  3. Run KLAVIYO_API_KEY=… node scripts/klaviyo-sync-templates.mjs.
    4.  
  4. In Klaviyo: Flows → Create flow → trigger metric = the value above → add an email step → set the delay → save.
    5.  
  5. Copy the new flow_message_id and paste it under flowMessages in _klaviyo-state.json.
    6.  
  6. Run KLAVIYO_API_KEY=… node scripts/klaviyo-sync-flows.mjs to attach the template.
    7.  
 
 
 
 ',
          '',
        ].filter(Boolean).join('\n');
      }

      function render() {
        var d = values();
        if (!d.slug || !d.name || !d.subject || !d.triggerMetric) {
          tsOut.textContent = '// Fill in name, slug, subject, and trigger metric to generate code.';
          htmlOut.textContent = '';
          return;
        }
        tsOut.textContent = tsEntry(d);
        htmlOut.textContent = htmlStarter(d);
      }

      function copyHandler(e) {
        var btn = e.currentTarget;
        var kind = btn.getAttribute('data-copy');
        var src = document.getElementById('output-' + kind);
        if (!src) return;
        navigator.clipboard.writeText(src.textContent).then(function () {
          var original = btn.textContent;
          btn.textContent = 'Copied';
          btn.classList.add('is-copied');
          setTimeout(function () { btn.textContent = original; btn.classList.remove('is-copied'); }, 1400);
        });
      }

      form.addEventListener('input', function (e) {
        if (e.target.name === 'name') autoSlug();
        if (e.target.name === 'slug') e.target.dataset.auto = '0';
        render();
      });
      Array.prototype.forEach.call(document.querySelectorAll('.copy-btn'), function (b) {
        b.addEventListener('click', copyHandler);
      });

      render();
    })();