Customize the Form
Customize the Form from the Dashboard
You can now customize the form from Cotter's Dashboard > Project > Design.

Customizable Features that are not available in the Dashboard:
Advanced Configuration Reference
You can use our advanced config to have more functionality:
Usage:
var cotter = new Cotter(config); // 👈 Put the config in here
cotter
.signInWithLink()
.showEmailForm()
.then(payload => {})
.catch(err => {});
Config:
Here's an example of a complete configuration:
var config = {
// Required Basic Configuration
ApiKeyID: "<your-API-KEY-ID>",
Type: "PHONE", // EMAIL or PHONE
ContainerID: "cotter-container-signup",
IdentifierField: "phone",
// Change Country Code
CountryCode: ["+62"], // IT HAS TO BE AN ARRAY
// Styling
ButtonBackgroundColor: "#000000",
ButtonTextColor: "#ffffff",
ButtonText: "Sign Up Now",
ButtonBorderColor: "#D2D3FF", // don't specify for no border
// Adding fields
AdditionalFields: [
{
label: "Full Name",
name: "name",
placeholder: "Enter your full name"
}
],
// Intercepting before authentication is processed
OnBegin: payload => {
if (payload.identifier != "+12345678910") {
return "Phone Number is not allowed";
}
return null;
},
// Add WhatsApp option to send verification code
// (only for type = PHONE)
// ################################################
// # 👈Please read the section about WhatsApp 👈 #
// # to comply with WhatsApp's Policy #
// ################################################
PhoneChannels: ["SMS", "WHATSAPP"], // default = ["SMS"]
// WhatsApp Button Styling
ButtonWAText: "Continue with",
ButtonWATextSubtitle:
"Tell your customer that you'll be sending the verification code via WhatsApp",
ButtonWABackgroundColor: "#128C7E",
ButtonWABorderColor: "#075E54",
ButtonWATextColor: "#ffffff",
ButtonWALogoColor: "white",
};
Description
Field Name
Description
Required
ApiKeyID
your API_KEY_ID
Y
Type
"EMAIL"
or "PHONE"
Y
ContainerID
id
of the <div>
where you want to serve Cotter Form.
Y
ButtonBackgroundColor
Button background color. Use HEX format (e.g. #000000
)
N
ButtonTextColor
Button text color. Use HEX format (e.g. #FFFFFF
)
N
ButtonText
Button text. Default is "Sign Up Without Password"
N
Additional fields that you want to include in the JSON obj. Check the specs for Additional Fields Object below
N
IdentifierField
Field name for the identifier to include in the JSON obj. For example, if you want to include the phone number in the JSON obj under key "phone"
, then fill in IdentifierField = "phone"
Y
A function that will be called before the signup process begin. Check the specs for OnBegin below
N
PhoneChannels
An Array of channels to send verification code to your users. Default value is ["SMS"].
Available values are SMS
and WHATSAPP.
For example, to allow both SMS and WhatsApp, specify ["SMS", "WHATSAPP"]
N
Additional Fields
The additional fields will be used to generate more <input>
fields for your users. The format is as following:
var config = {
...
AdditionalFields: [
{
label: "Full Name",
name: "name",
placeholder: "Enter your full name"
},
{
label: "Address",
name: "address",
placeholder: "Enter your address"
},
{
label: "Prefilled Info",
name: "prefilled",
type: "hidden", // type can be "hidden", "text" or "number"
initial_value: "autofill value"
}
],
}
Available types:
hidden
,text
,number
This will be sent to you to the RedirectURL endpoint above as part of the JSON object. For example, with the fields above, you'll get a JSON object like the following.
JSON Object to be sent to RedirectURL
:
{
"token": {...},
[IdentifierField]: "+12345678910",
// Additional Fields
"name": "Hello World",
"address": "Street Address",
"prefilled": "autofill value"
...
}
OnBegin
This function will be invoked before the Signup/Login process. You will receive the following payload as a parameter to your function
Payload passed into your OnBegin function
var payload = {
identifier: "+12345678910",
identifier_type: "PHONE",
device_type: "BROWSER",
device_name: "Chrome ..."
};
You can do a check against the identifier
here before the form is submitted.
If you include OnBegin
key, you have to either return an error string, or return null if you want to continue the authentication process:
A. If you want to continue submission:
return null;
B. If you want to stop submission with an error:
return "Your error message";
Example:
OnBegin: payload => {
if (payload.identifier != "+12345678910") {
return "Phone Number is not allowed";
}
// No error, continue submission
return null;
},
CountryCode
The default value is CountryCode: ["+1"];
If you specify this, you have to use an array even though you only need 1 country code!
ex. with 1 country code
CountryCode: ["+1"];
ex. with 2 country codes
CountryCode: ["+62", "+91"];
Our SMS and WhatsApp messaging works worldwide!
Last updated