Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Get Settings from the Embedded Service Code Snippet

Get settings for use with your Embedded Service Aura components. You can get the Chat button ID or deployment ID assigned to your Embedded Service deployment and the agent and chatbot avatar image URLs.

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

Use the Aura method getLiveAgentSettings() to grab the settings that you want to use: liveAgentButtonId, liveAgentDeploymentId, chatbotAvatarImgURL, avatarImgURL.

This example shows you how to use the lightningsnapin:settingsAPI component with a custom pre-chat component. The pre-chat component uses different fields and a CSS class when a specific Chat button is used with the chat window.

This example isn’t of a complete pre-chat component. We’ve marked where the rest of your code should go in the code comments.

Important

Before you start, make sure that you have an Embedded Service deployment already set up. You should also have a working Embedded Service Aura component before you make any changes based on the Embedded Service deployment settings.

To get started, go to the Developer Console and open one of your Embedded Service Aura components.

Add a line in your component markup file to create the settings API component.

1<!-- Your pre-chat component's markup file -->
2<aura:component implements="lightningsnapin:prechatUI">
3
4    <!-- Contains a method for fetching Chat settings -->
5    <lightningsnapin:settingsAPI aura:id="settingsAPI"/>
6
7    <!-- The rest of your custom pre-chat component goes here -->
8</aura:component>

In your init handler, use the Aura method getLiveAgentSettings() to grab the settings you want.

This example customizes the First Name and Last Name fields when a certain Chat button is used by the current chat window by:

Pre-populating the visitor's name as "Anonymous Visitor"
Making the fields read-only
Adding a CSS class called anonymousField

1// Your pre-chat component’s controller file
2({
3    // Your pre-chat component's init handler
4    onInit: function(cmp, evt, hlp) {
5        // The ID of the Chat button for which you want to customize your pre-chat fields
6        var ANONYMOUS_BUTTON_ID = "(your button id here)";
7
8        // Fetch the ID of the Chat button currently in use
9        var buttonId = cmp.find("settingsAPI").getLiveAgentSettings().liveAgentButtonId;
10
11        // Get your pre-chat fields. This example assumes that your pre-chat form includes First Name and Last Name fields.
12        var prechatFields = cmp.find("prechatAPI").getPrechatFields();
13        var prechatFieldComponents = prechatFields.map(function(field) {
14            // If the specified button is currently in use, customize the First Name and Last Name fields
15            if (buttonId === ANONYMOUS_BUTTON_ID) {
16                if (field.label === "First Name") {
17                    // Pre-populate the value, make the field read-only, and add a CSS class
18                    field.value = "Anonymous";
19                    field.readOnly = true;
20                    field.className += " anonymousField";
21                } else if (field.label === "Last Name") {
22                    field.value = "Visitor";
23                    field.readOnly = true;
24                    field.className += " anonymousField";
25                }
26            }
27
28            return [
29                "ui:inputText",
30                {
31                    "aura:id": "prechatField",
32                    required: field.required,
33                    label: field.label,
34                    disabled: field.readOnly,
35                    maxlength: field.maxLength,
36                    class: field.className,
37                    value: field.value
38                }
39            ];
40        });
41
42        $A.createComponents(prechatFieldComponents, function(components, status) {
43            if (status === "SUCCESS") {
44                cmp.set("v.prechatFieldComponents", components);
45            }
46        });
47    },
48
49    // The rest of your component's controller goes here
50})

In your component CSS file, add a CSS rule for our new anonymousField CSS class.

1/* Your pre-chat component's CSS file */
2
3.THIS .anonymousField {
4    background-color: rgba(255,0,0,0.3);
5}
6
7/* The rest of your component's CSS goes here */

Save your component.

Embedded Service Chat for Web Developer Guide

Get Settings from the Embedded Service Code Snippet

See Also