Let’s discuss how to use lightningsnapin:minimizedUI interface in the when snap-in is minimized. This interface is used to indicate that a component can be used as the user interface for a minimized snap-in. This interface has no effect except when used within Snap-ins Chat hosted on a website, Visualforce page, or Community (using the Snap-ins Chat Community component). Without this interface, the component doesn’t appear as a minimized snap-in page option in Snap-ins Setup.
1. 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 . Enter a name and description for your component and click Submit. Here is the lightning component code
<aura:component implements="lightningsnapin:minimizedUI" description="Custom Minimized UI">
<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
<aura:attribute name="message" type="String" default="Chat with us!"/>
<!-- For registering our minimized event handler and maximizing -->
<lightningsnapin:minimizedAPI aura:id="minimizedAPI"/>
<button onclick="{!c.handleMaximize}" class="minimizedContainer">
{!v.message}
</button>
</aura:component>
controller.js
({
onInit: function(cmp, evt, hlp) {
// Register the generic event handler for all the minimized events
cmp.find("minimizedAPI").registerEventHandler( hlp.minimizedEventHandler.bind(hlp, cmp));
},
handleMaximize: function(cmp, evt, hlp) {
cmp.find("minimizedAPI").maximize();
}
})
helper.js
({
/**
* Function to handle maximizing the chat.Function to start a chat request (by accessing the chat API component)
*
* @param cmp - The component for this state
* @param eventName - The name of the event fired.
* @param eventData - The data associated with the event fired.
*/
minimizedEventHandler: function(cmp, eventName, eventData) {
switch(eventName) {
case "prechatState":
cmp.set("v.message", "Chat with an Expert!");
Break;
default:
cmp.set("v.message", eventData.label);
}
},
});
.THIS {
position: fixed;
left: auto;
bottom: 0;
right: 12px;
margin: 0;
min-width: 12em;
max-width: 14em;
height: 46px;
width: 192px;
max-height: 100%;
border-radius: 8px 8px 0 0;
text-align: center;
text-decoration: none;
display: flex;
flex-direction: center;
justify-content: center;
box-shadow: none;
pointer-events: all;
overflow: hidden;
background-color: rgb(0, 112, 210);
font-size: 16px;
}
.THIS.minimizedContainer:focus,
.THIS.minimizedContainer:hover {
color: rgb(255, 255, 255);
text-decoration: underline;
outline: none;
background-color: rgb(0, 95, 178);
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
}
.THIS .messageContent {
display: block;
padding: 0 8px;
height: 200%;
color: rgb(123, 123, 123);
}
1.The component implements the lightningsnapin:minimizedUI interface, which makes the component available to select as your minimized component from Snap-ins Setup.
<aura:component implements="lightningsnapin:minimizedUI">
2. The following code creates the minimized API component instance in your markup.
<lightningsnapin:minimizedAPI aura:id="minimizedAPI"/>
3. Add an initialize aura handler that action gets called when the component is initialized.
<aura:handler name="init" value="{!this}" action="{!c.onInit}" />
4. Make sure to add a maximize container action so your customers can open the snap-in. Here is the code from the component.
<button onclick="{!c.handleMaximize}">
{!v.message}
</button>
5. 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.
handleMaximize: function(cmp, evt, hlp) {
cmp.find("minimizedAPI").maximize();
},
2. Configure the component in snap-ins
Now go to your snap-ins deployment and include a component in custom component for the minimized snap-in as shown below.
3. Configure the Snap-ins in community
Now go and configure the snap-ins in your community. this example I am testing this snap-ins from the community. After configuring the snap-ins from your community you can able to the start the chat with the agent.
Now minimize the snap-in chat window from the community and you will be able to see the minimized window is works based on the component as shown below.
Beyond Cloud 