Pass value from the prechat form to a custom field on the LiveChatTranscript object when using lightningsnapin:prechatAPI

The following steps describe how to capture a dynamic value from a custom prechat component and save it to a custom LiveChatTranscript field.

Step 1: Create a Custom Field on the Transcript Object

Create a custom field on the LiveChatTranscript object to store the prechat value. For example, create a text field named PrechatText__c.

Step 2: Configure extraPrechatFormDetails Without a Value

In the container page where the Snap-in is hosted (not inside the custom prechat component), configure extraPrechatFormDetails by mapping the label to the custom transcript field, but without setting the value property. This reserves the field mapping for the value that will be passed via the custom event:

embedded_svc.settings.extraPrechatFormDetails = [{"label":"Text", "transcriptFields": ["PrechatText__c"]}];

Step 3: Fire a Custom Event from the Prechat Component

In your custom prechat component's startChat function, instead of calling startChat directly, fire a CustomEvent named setCustomField. The event detail should include the startChat callback and the custom field value:
In the custom prechat component's startChat function: validate the prechat fields, then create a CustomEvent named "setCustomField" with a detail containing two properties — "callback" (set to the startChat function bound to the current fields) and "customField" (set to the value you want to store in the transcript). Dispatch the event on the document object. If validation fails, log a warning.
 

if(cmp.find("prechatAPI").validateFields(fields).valid) {
    var event = new CustomEvent(
        "setCustomField",
        {
            detail: {
                callback: cmp.find("prechatAPI").startChat.bind(this, fields),
                customField: "value"
            }
        }
    );
    // Dispatch the event.
    document.dispatchEvent(event);
} else {
    console.warn("Prechat fields did not pass validation!");
}

Step 4: Listen for the Event in the Container Page

In the container page, add an event listener for the setCustomField event. When the event is received, update extraPrechatFormDetails with the received value and call the startChat callback:
In the container page: add a document event listener for "setCustomField". When triggered, set embedded_svc.settings.extraPrechatFormDetails[0].value to the value from event.detail.customField, then call event.detail.callback() to initiate the chat.

 

document.addEventListener(
	"setCustomField",
	function(event) {
		embedded_svc.settings.extraPrechatFormDetails[0].value = event.detail.customField;
		// Fire startChat callback.
		event.detail.callback();
	},
	false
);