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.

Configuration

In the .cliamrc.js file...

1. Fill in the placeholder property. Each of these fields is required when you're using default templates.
2. Setup a transporter without defined 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"
    }
  },
  "transporters" : [
    {
      "id": "transporter-id",
      "provider": "mandrill"
      "auth": {
        "apiKey": "API_KEY"
      },
      "templates": null
    }
  ]
}

That's all about the configuration!

Usage

Now to use the default templates when you do a mail request, you just need to provide a data property which contains the variables to use in the template.

import { Cliam } from 'cliam';

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