Hide First & Last Name on Embedded Service Chat’s Prechat Form

December 3, 2021

Salesforce provides an embeddable chat component that can be placed on a web site or web app. This is provided by their “Embedded Service” feature within Service Cloud. It’s meant to allow a user to chat with a company’s support team. When one opens the chat with a Pre-Chat Form, the form asks for one’s First Name and Last Name and they’re required. This works great on a public site with anonymous users. However, if one adds this to an authenticated website or web app where the app knows the users identity, it’s not great because this requires the user to put in their info when the app already has it.

This post describes a way to work around that.

High-Level Solution

  • Hide the First & Last Name inputs using CSS.
  • Prepopulate the First & Last Name inputs using Javascript.

Hide First & Last Name Inputs

The First & Last Name input fields have CSS classes of embeddedServiceSidebarFormField AND inputSplitName which makes them easy CSS targets. Add this CSS to your implementation to hide the fields:

/* Hide the First and Last Name Fields that have both the classes */
.embeddedServiceSidebarFormField.inputSplitName {
    display: none !important;
}

Prepopulate the First & Last Name inputs using Javascript

While the inputs are hidden, they are still required and the form will not submit unless the inputs have values. The First Name and Last Name inputs can be pre-populated with this Javascript added to your chat Javascript:

embedded_svc.settings.prepopulatedPrechatFields = {
    FirstName: "<First_Name_Here>",
    LastName: "<Last_Name_Here>"
};

Without this Javascript, the fields would be hidden and the required validation messages wouldn’t show so there would be no feedback to the user to indicate something is missing which is unacceptable. Make sure the FirstName and LastName will have values.

Considerations

  • If Salesforce changes their CSS Classes on these fields, they may reappear in the Prechat Form and the CSS will need to be updated to re-hide them.
  • If Salesforce provides a supported way to hide these fields, use that instead!