# Customize the Form ## Customize the Form from the Dashboard You can now customize the form from [Cotter's Dashboard](https://dev.cotter.app/) > Branding. ![Customizing the Form from Cotter](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-MCk6OpXdh2Sn08rIJCs%2F-MCk6p50lCyKYHP5NYNn%2Fimage.png?alt=media\&token=f731e1cb-8bc9-4824-ba6b-61e226e2e252) **Customizable Features that are not available in the Dashboard:** * [Add custom fields](#additional-fields) * [Advanced Styling](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/styling) ## Advanced Configuration Reference You can use our advanced config to have more functionality: #### Usage: ```javascript 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: ```javascript var config = { // Required Basic Configuration ApiKeyID: "", Type: "PHONE", // EMAIL or PHONE ContainerID: "cotter-container-signup", RedirectURL: "https://yourwebsite.com/account/create", SkipRedirectURL: false, IdentifierField: "phone", OnSuccess: payload => { // SET Token Cookie/localstorage here window.localStorage.setItem("access_token", payload.access_token); window.localStorage.setItem("refresh_token", payload.refresh_token); window.location.href = "/signin"; }, // 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 | | [RedirectURL](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#redirecturl) | The backend URL where we will send a [JSON obj](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#redirecturl) containing form information and a token | Y | | [SkipRedirectURL](#skip-redirecturl) | `true` or `false` . If set to `true`, then it will skip sending the [JSON obj](#redirecturl) to the RedirectURL, and instead automatically pass it to [`OnSuccess`](#onsuccess). | | | Type | `"EMAIL"` or `"PHONE"` | Y | | ContainerID | `id` of the `
` 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](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#additional-fields) | Additional fields that you want to include in the JSON obj. Check the specs for [Additional Fields Object](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#additional-fields) 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](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#onbegin) | A function that will be called before the signup process begin. Check the specs for [OnBegin](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#onbegin) below | N | | [OnSuccess](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#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](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#onsuccess) below | Y | | [CountryCode](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#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](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M5UVqS6V3zJS9KvtYcO%2F-M5UW0-ySdRevCZaWiTs%2Fimage.png?alt=media\&token=d06f345c-65bd-4a58-8511-c40965ed8e4d) We will send a JSON Object to this backend URL. The JSON Object will have the following format: ```javascript { "token": { "identifier": "+12345678910", "identifier_type": "PHONE", "receiver": "", "expire_at": "1582679175", // Unix timestamp "signature": "7en+KvbLpMkA7Z93K5y3a12tDo2x3n..." //Signature }, [IdentifierField]: "+12345678910", // Additional Fields "field_1": "Value inside field 1", "field_2": "Value inside field 2", ... } ``` Description: **payload.Token** Contains the email or phone number of the user. You should [verify the signature](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#verifying-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 ```javascript { ... "PHONE": "+12345678910", } ``` **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: ```javascript { ... "name": "Hello World", "address": "123 Street", } ``` Read how to specify [Additional Fields Object](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#additional-fields) below. ### Skip RedirectURL ![Authentication Flow if you use SkipRedirectURL](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-M4RUCQ08QeL-fGrAekC%2F-M4RUuBaXZjEyuAR32Np%2Fimage.png?alt=media\&token=423950b7-f007-41ea-b994-c30831df8490) If you want to handle Cotter's token in a function instead of sending it to your backend `redirect_url`, you can specify ```javascript { ... SkipRedirectURL: true, } ``` When this is true, the [JSON payload](#redirecturl) as specified in RedirectURL section will be passed into your [OnSuccess](#onsuccess) function. ### **Additional Fields** The additional fields will be used to generate more `` fields for your users. The format is as following: ```javascript 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](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone/..#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`:** ```javascript { "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** ```javascript 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:** ```javascript return null; ``` **B. If you want to stop submission with an error:** ```javascript return "Your error message"; ``` Example: ```javascript OnBegin: payload => { if (payload.identifier != "+12345678910") { return "Phone Number is not allowed"; } // No error, continue submission return null; }, ``` ### **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: ```javascript OnSuccess: payload => { // You can set your own sessions for your website window.localStorage.setItem("access_token", payload.access_token); window.localStorage.setItem("refresh_token", payload.refresh_token); window.location.href = "/dashboard"; }; ``` **OnSuccess when SkipRedirectURL is true** When you set `SkipRedirectURL: true` , `OnSuccess` will instead receive the JSON Payload token that was described in [RedirectURL section](#redirecturl). ### **CountryCode** The default value is `CountryCode: ["+1"];` {% hint style="warning" %} If you specify this, **you have to use an array** even though you only need 1 country code! {% endhint %} ex. with 1 country code ```javascript CountryCode: ["+1"]; ``` ex. with 2 country codes ```javascript CountryCode: ["+62", "+91"]; ``` {% hint style="info" %} 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. {% endhint %}