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

Sending Code or Link via WhatsApp

Older SDK

Last modified 1yr ago

Copy link

Outline

Styling from the Dashboard

Adding your own CSS