Template color variables

Data variables drive the dynamic pieces of any template in Waypoint’s template builder. Most teams use them for text and images, but you can also use them to set dynamic colors on a template or layout — an easy way to white-label a template with your customer’s brand colors.

In the template or layout builder, click the {} icon next to a color in the global ‘Styles’ tab to override it with a variable.

Example: {{brandColor}}.

If the variable is missing or invalid, the value in the color picker is used as a fallback.

Tutorial

Scenario

Say you’re building a vertical SaaS for yoga studios and want to send emails on behalf of those studios (your customers) to their members. Since you’re white-labeling, you want to pass branding assets and color data into the templates so each email feels on-brand for the studio.

Building the template

Start by building your base template (more on template building):

Adding test data

With the template in place, set up test data to mock what the API will pass in when sending an email.

In the ‘Data’ tab of the template builder, add the studio’s branding data alongside the rest of your template data:

  "company": {
    "name": "SOL Y MAR, Inc.",
    "logoUrl": "https://assets.usewaypoint.com/logo-solymar.png",
    "brand": {
      "backdropColor": "#0A2232",
      "canvasColor": "#0A2232",
      "textColor": "#EEEEEE",
      "accentColor": "#75FB84"
    }
  },
  [...]

Referencing data variables

Now reference those variables from the ‘Style’ tab — for example, {{company.brand.backdropColor}}.

The preview updates live as you wire up each variable:

Dynamic colors in action

With the template wired up for dynamic text, images, and colors, you can now pass different data per studio when sending an email to render their own branding:

  "company": {
    "name": "SSENSE STUDIOS, Inc.",
    "logoUrl": "https://assets.usewaypoint.com/logo-ssense.png",
    "brand": {
      "backdropColor": "#FFFFFF",
      "canvasColor": "#F8F8F8",
      "textColor": "#000000",
      "accentColor": "#000000"
    }
  }
  [...]