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.

  1. Create an LWC bundle. See Salesforce Trailhead: Build Lightning Web Components.

    Let's call our example bundle customPreChatForm.

  2. In the customPreChatForm.js-meta.xml configuration file of your LWC, specify the lightningSnapin__MessagingPreChat target.

    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.

  3. In the customPreChatForm.html file, iterate over the fields object to render the pre-chat fields in the UI.

    The fields object is configured in the customPreChatForm.js file. This HTML code creates a custom pre-chat component similar to the default one.

  4. In the customPreChatForm.js file, specify the dispatchEvent function.

    This function takes a CustomEvent object 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 prechatsubmit event 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 dispatch function looks like.

  5. In the customPreChatForm.css file, customize the UI style.

    The UI style in this code is similar to the default experience.

  6. Create another LWC bundle called customPreChatFormField to define the fields.

  7. In the customPreChatFormField.html file, specify how to render the fields in the UI.

    This example uses the lightning-combobox component to render choiceList (dropdown) fields and the lightning-input component to render other field types.

  8. In the customPreChatFormField.js file, define the fields, including dropdown fields.

  9. The customPreChatFormField LWC bundle requires a customPreChatFormField.js-meta.xml configuration file but without a target.

  10. Deploy the LWC to your org. See Salesforce Developer Guide: Introducing Lightning Web Components.

  11. Add the LWC to your Embedded Service Deployment. See Salesforce Help: Customize Your UI with Lightning Web Components. To get custom LWC configuration details, see Salesforce Developer Guide: Get Custom Lightning Web Components Configuration Details