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.
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.
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.
<!-- Your pre-chat component's markup file --> <aura:component implements="lightningsnapin:prechatUI"> <!-- Contains a method for fetching Chat settings --> <lightningsnapin:settingsAPI aura:id="settingsAPI"/> <!-- The rest of your custom pre-chat component goes here --> </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
// Your pre-chat component’s controller file ({ // Your pre-chat component's init handler onInit: function(cmp, evt, hlp) { // The ID of the Chat button for which you want to customize your pre-chat fields var ANONYMOUS_BUTTON_ID = "(your button id here)"; // Fetch the ID of the Chat button currently in use var buttonId = cmp.find("settingsAPI").getLiveAgentSettings().liveAgentButtonId; // Get your pre-chat fields. This example assumes that your pre-chat form includes First Name and Last Name fields. var prechatFields = cmp.find("prechatAPI").getPrechatFields(); var prechatFieldComponents = prechatFields.map(function(field) { // If the specified button is currently in use, customize the First Name and Last Name fields if (buttonId === ANONYMOUS_BUTTON_ID) { if (field.label === "First Name") { // Pre-populate the value, make the field read-only, and add a CSS class field.value = "Anonymous"; field.readOnly = true; field.className += " anonymousField"; } else if (field.label === "Last Name") { field.value = "Visitor"; field.readOnly = true; field.className += " anonymousField"; } } return [ "ui:inputText", { "aura:id": "prechatField", required: field.required, label: field.label, disabled: field.readOnly, maxlength: field.maxLength, class: field.className, value: field.value } ]; }); $A.createComponents(prechatFieldComponents, function(components, status) { if (status === "SUCCESS") { cmp.set("v.prechatFieldComponents", components); } }); }, // The rest of your component's controller goes here })
-
In your component CSS file, add a CSS rule for our new
anonymousField CSS class.
/* Your pre-chat component's CSS file */ .THIS .anonymousField { background-color: rgba(255,0,0,0.3); } /* The rest of your component's CSS goes here */
- Save your component.