Embedded Service Chat component in community - using "Snippet Settings File" javascript to override pre-chat file is not working

Question

I am using chat (what was called live agent) and I am using the client side inside a Salesforce community - As explained here.

I am doing that with the Embedded Service Chat component in the community builder

Now, for the pre-chat fields I want to override the standard behavior by using a javascript file in a static resource - exactly as explained here

This javascript file is supposed to override the pre-chat parameters defined in the Embedded Service Deployment Settings

PROBLEM

no matter what I am doing - it is not working, the override is not working and the Embedded Service Deployment Settings is what I see in the pre-chat window.

REPRODUCE

1. Create javascript file:

window._snapinsSnippetSettingsFile = (function() {
    console.log("Snippet settings file loaded.");   // Logs that the snippet settings file was loaded successfully


embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [{"label":"FirstName","value":"John","displayToAgent":true},
{"label":"LastName","value":"Doe","displayToAgent":true},
{"label":"Email","value":"[email protected]","displayToAgent":true}];

embedded_svc.snippetSettingsFile.extraPrechatInfo = [{
"entityName": "Contact",
"showOnCreate": true,
"linkToEntityName": "Case",
"linkToEntityField": "ContactId",
"saveToTranscript": "ContactId",
"entityFieldMaps" : [{
"doCreate":true,
"doFind":true,
"fieldName":"FirstName",
"isExactMatch":true,
"label":"First Name"
}, {
"doCreate":true,
"doFind":true,
"fieldName":"LastName",
"isExactMatch":true,
"label":"Last Name"
}, {
"doCreate":true,
"doFind":true,
"fieldName":"Email",
"isExactMatch":true,
"label":"Email"
}],
}, {
"entityName":"Case",
"showOnCreate": true,
"saveToTranscript": "CaseId",
"entityFieldMaps": [{
"isExactMatch": false,
"fieldName": "Subject",
"doCreate": true,
"doFind": false,
"label": "Issue"
}, {
"isExactMatch": false,
"fieldName": "Status",
"doCreate": true,
"doFind": false,
"label": "Status"
}, {
"isExactMatch": false,
"fieldName": "Origin",
"doCreate": true,
"doFind": false,
"label": "Origin"
}]
}];
})();

2. Save file

with preChat.js file name.

3. Upload file

upload the file as a static resource, name it chatEnhancedSettings, also set the static resource as public.

4. Use file in community

In the community builder, select the chat component to edit it's parameters, and in the Snippet Settings File field enter: chatEnhancedSettings.

5. Publish the community

Now for my it is not working.

QUESTIONS

Am I doing something wrong?

Maybe I am missing some steps to make it work?

Answer 1

Eventually I did succeed on the task to use this javascript override.

But I did it in a specific way - not as in my question

In this snippet I am disabling the creation of case and contact, and in a trigger on the chat transcript object I am creating them, with custom fields saved on the chat transcript object.

JavaScript snippet:

window._snapinsSnippetSettingsFile = (function() {

    // Logs that the snippet settings file was loaded successfully
    console.log("Snippet settings file loaded.");   

    // set all fields entered in the pre-chat widown into custom fields on the chat transcript object
    // fields without a value entered here - will get the value from the form itself
    embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [
        {
            "label": "First Name",
            "transcriptFields": ["Form_First_Name__c"],
            "displayToAgent":true
        },
        {
            "label": "Last Name",
            "transcriptFields": ["Form_Last_Name__c"],
            "displayToAgent":true
        },
        {
            "label": "Email",
            "transcriptFields": ["Form_Email__c"]
        },
        {
            "label": "Subject",
            "transcriptFields": ["Form_Subject__c"],
            "displayToAgent":true
        },
        {
            "label": "Product",
            "value": "myProduct",
            "transcriptFields": ["Form_Product__c"],
            "displayToAgent":true
        },
        {
            "label": "Origin",
            "value": "Chat",
            "transcriptFields": ["Form_Origin__c"]
        }
    ]; 

    // disable creation of a contact and a case:
    // this will be handled by the chat transcript trigger that will create a case that will create a contact
    embedded_svc.snippetSettingsFile.extraPrechatInfo = [{
        "entityName":"Contact",
        "entityFieldMaps": [{
            "doCreate":false,
            "doFind":false,
            "fieldName":"LastName",
            "isExactMatch":false,
            "label":"Last Name"
        }, 
        {
            "doCreate":false,
            "doFind":false,
            "fieldName":"FirstName",
            "isExactMatch":false,
            "label":"First Name"
        }, 
        {
            "doCreate":false,
            "doFind":false,
            "fieldName":"Email",
            "isExactMatch":false,
            "label":"Email"
        }]
    },
    {
        "entityName":"Case",
        "entityFieldMaps": [{
            "doCreate":false,
            "doFind":false,
            "fieldName":"Subject",
            "isExactMatch":false,
            "label":"Subject"
        }]
    }];
})();

