Embeddable Templates SDK

<SuprSendTemplateProvider
  workspaceUid="ws_123"
  accessToken={token}
  refreshAccessToken={async (oldToken) => {
    const response = await fetch('/api/refresh-token', {
      method: 'POST',
      body: JSON.stringify({ token: oldToken }),
    });
    const { newToken } = await response.json();
    return newToken;
  }}
  // ...other props
/>

import time
import jwt
from typing import Dict, Any

# ==================== CONFIGURATION ====================

signing_key_uid = "signing_key_xxxxxx"

# Private key in PEM format
signing_private_key = """-----BEGIN PRIVATE KEY-----
MIGHAgEAMBMGByqGSM49AgEGxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----"""

# ==================== PAYLOAD ====================

payload: Dict[str, Any] = {
    "workspace_uid": "<ws_uid>",
    "entity_type": "template",
    "entity_id": "<template-slug>",          # Use "*" to allow access to all templates
    
    # unique key used to share resources,
    # ex: if you pass tenant_id then resources like designer editor's images will be shared within that tenant.
    # if you pass workspace_uid then resources will shared within that workspace.
    # defaults to organization_uid
    "resource_namespace": "",
    "scope": {
        # Template-level scope
        "variant_scope": {                   # variant_scope: If missing, user can access all variants
            "channels": ["email"],           # If missing, any channel can be accessed
            "variant_id": "v1",              # If missing, any variant can be accessed
            "tenant_id": "<tenant1>",        # If missing or null, variants of all tenants can be accessed
            "locale": "en",                  # If missing, variants of all locales can be accessed

            "conditions": [                  # If missing, variants of all conditions can be accessed
                {
                    "expression_v1": {
                        "op": "AND",
                        "args": [
                            {"variable_ns": "", "variable": "age", "op": "==", "value": "18"},
                            {"variable_ns": "", "variable": "age", "op": "==", "value": "18"}
                        ]
                    }
                }
            ],

            "fallback_variant_id": "var_1"   # If the requested variant is not present,
                                             # use content from this fallback variant
        },

        # Only the recipients mentioned below can be accessed
        # (used for mock testing and variable fetching)
        # If this key is missing, mock/variable functionality might not work properly
        "recipients": [
            {"distinct_id": "id1"},
            {"distinct_id": "id2"}
        ]
    },

    # Token expiration settings
    "iat": int(time.time()),                    # Issued at (current time in unix seconds)
    "exp": int(time.time()) + 3600              # Expiration time (add extra seconds as needed)
}

# ==================== JWT HEADER ====================

header_dict = {
    "alg": "ES256",
    "kid": signing_key_id,
    "typ": "JWT"
}

# ==================== GENERATE TOKEN ====================

auth_token = jwt.encode(
    payload=payload,
    key=signing_private_key,
    algorithm="ES256",
    headers=header_dict
)

print(auth_token)

<SuprSendTemplateProvider
  workspaceUid="ws_123"
  templateSlug="welcome-email"
  variantId="default"
  channels={['email', 'inbox', 'webpush']}
  tenantId={null}
  locale="en"
  themeOverrides={{ primary: '#6366f1', radius: '8px' }}
  accessToken="your-access-token"
  refreshAccessToken={async (oldToken) => {
    const newToken = await fetchNewToken(oldToken);
    return newToken;
  }}
>
  {children}
</SuprSendTemplateProvider>

<SuprSendTemplateProvider
  workspaceUid="ws_123"
  templateSlug="order-update"
  variantId="v1"
  channels={['email']}
  tenantId={null}
  locale="en"
  accessToken="your-access-token"
  conditions={[
    // Group 1 — high-priority order (input payload) from a Pro-plan tenant
    {
      type: 'expression_v1',
      expression_v1: {
        op: 'AND',
        args: [
          { variable_ns: '', variable: 'priority', op: '==', value: 'high' },
          { variable_ns: '$tenant', variable: 'plan', op: '==', value: 'pro' },
        ],
      },
    },
    // OR Group 2 — admin actor sending to a recipient in India
    {
      type: 'expression_v1',
      expression_v1: {
        op: 'AND',
        args: [
          { variable_ns: '$actor', variable: 'role', op: '==', value: 'admin' },
          { variable_ns: '$recipient', variable: 'country', op: '==', value: 'IN' },
        ],
      },
    },
  ]}
>
  {children}
</SuprSendTemplateProvider>

<TemplateEditor
  hideActionButtons={false}
  onCommit={() => console.log('Committed!')}
/>

<CommitButton onCommit={() => console.log('Published!')} />

<TestButton onTestSent={() => console.log('Test sent!')} />

<SuprSendTemplateProvider
  themeOverrides={{
    primary: '#6366f1',
    primaryForeground: '#ffffff',
    background: '#fafafa',
    foreground: '#111827',
    border: '#e5e7eb',
    radius: '8px',
  }}
  // ...other props
>
  {children}
</SuprSendTemplateProvider>