Create a Snippet Settings File for an Experience Site

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

The legacy chat product is in maintenance-only mode, and we won’t continue to build new features. You can continue to use it, but we no longer recommend that you implement new chat channels. Instead, you can modernize your customer communication with Messaging for In-App and Web. Messaging offers many of the chat features that you love plus asynchronous conversations that can be picked back up at any time.

Important

Automated chat invitations are available in Experience sites using static resources (see Chat Code Settings to Experience Sites).

Note

In this file, you can’t set pre-chat fields to fill in for logged-in users. 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 site’s chat window.

Setting Name	To Specify in Your File
Auto-open for 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 information	`embedded_svc.snippetSettingsFile.extraPrechatInfo = [];`
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.