Customize the Minimized Embedded Service UI with Aura Components

Customize the user interface for the embedded component when it’s minimized on your web page using a custom Aura component.

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

Before you start, make sure that you have an Embedded Service deployment already set up. Next, go to the Developer Console and click File | New | Lightning Component. Enter a name and description for your component and click Submit.

Implement the minimized interface.
Change the opening aura component tag to:
1<aura:component implements="lightningsnapin:minimizedUI">
This code implements the lightningsnapin:minimizedUI interface, which makes the component available to select as your minimized component from Embedded Service Setup.
Create the minimized API component.
1<lightningsnapin:minimizedAPI aura:id="minimizedAPI"/>
This code provides an API that you can use to customize the user interface for the minimized component.
Add an initialize aura handler.
This action gets called when the component is initialized.
1<aura:handler name="init" value="{!this}" action="{!c.onInit}" />
Add your markup.
Create your buttons, images, validation, or whatever else you want to create. You have full control over the layout using the fields you specified in Embedded Service Setup.
Make sure to add a maximize container action so your customers can open the embedded component. We recommend you add the following as a click handler on a button, for example.
1<button onclick=”{!c.handleMaximize}”> 2 {!v.message} 3</button>

Add an initialize action in your component controller.

1/**
2 * On initialization of this component, register the generic event handler for all the minimized events..
3 * 
4 * @param cmp - The component for this state.
5 * @param evt - The Aura event.
6 * @param hlp - The helper for this state.
7 */
8onInit: function(cmp, evt, hlp) {
9   cmp.find(“minimizedAPI”).registerEventHandler(hlp.minimizedEventHandler.bind(hlp, cmp));
10},

Add a handler for maximizing chat from the minimized component.

Add a click handler to a button element. The customer uses this button to maximize chat.

1/**
2 * Function to handle maximizing the chat.
3 *
4 * @param cmp - The component for this state
5 * @param evt - The Aura event.
6 * @param hlp - The helper for this state.
7 */
8handleMaximize: function(cmp, evt, hlp) {
9    cmp.find(“minimizedAPI”).maximize();
10},

Add a minimized event generic handler to your helper.

1/**
2 * Function to handle maximizing the chat.Function to start a chat request (by accessing the chat API component)
3 *
4 * @param cmp - The component for this state
5 * @param eventName - The name of the event fired.
6 * @param eventData - The data associated with the event fired.
7 */
8minimizedEventHandler: function(cmp, eventName, eventData) {
9    switch(eventName) {
10        case “prechatState”:
11            cmp.set(“v.message”, “Chat with an Expert!”);
12            Break;
13        // Handle other events here!
14        default:
15            cmp.set(“v.message”, eventData.label);
16    }
17}

Save your component and select it from Embedded Service Setup.

After you save your component, go to Embedded Service Setup and navigate to your chat settings. Your component should be available to select as a custom component for the minimized embedded component.

Embedded Service Chat for Web Developer Guide

Customize the Minimized Embedded Service UI with Aura Components

See Also