Auto-Populate Pre-Chat in Salesforce Messaging for In-App and Web

Auto-Populate Pre-Chat in Salesforce Messaging for In-App and Web

To Auto-Populate Pre-Chat in Salesforce Messaging for In-App and Web, we can make use of Lightning Web Component. 

Pre-Chat Form in the Embedded Service Deployment for Messaging for In-App and Web, should be overridden with the Lightning Web Component.

Lightning Web Component:

Child Component:

HTML:

<template>
    <template lwc:if={isTypeChoiceList}>
        <lightning-combobox 
            key={fieldInfo.name}
            label={fieldInfo.labels.display}
            options={choiceListOptions}
            value={choiceListDefaultValue}
            required={fieldInfo.required}>
        </lightning-combobox>
    </template>
    <template lwc:else>
        <lightning-input 
            key={fieldInfo.name}
            type={type}
            label={fieldInfo.labels.display}
            max-length={fieldInfo.maxLength}
            required={fieldInfo.required}
            value={fieldInfo.value}>
        </lightning-input>
    </template>
</template>

JavaScript:

import { api, LightningElement } from "lwc";

export default class CustomPreChatFormField extends LightningElement {

    choiceListDefaultValue;

    @api fieldInfo = {};

    @api
    get name() {
        return this.fieldInfo.name;
    }

    @api
    get value() {
        const lightningCmp = 
            this.isTypeChoiceList ? 
            this.template.querySelector( "lightning-combobox" ): 
            this.template.querySelector( "lightning-input" );
        return this.isTypeCheckbox ? 
            lightningCmp.checked : 
            lightningCmp.value;
    }

    @api
    reportValidity() {
        const lightningCmp 
            = this.isTypeChoiceList ? 
                this.template.querySelector("lightning-combobox") : 
                this.template.querySelector("lightning-input");
        return lightningCmp.reportValidity();
    }

    get type() {
        switch (this.fieldInfo.type) {
            case "Phone":
                return "tel";
            case "Text":
            case "Email":
            case "Number":
            case "Checkbox":
            case "ChoiceList":
                return this.fieldInfo.type.toLowerCase();
            default:
                return "text";
        }
    }

    get isTypeCheckbox() {
        return this.type === "Checkbox".toLowerCase();
    }

    get isTypeChoiceList() {
        return this.type === "ChoiceList".toLowerCase();
    }

    get choiceListOptions() {

        let choiceListOptions = [];
        const choiceListValues = [ ...this.fieldInfo.choiceListValues ];
        choiceListValues.sort(
            (valueA, valueB) => valueA.order - valueB.order
        );

        for ( const listValue of choiceListValues ) {

            if ( listValue.isDefaultValue ) {

                this.choiceListDefaultValue = 
                    listValue.choiceListValueName;

            }

            choiceListOptions.push(
                { 
                    label: listValue.label, 
                    value: listValue.choiceListValueName 
                }
            );

        }

        console.log(
            'choiceListDefaultValue is',
            this.choiceListDefaultValue
        );

        if ( !this.choiceListDefaultValue ) {

            console.log(
                'Default value is set since isDefaultValue is not set'
            );
            this.choiceListDefaultValue = 'High';

        }

        return choiceListOptions;

    }
}

js-meta.xml:

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

Parent Component:

HTML:

<template>
    <template 
        class="slds-m-around_medium" 
        for:each={fields} 
        for:item="field">
        <c-custom-pre-chat-form-field 
            key={field.name}
            field-info={field}>
        </c-custom-pre-chat-form-field>
    </template>
    <lightning-button 
        label="Start Chat"
        title={startConversationLabel}
        onclick={onStartConversationClick}
        class="slds-m-left_x-small">
    </lightning-button>
</template>

JavaScript:

import { api, LightningElement } from "lwc";

export default class CustomPreChatForm extends LightningElement {

    @api configuration = {};

    get prechatForm() {

        const forms = this.configuration.forms || [];
        return forms.find(
            form => form.formType === "PreChat"
        ) || {};

    }

    get prechatFormFields() {

        return this.prechatForm.formFields || [];

    }

    get fields() {

        let fields = JSON.parse(
            JSON.stringify(
                this.prechatFormFields
            )
        );
        this.handleFields(
            fields
        );
        return fields.sort(
            ( fieldA, fieldB ) => fieldA.order - fieldB.order
        );

    }

    handleFields( fields ) {

        for ( let field of fields ) {

            if ( field.name === "_firstName" ) {

                field.value = "Test 1";

            } else if ( field.name === "_lastName" ) {

                field.value = "Test 2";

            } else if ( field.name === "_email" ) {

                field.value = "[email protected]";

            } else if ( field.name === "_subject" ) {

                field.value = "Testing";

            }

            if ( field.type === "ChoiceList" ) {

                const valueList = 
                    this.configuration.choiceListConfig.choiceList.find(
                        list => list.choiceListId === field.choiceListId
                    ) || {};
                field.choiceListValues = valueList.choiceListValues || [];

            }

        }

    }

    isValid() {

        let isFormValid = true;
        this.template.querySelectorAll(
            "c-custom-pre-chat-form-field"
        ).forEach( formField => {
            if ( !formField.reportValidity() ) {
                isFormValid = false;
            }
        } );
        return isFormValid;

    }

    onStartConversationClick() {

        const prechatData = {};

        if ( this.isValid() ) {

            this.template.querySelectorAll(
                "c-custom-pre-chat-form-field"
            ).forEach( formField => {
                prechatData[ formField.name ] = String(
                    formField.value
                );
            });

            this.dispatchEvent(
                new CustomEvent(
                    "prechatsubmit",
                    {
                        detail: { value: prechatData }
                    }
                )
            );

        }

    }

}

CSS:

:host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    background: #FFFFFF;
    padding: 2em;
}

lightning-button {
    padding-top: 2em;
    text-align: center;
}

js-meta.xml:

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

Embedded Service Deployment Pre-Chat Configuration:

Output:

Leave a Reply