Home
Lightning Components for Snap-In Minimized UI

Lightning Components for Snap-In Minimized UI

By December 2, 2018 Lightning, Snap-ins 0 Comments

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 File | New | Lightning Component. 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);
}

 

Understanding component 

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.

Tags:

Related Posts