Customize Pre-Chat in Embedded Service Chat

Did you know you can customize the pre-chat form in the Embedded Service Chat? Well I certainly did not until I came across lightning:base-prechat base component, handy stuff I must say.

I recently had a use case where the customer wanted to hide the pre-chat form on the chat bot which seems very easy, however, in order to relate the chat transcript with the community user, we had to pre-fill the pre-chat form on the chat bot.

And here comes the magic of lightning:base-prechat base component.

This component allows you to override the pre-chat behavior and you can do a lot of stuff that you’d imagine a LWC component can do. You can have your own custom form and validations, nice looking graphics and with specific styling etc., possibilities are endless.

So the first thing you need in your JS controller is to import the module and create class class that extends it. Example:

import BasePrechat from 'lightningsnapin/basePrechat';export default class Prechat extends BasePrechat {}

The BasePrechat module has two methods:

• startChat() : Use this method to directly start the chat from the controller without having the User to interact with the UI. The method accepts an array of JSON objects that represents prechat fields.

• validateFields() : This method validates the array of fields before sending a chat request to the chat server. The method accepts an array of JSON objects that represents prechat fields.

Example of a component that validates prefilled chat fields and auto starts the chat accordingly:

import BasePrechat from 'lightningsnapin/basePrechat';export default class Prechat extends BasePrechat { @api prechatFields; //Variable that automatically stores the info related to prechat fields. /** * Method that runs when this prechat component is added to the DOM. */ connectedCallback() { this.autostartChat(); } /** * Method that checks if all the inputs are valid in prechat fields and autostarts the chat. */ autostartChat() { if (this.validateFields(this.prechatFields).valid) { this.startChat(this.prechatFields); } else { // Error handling if fields do not pass validation. } }}

Finally, to make your component visible in the Embedded Service Chat Setup, add lightningSnapin__PreChat as a target in the xml config.

<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>52.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightningSnapin__PreChat</target> </targets></LightningComponentBundle>

And you’re all set! 😀

Hope you find this one useful! Catch you in the next one! ✌ And thank you for being an awesome reader! Subscribe to this blog for receiving all the latest updates straight to your inbox. 🙂