Customize the default theme

This section describes how to customize your branding by overriding the default theme provided by Cliam.

It's useful when you don't compile your template yourself, and don't have templates defined at the web API provider side.

ℹ️ Default templates are limited to the default transactions available.

In the .cliamrc.js file, fill in the placeholder property. Each of these fields is required when you're using default templates.

  "placeholders": {
    "company": {
      "name": "My Company",
      "url": "https://www.my-website.com",
      "location": {
        "street": "Baker street",
        "num": "221B",
        "zip": "NW1 6XE",
        "city": "Marylebone",
        "country": "United Kingdom"
      },
      "email": "contact@john-doe.com",
      "phone": "+44 20 7224 3688",
      "socials": [
        {
          "name": "github",
          "url": "https://github.com/steve-lebleu/cliam"
        }
      ]
    },
    "theme": {
      "logo": "https://cdn.konfer.be/images/cliam/assets/logo-cliam.png",
      "primaryColor": "5bd1d7",
      "secondaryColor": "348498",
      "tertiaryColor": "004d61",
      "quaternaryColor": "ff502f"
    }
  },

That's all ! Now to use the default templates, when you do a mail request you just need to provide a data property without any template defined on your transporter.

import { Cliam } from 'cliam';

const payload = {
  meta: { ... },
  data: { 
    message: String,
    cta: {
      label: String,
      link: String
    } 
  }
};
  
Cliam.mail('my.event', data)
  .then(res => {
    console.log('Email has been delivered: ', res);
  })
  .catch(err => {
    console.log('Error while mail sending: ', err)
  }

Indeed, when you don't provides templates in cliamrc.js, and you don't pass any content, the system fallback on default templates and try to compile them on the fly.

👉 See default transactions for more information about what's available in basic setup.