Customize the Form

Customize the Form from the Dashboard
You can now customize the form from Cotter's Dashboard > Branding.
Customizing the Form from Cotter
Customizable Features that are not available in the Dashboard:
​Add custom fields​
​Advanced Styling​
Advanced Configuration Reference
You can use our advanced config to have more functionality:
Usage:
1
var cotter = new Cotter(config); // 👈 Put the config in here
2
​
3
  cotter
4
    .signInWithLink()
5
    .showEmailForm()
6
    .then(payload => {})
7
    .catch(err => {});
Copied!
Config:
Here's an example of a complete configuration:
1
var config = {
2
  // Required Basic Configuration
3
  ApiKeyID: "<your-API-KEY-ID>",
4
  Type: "PHONE", // EMAIL or PHONE
5
  ContainerID: "cotter-container-signup",
6
  RedirectURL: "https://yourwebsite.com/account/create",
7
  SkipRedirectURL: false,
8
  IdentifierField: "phone",
9
  OnSuccess: payload => {
10
    // SET Token Cookie/localstorage here
11
    window.localStorage.setItem("access_token", payload.access_token);
12
    window.localStorage.setItem("refresh_token", payload.refresh_token);
13
    window.location.href = "/signin";
14
  },
15
​
16
  // Change Country Code
17
  CountryCode: ["+62"], // IT HAS TO BE AN ARRAY
18
​
19
  // Styling
20
  ButtonBackgroundColor: "#000000",
21
  ButtonTextColor: "#ffffff",
22
  ButtonText: "Sign Up Now",
23
  ButtonBorderColor: "#D2D3FF", // don't specify for no border
24
​
25
  // Adding fields
26
  AdditionalFields: [
27
    {
28
      label: "Full Name",
29
      name: "name",
30
      placeholder: "Enter your full name"
31
    }
32
  ],
33
​
34
  // Intercepting before authentication is processed
35
  OnBegin: payload => {
36
    if (payload.identifier != "+12345678910") {
37
      return "Phone Number is not allowed";
38
    }
39
    return null;
40
  }
41
  
42
  // Add WhatsApp option to send verification code
43
  // (only for type = PHONE)
44
  // ################################################
45
  // # 👈Please read the section about WhatsApp 👈 #
46
  // #       to comply with WhatsApp's Policy       # 
47
  // ################################################
48
  PhoneChannels: ["SMS", "WHATSAPP"], // default = ["SMS"]
49
  
50
  // WhatsApp Button Styling
51
  ButtonWAText: "Continue with",
52
  ButtonWATextSubtitle:
53
    "Tell your customer that you'll be sending the verification code via WhatsApp",
54
  ButtonWABackgroundColor: "#128C7E",
55
  ButtonWABorderColor: "#075E54",
56
  ButtonWATextColor: "#ffffff",
57
  ButtonWALogoColor: "white",
58
};
Copied!
Description
Field Name
Description
Required
ApiKeyID
your API_KEY_ID
Y
​RedirectURL​
The backend URL where we will send a JSON obj containing form information and a token
Y
​SkipRedirectURL​
true or false . If set to true, then it will skip sending the JSON obj to the RedirectURL, and instead automatically pass it to OnSuccess.
​
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
​AdditionalFields​
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
​OnBegin​
A function that will be called before the signup process begin. Check the specs for OnBegin below
N
​OnSuccess​
A function that will be called when the signup process succeed. It's recommended to set your localStorage/cookies here and redirect to your dashboard. Check the specs for OnSuccess below
Y
​CountryCode​
An Array of country code options for the user
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
RedirectURL
Authentication Flow if you use RedirectURL
We will send a JSON Object to this backend URL. The JSON Object will have the following format:
1
{
2
  "token": {
3
    "identifier": "+12345678910",
4
    "identifier_type": "PHONE",
5
    "receiver": "<your API_KEY_ID>",
6
    "expire_at": "1582679175", // Unix timestamp
7
    "signature": "7en+KvbLpMkA7Z93K5y3a12tDo2x3n..." //Signature
8
  },
9
  [IdentifierField]: "+12345678910",
10
​
11
  // Additional Fields
12
  "field_1": "Value inside field 1",
13
  "field_2": "Value inside field 2",
14
  ...
15
}
Copied!
Description:
payload.Token
Contains the email or phone number of the user. You should verify the signature to ensure that the request comes from Cotter's server.
payload.IdentifierField
This field name will be the same as what you specify in the config above. For example, if your IdentifierField = "PHONE", you'll get
1
{
2
  ...
3
  "PHONE": "+12345678910",
4
}
Copied!
payload.AdditionalFields
The rest will be filled with any additional fields you specify in the config. For example if you add fields for "name" and "address", you'll get:
1
{
2
  ...
3
  "name": "Hello World",
4
  "address": "123 Street",
5
}
Copied!
Read how to specify Additional Fields Object below.
Skip RedirectURL
Authentication Flow if you use SkipRedirectURL
If you want to handle Cotter's token in a function instead of sending it to your backend redirect_url, you can specify
1
{
2
  ...
3
  SkipRedirectURL: true,
4
}
Copied!
When this is true, the JSON payload as specified in RedirectURL section will be passed into your OnSuccess function.
Additional Fields
The additional fields will be used to generate more <input> fields for your users. The format is as following:
1
var config = {
2
  ...
3
  AdditionalFields: [
4
          {
5
            label: "Full Name",
6
            name: "name",
7
            placeholder: "Enter your full name"
8
          },
9
          {
10
            label: "Address",
11
            name: "address",
12
            placeholder: "Enter your address"
13
          },
14
          {
15
            label: "Prefilled Info",
16
            name: "prefilled",
17
            type: "hidden", // type can be "hidden", "text" or "number"
18
            initial_value: "autofill value"
19
          }
20
        ],
21
}
Copied!
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:
1
{
2
  "token": {...},
3
  [IdentifierField]: "+12345678910",
4
​
5
  // Additional Fields
6
  "name": "Hello World",
7
  "address": "Street Address",
8
  "prefilled": "autofill value"
9
  ...
10
}
Copied!
​
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
1
var payload = {
2
  identifier: "+12345678910",
3
  identifier_type: "PHONE",
4
  device_type: "BROWSER",
5
  device_name: "Chrome ..."
6
};
Copied!
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:
1
return null;
Copied!
B. If you want to stop submission with an error:
1
return "Your error message";
Copied!
Example:
1
 OnBegin: payload => {
2
  if (payload.identifier != "+12345678910") {
3
    return "Phone Number is not allowed";
4
  }
5
  // No error, continue submission
6
  return null;
7
},
Copied!
OnSuccess
This function will be called after the call to RedirectURL is successful. Your function will receive the payload returned from RedirectURL.
It is recommended to set your sessions or cookies here, and then redirect to another page in your website. For example:
1
OnSuccess: payload => {
2
  // You can set your own sessions for your website
3
  window.localStorage.setItem("access_token", payload.access_token);
4
  window.localStorage.setItem("refresh_token", payload.refresh_token);
5
  window.location.href = "/dashboard";
6
};
Copied!
OnSuccess when SkipRedirectURL is true
When you set SkipRedirectURL: true , OnSuccess will instead receive the JSON Payload token that was described in RedirectURL section.
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
1
CountryCode: ["+1"];
Copied!
ex. with 2 country codes
1
CountryCode: ["+62", "+91"];
Copied!
Currently, the only available countries are United States, India and Indonesia. Chat us on Intercom if you need other countries, we just need to switch it on.

Older SDK

Last modified 1yr ago

Copy link

Contents

Customize the Form from the Dashboard

Advanced Configuration Reference