Trigger - create case:

trigger ChatTranscript_Trigger on LiveChatTranscript (after delete, after insert, after undelete, after update, before delete, before insert, before update) {

    if (Trigger.isBefore && Trigger.isInsert) {       // Before Insert
        System.debug('\n\n\n\nChatTranscript_Trigger before insert\n\n\n\n');

        for (LiveChatTranscript newChat: Trigger.new) {
            // all entered fields in the pre-chat form should be copied here to the case
            Case newCase = new Case();
            newCase.SuppliedName = newChat.Form_First_Name__c;
            newCase.Web_LastName__c = newChat.Form_Last_Name__c;
            newCase.SuppliedEmail = newChat.Form_Email__c;
            newCase.Subject = newChat.Form_Subject__c;
            newCase.Product__c = newChat.Form_Product__c;
            newCase.Origin = newChat.Form_Origin__c;
            newCases.add(newCase);
        }
        insert newCases;
    }
    else if (Trigger.isBefore && Trigger.isUpdate) {  // Before Update
    }
    else if(Trigger.isBefore && Trigger.isDelete) {   // Before Delete
    }  
    else if (Trigger.isAfter && Trigger.isUnDelete) {  // After UnDelete
    }
    else if (Trigger.isAfter && Trigger.isUpdate) {    // After Update
    }
    else if (Trigger.isAfter && Trigger.isDelete) {    // After Delete
    }
    else if (Trigger.isAfter && Trigger.isInsert) {    // After Insert  
    }  

}

Answer 2

3. Upload file

   upload the file as a static resource, name it chatEnhancedSettings, also set the static resource as public.

4. Use file in community

   In the community builder, select the chat component to edit it's parameters, and in the Snippet Settings File field enter: chatEnhancedSettings

Based on what you've told us above and in reading the documentation, I believe your code should like the following:

window._snapinsSnippetSettingsFile = (function() {
    console.log("Snippet settings file chatEnhancedSettings loaded.");   // Logs that the snippet settings file named chatEnhancedSettings was loaded successfully


embedded_svc.chatEnhancedSettings.extraPrechatFormDetails = [{"label":"FirstName","value":"John","displayToAgent":true},
{"label":"LastName","value":"Doe","displayToAgent":true},
{"label":"Email","value":"[email protected]","displayToAgent":true}];

embedded_svc.chatEnhancedSettings.extraPrechatInfo = [{
"entityName": "Contact",
"showOnCreate": true,
"linkToEntityName": "Case",
"linkToEntityField": "ContactId",
"saveToTranscript": "ContactId",
"entityFieldMaps" : [{
"doCreate":true,
"doFind":true,
"fieldName":"FirstName",
"isExactMatch":true,
"label":"First Name"
}, {
"doCreate":true,
"doFind":true,
"fieldName":"LastName",
"isExactMatch":true,
"label":"Last Name"
}, {
"doCreate":true,
"doFind":true,
"fieldName":"Email",
"isExactMatch":true,
"label":"Email"
}],
}, {
"entityName":"Case",
"showOnCreate": true,
"saveToTranscript": "CaseId",
"entityFieldMaps": [{
"isExactMatch": false,
"fieldName": "Subject",
"doCreate": true,
"doFind": false,
"label": "Issue"
}, {
"isExactMatch": false,
"fieldName": "Status",
"doCreate": true,
"doFind": false,
"label": "Status"
}, {
"isExactMatch": false,
"fieldName": "Origin",
"doCreate": true,
"doFind": false,
"label": "Origin"
}]
}];

Also, I would expect that your default "John Doe" values should be empty or "" rather than pre-filled, but that might be a matter of preference. Example below for FirstName.

{"label":"FirstName","value":"","displayToAgent":true}