Styling from the Dashboard

Generally, you can customize the form's texts and colors from Dashboard > Branding.

Adding your own CSS

To style the form, add field Styles to the configuration and specify the CSS styling for each element. The styling accepts a JavaScript object with camelCased properties rather than a CSS string, for example:

// You need to pass a `config` object instead of your `API_KEY_ID` to cotter:
​
// 1) Make a Config for adding Styles
var config = {
  ApiKeyID: "<your-API-KEY-ID>",
  Styles: {
    input_label: {
      fontFamily: "Roboto",
      fontSize: 15,
      color: "red",
      fontWeight: 700,
    },
    input_text_container_default: {
      backgroundColor: "#fce883",
      padding: "20px 60px",
    },
    input_text: {
      backgroundColor: "#fce883",
      fontFamily: "Roboto",
      fontSize: 20,
    },
    button_container: {
      borderRadius: 0,
    },
    button_text: {
      color: "aqua",
    },
  },
  
  // your other config...
}
​
// 2) Then pass the config to Cotter
var cotter = new Cotter(config); // 👈 Put the config in here
cotter
  .signInWithOTP()
  .showEmailForm()
  .then(payload => {})
  .catch(err => {});

You can find the element name by checking the class of the element you want to style. For reference, here are the elements that you can modify:

• form_container

• loadingImg

• input_label

• verification_label

• pin_row

• pin_input

• verification_subtitle

• error

• input_row_container

• input_row

• input_text_container_default

• input_text

• input_text_container

• country_code

• country_code_blank

• input_text_p

• check_input

Available Fonts

Not all fonts are available because the fonts are not loaded inside Cotter's form. These are the list of fonts that you can use:

• Roboto

• Lato

• Overpass

• Open Sans

• Akkurat

• Akkurat-Bold

• Poppins

• Inter