Custom Minimized Component Code Samples

The following code sample contains examples of the component, controller, and helper code for a custom minimized embedded component using Aura.

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

This component:

Uses Aura to create an ui:button component, and binds the button click to maximize the embedded component
Uses an initialize function that registers the generic event handler for minimized events that updates the message depending on the event name
Includes optional CSS styling

Component Code

1<aura:component implements="lightningsnapin:minimizedUI" description="Custom Minimized UI">
2    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
3    <aura:attribute name="message" type="String" default="Chat with us!"/>
4    
5	<!-- For registering our minimized event handler and maximizing -->
6	<lightningsnapin:minimizedAPI aura:id="minimizedAPI"/>
7
8	<button class="minimizedContainer"
9		onclick="{!c.handleMaximize}"
10		aura:id="minimizedContainer">
11        <div class="messageContent">
12            {!v.message}
13        </div>
14	</button>    
15</aura:component>

Controller Code

1({
2	onInit: function(cmp, evt, hlp) {
3        // Register the generic event handler for all the minimized events
4        cmp.find("minimizedAPI").registerEventHandler( hlp.minimizedEventHandler.bind(hlp, cmp));
5	},
6    
7    handleMaximize: function(cmp, evt, hlp) {
8        cmp.find("minimizedAPI").maximize();
9    }
10})

Helper Code

