Signature Designer

A wizard that lets users build branded HTML signatures from a template gallery, filled in with their own contact data. Six built-in templates (template-000 through template-005) ship by default. Ops can supply additional templates and policy without deploying a new application version.

How it works

1. Templates are read at request time from the mail assets directory mounted into the container (default: /etc/mail-assets).
2. Each .html file in that directory becomes one additional template.
3. An optional designs.yaml in the same directory controls visibility, ordering, custom fields, default values, and per-template metadata.
4. The built-in templates are always present. Ops templates are appended after them.

Setup

Mail assets ConfigMap

The mail assets directory is mounted from a ConfigMap. The same ConfigMap also holds data for managed signatures and managed templates; include only the keys you need.

apiVersion: v1
kind: ConfigMap
metadata:
  name: mail-assets
data:
  # Signature designer: additional HTML templates and policy
  my-template.html: |
    <table>...</table>
  designs.yaml: |
    disabledIds:
      - template-003
  # Managed signatures
  signatures.yaml: |
    company_default:
      title: Company Default
      content: "<p></p>"
  # Managed templates
  templates.yaml: |
    welcome:
      title: Welcome
      content: "<p>Hi </p>"

Reference it in values.yaml:

mailAssets:
  configMapName: mail-assets

Enable the Signature Designer

io.ox/core//features/signatureDesigner: true

This flag gates the wizard itself. It is independent of managedSignatures and managedTemplates.

Built-in templates

Six templates (template-000 through template-005) ship with the application. Ops-provided template IDs (filenames without .html) must not conflict with these; conflicting ops templates are silently ignored.

Use disabledIds or enabledIds in designs.yaml to control which built-ins are shown.

designs.yaml reference

customFields

Defines additional fields that appear in the wizard alongside the standard contact fields.

previewTheme

Defines the theme colors used when rendering a template in the gallery. Passed as and — so they affect elements that use the theme, such as the profession badge and icon button backgrounds.

When the user selects a different theme in the designer, their selection overrides previewTheme during live editing. Defaults to { "background": "#ffffff", "text": "black" } if not set.

imageSlots

Declares image fields used by the template so the gallery can show a correctly shaped placeholder before the user uploads an image. Does not affect upload controls in the designer — those are determined by the presence of `` in the template HTML.

Template variables

Templates are rendered using Mustache. Wrap every variable in a section guard so that rows with no value collapse rather than render empty:

<strong></strong>

Contact fields

All standard OX contact model fields are available and pre-filled from the user's own contact data. See the OX HTTP API contact model for the full list of field names.

Commonly used fields:

Designer-specific fields

These fields are not part of the contact model but are added by the Signature Designer:

Icon fields

Ten fields have a corresponding icon URL variable that is automatically populated when the field has a value. The icon switches between a black and white variant based on the active theme.

Use a double section guard — the outer guard hides the element when the field is empty, the inner guard ensures the icon URL is ready before rendering:

<a href="mailto:">
  <img src="" width="16" height="16" />
</a>

Styling fields

Example template

A minimal template demonstrating all variable patterns:

<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse: collapse; font-family: ;">
  <tr>
    <td>

      <div style="font-weight: 600; font-size: 22;"></div>



      <div style="display: inline-block; padding: 6px 10px; border-radius: 6px; margin-top: 8px; background-color: #000; color: #fff; background-color: ; color: ;">
        <span style="font-size: 12;"></span>
      </div>



      <table role="presentation" style="margin-top: 8px; border-collapse: collapse;">
        <tr>
          <td style="padding: 6px; border-radius: 50%; background-color: #000; background-color: ;">
            <img src="" width="12" height="12" style="display: block;" />
          </td>
          <td style="padding-left: 8px; font-size: 14;">
            <a href="mailto:" style="color: inherit; text-decoration: none;"></a>
          </td>
        </tr>
      </table>

    </td>

    <td style="padding-left: 16px;">
      <img src="" width="64" height="64" style="display: block; border-radius: 8px;" />
    </td>

  </tr>
</table>


<div style="border-top: 1px solid #E8E6E3; margin-top: 12px; padding-top: 8px; color: #707070; font-size: 11;"></div>

If saved as my-template.html in the ConfigMap, the matching designs.yaml entry to give it a black profession badge with white text and a square image slot:

templates:
  my-template:
    previewTheme:
      background: '#000000'
      text: white
    imageSlots:
      - field: imageUrl
        aspect: square