Get Settings from the Snap-Ins Code Snippet

Get settings for use with your Snap-ins Lightning components. You can get the Live Agent button ID or deployment ID assigned to your Snap-ins deployment and the agent and chatbot avatar image URLs.

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 Live Agent button is used with the snap-in.

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 a Snap-ins deployment already set up. You should also have a working Snap-ins Lightning component before you make any changes based on the Snap-ins deployment settings.

To get started, go to the Developer Console and open one of your Snap-ins Lightning 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 Live Agent 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 Live Agent button is used by the current snap-in 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 Live Agent 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 Live Agent 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.

Snap-Ins for Web Developer Guide

Get Settings from the Snap-Ins Code Snippet

See Also