Customize the Minimized Snap-In UI with Lightning Components

Customize the user interface for the snap-in when it’s minimized on your web page using a custom Lightning component.

Before you start, make sure that you have a Snap-ins 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 Snap-ins 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 Snap-ins Setup.
Make sure to add a maximize container action so your customers can open the snap-in. 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 Snap-ins Setup.

After you save your component, go to Snap-ins Setup and navigate to your chat settings. Your component should be available to select as a custom component for the minimized snap-in.

Snap-Ins for Web Developer Guide

Customize the Minimized Snap-In UI with Lightning Components

See Also