Kembali ke docs

Template engine

Customize tampilan email di white-label inbox kamu dengan template HTML berbasis Handlebars.

Buat template

  1. Layanan → Template → Buat template
  2. Edit HTML source pakai Handlebars syntax
  3. Set sebagai default (1 per layanan)

Variable yang tersedia

VariableDeskripsi
{{from}}Email sender (sanitized)
{{from_name}}Display name sender
{{from_domain}}Domain sender
{{subject}}Subject email
{{received_at}}Timestamp received
{{text_body}}Plain text body
{{{html_body}}}HTML body (sudah DOMPurify, pakai 3 brace untuk raw)
{{otp_code}}Auto-extract OTP (nullable)
{{link_first}}URL pertama di body
{{link_all}}Array semua URL
{{sender_avatar}}Avatar URL (Dicebear)

Contoh

<div style="font-family: -apple-system, sans-serif; max-width: 640px; padding: 24px;">
  <div style="color: #666; font-size: 13px; margin-bottom: 12px;">
    Dari: <strong>{{from_name}}</strong> &lt;{{from}}&gt;
  </div>
  <h1>{{subject}}</h1>
  {{#if otp_code}}
    <div style="background: #fef3c7; padding: 16px; border-radius: 8px;">
      <div style="font-size: 11px; text-transform: uppercase;">OTP</div>
      <div style="font-family: monospace; font-size: 28px; font-weight: bold;">{{otp_code}}</div>
    </div>
  {{/if}}
  <div style="margin-top: 16px;">{{{html_body}}}</div>
</div>

Auto-extract OTP

Cloudin auto-detect OTP code dari subject + body kalau ada keyword "otp", "kode", "code", "verify", "verifikasi", "pin". Format yang dikenali:

  • 891-203 (3-3 digit)
  • 891203 (6-8 digit)
  • 4421 (4-5 digit)
  • ABC123 (alphanum 6-8 char)

Helper functions

  • {{formatDate received_at "dd MMM yyyy HH:mm"}} — format tanggal
  • {{upperCase from_name}} — kapitalize

Limit

  • Max 10 template per layanan
  • Max 60.000 character per template source