Styling

Customize the design of your login form
This is now available with
signInWithOTP
and 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
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 2yr ago