Lightning Components for Snap-In Minimized UI
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
|
1 2 3 4 5 6 7 8 9 10 |
<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
|
1 2 3 4 5 6 7 8 9 10 |
({ 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
({ /** * 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); } }, }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.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.
|
1 |
<aura:component implements="lightningsnapin:minimizedUI"> |
2. The following code creates the minimized API component instance in your markup.
|
1 |
<lightningsnapin:minimizedAPI aura:id="minimizedAPI"/> |
3. Add an initialize aura handler that action gets called when the component is initialized.
|
1 |
<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.
|
1 2 3 |
<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.
|
1 2 3 |
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.
