# Pre-chat form
Make conversations easier for your support staff.
⛔ Legacy API
You are browsing legacy API. Current version you can find here.
# Default inputs
If you are using pre-chat form, you can customize the form fields. Default inputs are name
, email
. If you want to disable any of them, set property loginNameControl
or loginEmailControl
to false
.
Hide default input: name
_smartsupp.loginNameControl = false;
Hide default input: email
_smartsupp.loginEmailControl = false;
# Custom fields
You can add custom fields by setting property loginControls
. All filled values are sent to dashboard and displayed in Visitor info on the right side of chat panel.
- We support 3 field types:
textinput
,select
andcheckbox
. - Use attribute
required: true
to make the field mandatory for visitors. - Attribute
name
must be defined in every field and it can contain only lowercase and uppercase letters, no spaces allowed.
Attribute name
is not the visible Name input but a description of custom field in the code. It can be name: "phone"
or name: "group"
or name: "conditons"
as you will see in examples below.
# Pre-chat form default
You can turn this option on in Smartsupp Dashboard > Chat box > Options (opens new window) > Show pre-chat form
# Pre-chat form with textinput
This field can be used for example for entering phone number.
_smartsupp.loginControls = [
{
xtype: "textinput",
name: "phone",
label: "Phone number",
required: true
}
];
# Pre-chat form with select
You can use this customization if you have more groups (departments) like: Support, Marketing, Sales, etc.
_smartsupp.loginControls = [
{
xtype: "select",
name: "group",
label: "Department",
required: true,
// use group IDs from Smartsupp dashboard
value: "PJxWeH8LZNi", // set default group
items: {
"PJxWeH8LZNi": "Support",
"tuZOw6k9Oto": "Marketing",
"9OtIZKLaVep": "Sales"
}
}
];
# Pre-chat form with checkbox
This can be useful in case you need your visitors to confirm something before they start chat.
_smartsupp.loginControls = [
{
xtype: "checkbox",
name: "conditions",
label: "I have read the Terms and conditions.",
required: true
}
];
# Show or hide pre-chat form
You can show or hide the pre-chat form on certain pages by setting the property requireLogin
in your code.
_smartsupp.requireLogin = false;