Styling

Styling from the Dashboard

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

Customize the design of your login form

Adding your own CSS

This is now available with signInWithOTPand signInWithLink

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