How to add Custom Fields for Registration

With Bread & Butter, you can set custom fields that your users are asked to enter after they register. For example, you may want to know their company name, phone number, company size, or industry.

After your users complete the login process, they’ll see something like the following:

• The header and sub header text is fully configurable.
• Set as many textbox fields, or checkbox fields as you want.
• Any textbox or checkbox can be flagged as mandatory – users can’t proceed until they enter it.
• Set whether a checkbox is checked by default or not.
• Checkbox display names can include links to external pages.

For example, if you want to add 2 text boxes, a mandatory checkbox, and have custom text, this is what you would add:

      locale : {
    	"CUSTOM_DATA": {
        	"HEADER": "Thanks for Signing Up",
        	"SUB_HEADER": "We just have a few questions we'd like to ask you",
        	"SUBMIT": "Submit",
        	"MANDATORY": "This field is mandatory."
    		}
	},
     custom_data: [{
    		custom_key: 'company_name',
   		display_name: 'Company Name',
    		type: 'textbox',
    		mandatory: false,
	},
	{
		custom_key: 'phone',
   		display_name: 'Phone Number',
    		type: 'textbox',
    		mandatory: true,
	},
	{
		custom_key: 'agree_toc',
    		display_name: 'I agree to the <a href="www.google.com" target="_blank">terms & conditions</a>',
    		type: 'checkbox',
    		mandatory: true,
    		default_value: true
	}
	]

For the display content in Locale:

• HEADER is the topmost content in the dialog, as seen in the screenshot above.
• SUB_HEADER is the content just below that.
• SUBMIT is the label on the Submit button.
• MANDATORY is the error message that displays under mandatory fields when the user doesn’t select them.

For the actual registration fields:

• custom_key is the what the value will be stored under in Bread & Butter. If you’re mapping to a CRM via an integration later, this is the key you’ll be mapping with. This must be unique.’
• display_name is what will be displayed in the dialog, as seen in the screenshot above.
• type is where you select whether it is a text box or a check box. Allowed values are ‘textbox’ or ‘checkbox’.
• mandatory is whether the field is required for the user to submit or not. Allowed values are true or false.
• default_value applies only to checkboxes. This lets you set whether the checkbox is auto selected or not. Allowed values are true for auto checked, false for not auto checked.

Once you’ve constructed the fields and display information you’d like to set (using the format in the example above), simply add the code to the initialization script, under the App ID.