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 snap-ins. Create a JavaScript file and upload it as a static resource that you reference in your Snap-ins Chat Community component settings.

Automated invitations are still unavailable in Communities snap-ins. You also 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 Snap-ins 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 snap-in.

Table 1. Available Settings
Setting Name	To Specify in Your File
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 Snap-ins Chat component settings in the Community 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.
If you don’t specify an agent avatar image in your Snap-ins Chat component settings or in your JavaScript file, but you include an image in Setup, 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 Snap-ins Chat component settings.

3. Reference Your File in Your Snap-Ins Chat Component Settings

In the Community Builder, enter the static resource name (not the file name) in the Snippet Settings File field. If you can’t access the Community 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

Updating Your Snippet Settings File

When you make changes to your JavaScript file, follow these steps to make sure that you don’t have to regenerate your Snap-ins code snippet or edit your Snap-ins 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.

Snap-Ins for Web Developer Guide