At the heart of Waypoint's template builder is the use of data variables to apply the dynamic elements of a template. While these variables are most often used for dynamic text and images, they can also be used to set dynamic colors on a template or layout. This gives teams an easy way to programatically 'white-label' an email template with their customer's brand's colors.

From a template or layout builder, simply click on the {} icon next to a color within the global 'Styles' tab to set a color override based on a variable.

Example: {{brandColor}}.

If the variable is not set (or invalid), the color in the associated color picker will be used as the fallback.

Tutorial

Scenario

Let's pretend we are building a vertical SaaS platform that powers software for yoga studios. As part of this platform, we want to send emails on behalf of the studios (our customers) to their members. Since we are operating as a white-label platform, we want to pass branding assets and color data to email templates to provide an important brand touchpoint for the studios we work with.

Building the template

To get started, let's first build our base template (learn more about template building):

Adding test data

With our template in place, we can now setup test data to mock the data that we expect to be passed in from the API when sending an email.

Within the 'Data' tab in the template builder, we can pass in data specific to the associated studio's branding (in addition to all of the other template data):

Copy
  "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

With the data in place, we can now reference the data variables for our colors within the 'Style' tab. For example: {{company.brand.backdropColor}}

As variables are referenced, we can see a live preview of the template:

Dynamic colors in action

With our template now setup with dynamic text, images (logos), and colors, we can now pass in different data to the template while sending an email to render a different branding based on the associated studio:

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