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 and checkbox.
• 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;