Create a Snippet Settings File to Use Snippet Settings in a Community

Take your snippet-only settings like extra pre-chat configuration and direct-to-button routing to your Communities chat window. Create a JavaScript file and upload it as a static resource that you reference in your Embedded Chat Community component settings.

Automated chat invitations are still unavailable in Communities. Also, you can’t set pre-chat fields to fill in for logged-in users in this file. Use the Fill-in pre-chat fields option in your Embedded Chat component settings.

Note

1. Create a Snippet Settings File Using JavaScript

In your JavaScript file, define the settings you want to use in your community’s chat window.

Table 1. Available Settings
Setting Name	To Specify in Your File
Auto-open post chat	`embedded_svc.snippetSettingsFile.autoOpenPostChat = true; // or false`
Avatar image URL	`embedded_svc.snippetSettingsFile.avatarImgURL = '';`
Chatbot (Einstein Bots) image URL	`embedded_svc.snippetSettingsFile.chatbotAvatarImgURL = '';`
Company logo image URL	`embedded_svc.snippetSettingsFile.smallCompanyLogoImgURL = '';`
Direct-to-button routing	`embedded_svc.snippetSettingsFile.directToButtonRouting = function(prechatFormData) {};`
External scripts	`embedded_svc.snippetSettingsFile.externalScripts = [];`
External styles	`embedded_svc.snippetSettingsFile.externalStyles = [];`
Extra pre-chat form details	`embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [];`
Extra pre-chat info	`embedded_svc.snippetSettingsFile.extraPrechatInfo = [];`
Header background image URL	`embedded_svc.snippetSettingsFile.headerBackgroundURL = '';`
Pre-chat background image URL	`embedded_svc.snippetSettingsFile.prechatBackgroundImgURL = '';`
Routing order	`embedded_svc.snippetSettingsFile.fallbackRouting = [];`
Waiting state background image URL	`embedded_svc.snippetSettingsFile.waitingStateBackgroundImgURL = '';`

Your settings are applied first from the Embedded Chat component settings in the Experience Builder, then from your JavaScript file, then from Setup. For example:

If you set an avatar image in your JavaScript file but leave the setting blank in Setup, the image you set in your JavaScript file displays.
Let’s say you include an agent avatar in Setup but don’t specify one in your Embedded Chat component settings or in your JavaScript file. Then the image you included in Setup displays.

Important

2. Upload Your File to Static Resources

Upload your file as a static resource in Setup. If you can’t access Setup, ask your Salesforce admin for help.

When you upload your file, make sure that you:

Select Public for the cache control.
Give it a name that’s easy to remember and type. You use the static resource name, not the file name, to reference the file from the Embedded Chat component settings.

3. Reference Your File in Your Embedded Chat Component Settings

In the Experience Builder, enter the static resource name (not the file name) in the Snippet Settings File field. If you can’t access the Experience Builder, ask your Salesforce admin for help.

For example, if your JavaScript file is called SnapInCodeSnippetSettings.js and you named it SnippetSettings in your static resources, enter SnippetSettings in the Snippet Settings File field.

Example of a Snippet Settings File

This example doesn’t use real URLs, file names, user IDs, button IDs, or email addresses. Enter your own information if you copy parts of this example for your own snippet settings file.

Note

1window._snapinsSnippetSettingsFile = (function() {
2console.log("Snippet settings file loaded.");	// Logs that the snippet settings file was loaded successfully
3
4embedded_svc.snippetSettingsFile.avatarImgURL = 'https://yourwebsite.here/avatar.jpg';
5embedded_svc.snippetSettingsFile.smallCompanyLogoImgURL = 'https://yourwebsite.here/company_logo.png';
6embedded_svc.snippetSettingsFile.prechatBackgroundImgURL = 'https://yourwebsite.here/prechat_background.jpg';
7embedded_svc.snippetSettingsFile.waitingStateBackgroundImgURL = 'https://yourwebsite.here/waiting_background.png';
8embedded_svc.snippetSettingsFile.headerBackgroundURL = 'https://yourwebsite.here/header_background.jpg';
9embedded_svc.snippetSettingsFile.chatbotAvatarImgURL = 'https://yourwebsite.here/bot_avatar.jpg';
10embedded_svc.snippetSettingsFile.autoOpenPostChat = true;
11
12embedded_svc.snippetSettingsFile.externalScripts = ['my_scripts'];
13embedded_svc.snippetSettingsFile.externalStyles = ['my_styles'];
14
15embedded_svc.snippetSettingsFile.directToButtonRouting = function(prechatFormData) {
16if(prechatFormData[1].value === "Computer") {
17console.log("direct to button routing initiated.");
18alert("Alert: direct to button routing initiated!");
19return "BUTTONIDHERE";
20}
21}
22
23embedded_svc.snippetSettingsFile.fallbackRouting = ['USERIDHERE', 'BUTTONIDHERE', 'USERID_BUTTONID'];
24
25
26embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [{"label":"FirstName","value":"John","displayToAgent":true},
27{"label":"LastName","value":"Doe","displayToAgent":true},
28{"label":"Email","value":"john.doe@salesforce.com","displayToAgent":true}];
29
30embedded_svc.snippetSettingsFile.extraPrechatInfo = [{
31"entityName": "Contact",
32"showOnCreate": true,
33"linkToEntityName": "Case",
34"linkToEntityField": "ContactId",
35"saveToTranscript": "ContactId",
36"entityFieldMaps" : [{
37"doCreate":true,
38"doFind":true,
39"fieldName":"FirstName",
40"isExactMatch":true,
41"label":"First Name"
42}, {
43"doCreate":true,
44"doFind":true,
45"fieldName":"LastName",
46"isExactMatch":true,
47"label":"Last Name"
48}, {
49"doCreate":true,
50"doFind":true,
51"fieldName":"Email",
52"isExactMatch":true,
53"label":"Email"
54}],
55}, {
56"entityName":"Case",
57"showOnCreate": true,
58"saveToTranscript": "CaseId",
59"entityFieldMaps": [{
60"isExactMatch": false,
61"fieldName": "Subject",
62"doCreate": true,
63"doFind": false,
64"label": "Issue"
65}, {
66"isExactMatch": false,
67"fieldName": "Status",
68"doCreate": true,
69"doFind": false,
70"label": "Status"
71}, {
72"isExactMatch": false,
73"fieldName": "Origin",
74"doCreate": true,
75"doFind": false,
76"label": "Origin"
77}]
78}];
79})();

Updating Your Snippet Settings File

When you change your JavaScript file, follow these steps. They help you to ensure that you don’t have to regenerate your Embedded Service code snippet or edit your Embedded Chat component settings.

Go to Static Resources in Setup.
Next to your static resource for your old JavaScript file, click Edit.
Upload your updated JavaScript file.
Click Save.

Your static resource name doesn’t change, so you don’t have to modify any additional settings.

Embedded Service for Web Developer Guide