ConnectWyze

Templates

A template is the visual canvas that ConnectWyze uses to generate images — it defines layout, text layers, image layers, and how data source fields map to them.

What it is

A template is a canvas defined in ConnectWyze's visual editor. You place layers (text, image, shape, background) on the canvas, mark which text or image slots are driven by data source variables, and the workflow engine renders a unique image for every data source item using that canvas.

Templates come in two modes:

  • Single-size — one fixed canvas dimension (e.g. 1080 × 1080). The default for simple use cases.
  • Multi-size (Responsive) — one template with multiple artboards (e.g. Square + Story + Banner). Each artboard gets a correctly adapted version of the same content.

When you'd use it

  • You want to generate 500 product images from a data source where each image has a product photo, price, and name in a consistent branded layout.
  • You need one creative asset in Square (1:1), Story (9:16), and Banner (16:9) formats without maintaining three separate templates.
  • Your designers have a brand template and you want to automate filling in variables per product.
  • You are building an integration via the generate API and need a template ID to call against.

Quick start (user)

Create a single-size template

  1. Go to Dashboard → Templates (/dashboard/creative/templates).
  2. Click New Template.
  3. Enter a name and select Single Size.
  4. Set width and height in pixels.
  5. Click Create — the editor opens.
  6. Use the left panel to add layers: Text, Image, Shape, or Background.
  7. Select a text layer, then in the right panel set its Variable name (e.g. product_name). At render time, the workflow will replace this with the matching data source field value.
  8. To bind an image layer to a data source field, select the layer and set Variable name (e.g. product_image).
  9. Click Save in the toolbar. ConnectWyze renders a thumbnail automatically.

Create a multi-size template

  1. From New Template, select Multi-Size (Responsive).
  2. Add a base artboard size (e.g. 1080 × 1080 Square).
  3. After creating, open the editor and click + Add Artboard in the artboards panel.
  4. Select a preset (e.g. Story 1080 × 1920) or enter custom dimensions.
  5. Each layer shows a Layout or Constraints panel. Choose Responsive to position the layer using alignment + percentage offsets, or Constraints (Figma-style pinning) for pixel-precise control.
  6. Preview each artboard size using the artboard selector in the toolbar.
  7. Click Save.

Settings reference

Template settings (creation dialog)

Field Type Description
Name string Display name. Used in the workflow dropdown and API responses.
Type Single Size / Multi-Size (Responsive) Determines whether artboards are enabled. Cannot be changed after creation.
Width integer (px) Canvas width for single-size templates or the base artboard.
Height integer (px) Canvas height for single-size templates or the base artboard.

Layer settings

Field Type Description
Variable name string Data source field key that drives this layer's content. Leave blank for static content.
Font family string Font used for text layers. Supports Google Fonts and uploaded custom fonts.
Font weight number Weight variant (e.g. 400, 700). Must exist in the chosen font.
Focal point (X, Y) 0–100 Controls image crop centering. Can be overridden per-render via the API.
Opacity 0–1 Layer opacity.
Visible boolean Whether the layer renders. Can be bound to a data source field for conditional rendering.

Artboard settings (multi-size only)

Field Type Description
Name string Label shown in the editor and used in file naming.
Width / Height integer (px) Canvas dimensions for this artboard.
Layout mode Responsive / Constraints / None How layer positions are computed relative to base artboard.
Align (responsive) 9-grid position Anchor point within the artboard for a responsive layer.
Width % / Height % 0–100 Layer dimensions as a percentage of artboard dimensions.
Margin % 0–100 Offset from the anchor, expressed as percentage of artboard width (applies to both axes).

Notes

  • Templates are workspace-scoped; members cannot access templates from another workspace.
  • Archiving a template hides it from the templates list and blocks API generation against it. The template's generated images are preserved.

Developer / API

To generate an image from a template programmatically, see API keys and generate API.

To get a template's ID for API use:

  1. Open the template in the editor.
  2. The URL is /dashboard/creative/templates/{templateId}/edit.
  3. Copy the {templateId} segment.

Multi-artboard generation

Pass artboardId in the generate request body to render a specific artboard:

{
  "templateId": "clxxxxxx",
  "artboardId": "artboard_story",
  "variables": { "product_name": "Air Max 90" }
}

Omit artboardId to render the base artboard.

For bulk multi-artboard generation, use a workflow — the workflow engine renders all artboards in a shared browser context, which is substantially faster than calling the API once per artboard.

ASCII diagram

Data source items
    │
    ▼
Workflow
    │  (field mapping: data source field → layer variable)
    ▼
Template
    ├── Base artboard (1080 × 1080)
    ├── Artboard: Story (1080 × 1920)
    └── Artboard: Banner (1200 × 628)
    │
    ▼  (render engine: Playwright + Sharp)
Generated images
    └── stored in workspace storage (R2 / S3 / GCS)

Troubleshooting

Symptom Cause Fix
Font renders in editor but not in generated image Font weight or style variant doesn't exist in the font. Check fonts.google.com for available weights. Update font-preloader.ts if adding a new preloaded font. Only include weights that exist in the font.
Text appears as a box or missing glyph in output CJK or special-script font subset not loaded. The renderer waits for load before document.fonts.ready. If still failing, confirm the font file contains the required Unicode range.
Custom font looks different in image vs. editor Font has OpenType stylistic alternates (ss01/aalt) enabled by newer Chromium. Contact support — this is a known issue with certain branded fonts.
Thumbnail is blank after saving Thumbnail render is async — wait a few seconds and refresh. If still blank, the template may have a render error — contact support.
Multi-size artboard renders wrong position Layer margins reference artboard width for both axes. Verify layout percentages account for this.
Legacy v1 templates are no longer supported Template was created before the v2 editor. Recreate the template in the current editor.