Create a Custom Pre-Chat Form Using LWC
In Spring ’24 and earlier, Messaging for Web doesn't have Lightning Locker turned on, but we recommend you build Lightning Locker compatible code for custom-built Lightning Web Components (LWC).
By using a custom pre-chat component, you can customize the user interface for the pre-chat form. These steps show you how to create a custom pre-chat form using LWC. The pre-chat form we use in the example shows the pre-chat fields configured in Embedded Service Deployments in Setup. See Customize Pre-Chat for Messaging for In-App and Web.
Create an LWC bundle. See Salesforce Trailhead: Build Lightning Web Components.
Let's call our example bundle customPreChatForm.
In the customPreChatForm.js-meta.xml configuration file of your LWC, specify the
You add this target to the configuration file so you can see the LWC in your Messaging for Web experience. In other words, adding this target makes the LWC available for selection in Custom UI Components in Embedded Service Deployments in Setup. See Customize your UI with Lightning Web Components.
In the customPreChatForm.html file, iterate over the
fieldsobject to render the pre-chat fields in the UI.
fieldsobject is configured in the customPreChatForm.js file. This HTML code creates a custom pre-chat component similar to the default one.
In the customPreChatForm.js file, specify the
This function takes a
CustomEventobject with two fields. The first field is the event name
preChatSubmit, and the second one is a JSON payload with the form field values. The
prechatsubmitevent sends the pre-chat fields configured in Embedded Service Deployments in Setup to the chat request.
If you want to use the standard pre-chat fields, here's what the
dispatchfunction looks like.
In the customPreChatForm.css file, customize the UI style.
The UI style in this code is similar to the default experience.
Create another LWC bundle called customPreChatFormField to define the fields.
In the customPreChatFormField.html file, specify how to render the fields in the UI.
This example uses the
lightning-comboboxcomponent to render
choiceList(dropdown) fields and the
lightning-inputcomponent to render other field types.
In the customPreChatFormField.js file, define the fields, including dropdown fields.
The customPreChatFormField LWC bundle requires a customPreChatFormField.js-meta.xml configuration file but without a target.
Deploy the LWC to your org. See Salesforce Developer Guide: Introducing Lightning Web Components.
Add the LWC to your Embedded Service Deployment. See Salesforce Help: Customize Your UI with Lightning Web Components.