Generally, you can customize the form's texts and colors from Dashboard > Branding.
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 Stylesvar 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 Cottervar cotter = new Cotter(config); // 👈 Put the config in herecotter.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