1({
2	minimizedEventHandler: function(cmp, eventName, eventData) {
3        switch(eventName) {
4			case "prechatState":
5				this.onPrechatState(cmp, eventData);
6				break;
7			case "offlineSupportState":
8				this.onOfflineSupportState(cmp, eventData);
9				break;
10			case "waitingState":
11				this.onWaitingState(cmp, eventData);
12				break;
13			case "queueUpdate":
14				this.onQueueUpdate(cmp, eventData);
15				break;
16			case "waitingEndedState":
17				this.onWaitingEndedState(cmp, eventData);
18				break;
19			case "chatState":
20				this.onChatState(cmp, eventData);
21				break;
22			case "chatTimeoutUpdate":
23				this.onChatTimeoutUpdate(cmp, eventData);
24				break;
25			case "chatUnreadMessage":
26				this.onChatUnreadMessage(cmp, eventData);
27				break;
28			case "chatTransferringState":
29				this.onChatTransferringState(cmp, eventData);
30				break;
31			case "chatEndedState":
32				this.onChatEndedState(cmp, eventData);
33				break;
34			case "reconnectingState":
35				this.onReconnectingState(cmp, eventData);
36				break;
37			case "postchatState":
38				this.onPostchatState(cmp, eventData);
39				break;
40			default:
41				throw new Error("Received unexpected minimized event '" + eventName + "'.");
42		}
43	},
44
45	/**
46	 * "prechatState" event handler. This fires when pre-chat state is initialized.
47	 *
48	 * @param {Aura.Component} cmp - This component.
49	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
50	 */
51	onPrechatState: function(cmp, eventData) {
52		this.setMinimizedContent(cmp, eventData.label);
53	},
54
55	/**
56	 * "offlineSupportState" event handler. This fires when offline support state is initialized.
57	 *
58	 * @param {Aura.Component} cmp - This component.
59	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
60	 */
61	onOfflineSupportState: function(cmp, eventData) {
62		this.setMinimizedContent(cmp, eventData.label);
63	},
64
65	/**
66	 * "waitingState" and "queueUpdate" are fired when EITHER
67	 * 1) waiting state is initialized, either with a new session or via page navigation or refresh, OR
68	 * 2) the visitor was previously in reconnecting, and they've regained connection.
69	 *
70	 * Only one of "waitingState" and "queueUpdate" is ever fired - never both.
71	 * - "waitingState" is fired if EITHER queue position is DISABLED, OR snippet version under 5.0.
72	 * - "queueUpdate" is fired if queue position is ENABLED, AND snippet version is 5.0 or later.
73	 */
74
75	/**
76	 * "waitingState" event handler. See above doc.
77	 *
78	 * @param {Aura.Component} cmp - This component.
79	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
80	 */
81	onWaitingState: function(cmp, eventData) {
82		this.setMinimizedContent(cmp, eventData.label);
83	},
84
85	/**
86	 * "queueUpdate" event handler. See above doc.
87	 *
88	 * @param {Aura.Component} cmp - This component.
89	 * @param {Object} eventData - Event data. For this event, this contains label and queuePosition.
90	 */
91	onQueueUpdate: function(cmp, eventData) {
92		this.setMinimizedContent(cmp, eventData.label + " " + eventData.queuePosition);
93	},
94
95	/**
96	 * "waitingEndedState" event handler. This fires in waiting state when the chat request fails.
97	 *
98	 * @param {SampleCustomMinimizedUI.SampleCustomMinimizedUIComponent} cmp - This component.
99	 * @param {Object} eventData - Event data. For this event, this contains label and reason. We don't use reason though.
100	 */
101	onWaitingEndedState: function(cmp, eventData) {
102		this.setMinimizedContent(cmp, eventData.label);
103	},
104
105	/**
106	 * "chatState" event handler. This fires when EITHER
107	 * 1) chat state is initialized, either with a new session or via page navigation or refresh, OR
108	 * 2) the visitor was previously in chat transfer, and they've been connected to a new agent, OR
109	 * 3) the visitor was previously in reconnecting, and they've regained connection.
110	 *
111	 * @param {Aura.Component} cmp - This component.
112	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
113	 */
114	onChatState: function(cmp, eventData) {
115		this.setMinimizedContent(cmp, eventData.label);
116	},
117
118	/**
119	 * "chatTimeoutUpdate" event handler. This fires when the visitor idle timeout has started.
120	 *
121	 * @param {Aura.Component} cmp - This component.
122	 * @param {Object} eventData - Event data. For this event, this contains label and timeoutSecondsRemaining.
123	 */
124	onChatTimeoutUpdate: function(cmp, eventData) {
125		this.setMinimizedContent(cmp, eventData.label);
126	},
127
128	/**
129	 * "chatUnreadMessage" event handler. This fires when the agent sends a message but the visitor hasn't seen it
130	 * yet, either because they are scrolled up in the chat message area, or because the widget is minimized.
131	 *
132	 * @param {Aura.Component} cmp - This component.
133	 * @param {Object} eventData - Event data. For this event, this contains label and unreadMessageCount.
134	 */
135	onChatUnreadMessage: function(cmp, eventData) {
136		this.setMinimizedContent(cmp, eventData.label);
137	},
138
139	/**
140	 * "chatTransferringState" event handler. This fires when a chat transfer has been initiated.
141	 *
142	 * @param {Aura.Component} cmp - This component.
143	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
144	 */
145	onChatTransferringState: function(cmp, eventData) {
146		this.setMinimizedContent(cmp, eventData.label);
147	},
148
149	/**
150	 * "chatEndedState" event handler. This fires in chat state when the chat ends for any reason.
151	 *
152	 * @param {Aura.Component} cmp - This component.
153	 * @param {Object} eventData - Event data. For this event, this contains label and reason.
154	 */
155	onChatEndedState: function(cmp, eventData) {
156		this.setMinimizedContent(cmp, eventData.label);
157	},
158
159	/**
160	 * "reconnectingState" event handler. This fires in both waiting and chat state when the visitor loses connection.
161	 *
162	 * @param {Aura.Component} cmp - This component.
163	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
164	 */
165	onReconnectingState: function(cmp, eventData) {
166		this.setMinimizedContent(cmp, eventData.label);
167	},
168
169	/**
170	 * "postchatState" event handler. This fires when the visitor enters post chat by clicking "Give Feedback".
171	 *
172	 * @param {Aura.Component} cmp - This component.
173	 * @param {Object} eventData - The data associated with the event. Always contains a "label" property.
174	 */
175	onPostchatState: function(cmp, eventData) {
176		this.setMinimizedContent(cmp, eventData.label);
177	},
178
179	/**
180	 * Update the contents of the sample minimized component.
181	 *
182	 * @param {Aura.Component} cmp - This component.
183	 * @param {String} message - The text to display.
184	 */
185	setMinimizedContent: function(cmp, message) {
186		cmp.set("v.message", message);
187	}
188});

CSS Code

1.THIS {
2	position: fixed;
3	left: auto;
4	bottom: 0;
5	right: 12px;
6	margin: 0;
7 	min-width: 12em;
8	max-width: 14em;
9	height: 46px;
10	width: 192px;
11	max-height: 100%;
12	border-radius: 8px 8px 0 0;
13	text-align: center;
14	text-decoration: none;
15	display: flex;
16	flex-direction: center;
17justify-content: center;
18box-shadow: none;
19	pointer-events: all;
20	overflow: hidden;
21	background-color: rgb(0, 112, 210);
22	font-size: 16px;
23}
24
25.THIS.minimizedContainer:focus,
26.THIS.minimizedContainer:hover {
27color: rgb(255, 255, 255);
28text-decoration: underline;
29outline: none;
30background-color: rgb(0, 95, 178);
31box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
32}
33
34.THIS .messageContent {
35	display: block;
36	padding: 0 8px;
37	height: 100%;
38	color: rgb(255, 255, 255);
39}