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:
1
// You need to pass a `config` object instead of your `API_KEY_ID` to cotter:
2
​
3
// 1) Make a Config for adding Styles
4
var config = {
5
ApiKeyID: "<your-API-KEY-ID>",
6
Styles: {
7
input_label: {
8
fontFamily: "Roboto",
9
fontSize: 15,
10
color: "red",
11
fontWeight: 700,
12
},
13
input_text_container_default: {
14
backgroundColor: "#fce883",
15
padding: "20px 60px",
16
},
17
input_text: {
18
backgroundColor: "#fce883",
19
fontFamily: "Roboto",
20
fontSize: 20,
21
},
22
button_container: {
23
borderRadius: 0,
24
},
25
button_text: {
26
color: "aqua",
27
},
28
},
29
30
// your other config...
31
}
32
​
33
// 2) Then pass the config to Cotter
34
var cotter = new Cotter(config); // πŸ‘ˆ Put the config in here
35
cotter
36
.signInWithOTP()
37
.showEmailForm()
38
.then(payload => {})
39
.catch(err => {});
Copied!
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
Last modified 6mo ago