Populate Pre-Chat Form Fields in Messaging for Web

When customers start a messaging conversation, you sometimes already know basic information such as their name, email address, and what product they're looking at. You set up a pre-chat form in the UI with visible fields such as name, email address, and product name. Then you use the prechatAPI object to populate the pre-chat fields with this information, so it appears when the user first opens the pre-chat form. With the API, you can also configure a field to be editable or not by the user and remove populated values again.

If you use your messaging conversation windows in Experience Cloud sites, you can enable contact fields to fill in automatically by editing the pre-chat fields in Embedded Service Deployments in Setup. See Customize Pre-Chat for Messaging for In-App and Web in Salesforce Help.

Before you use the API, add the visible fields to the pre-chat form. See Customize Pre-Chat for Messaging for In-App and Web in Salesforce Help. Here are the steps to configure your web client to populate pre-chat fields with data.

1. Download the Salesforce-provided code snippet from your Embedded Service Deployments in Setup as described in Get Started with Messaging for Web. You need the snippet, because you modify its code in later steps.
2. Add an event listener for onEmbeddedMessagingReady. This method notifies you when the API is ready for requests.
3. After the onEmbeddedMessagingReady event dispatches, populate the pre-chat fields by using setVisiblePrechatFields and remove the values by using unsetVisiblePrechatFields.
   • Use the channel variable name of your custom or standard pre-chat fields for the pre-chat field names. From Setup, in the Quick Find box, enter Messaging Settings, and then select Messaging Settings. Click the name of your messaging channel. The channel variable names are listed in the Parameter Mappings section.
   • Standard pre-chat fields start with an underscore. They are _firstName, _lastName, _email, and _subject.
   • For more information on editing pre-chat fields, see Customize Pre-Chat for Messaging for In-App and Web in Salesforce Help.

This sample code shows you how to add values to pre-chat fields by using setVisiblePrechatFields.

This sample code shows you how to remove values from pre-chat fields by using unsetVisiblePrechatFields. Use the channel variable name as the pre-chat field name here as well.

The Messaging for Web reference documentation describes these methods in detail.