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 File | New | Lightning Component. Enter a name and description for your component and click Submit. Here is the lightning component code

controller.js

helper.js

 

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.

2. The following code creates the minimized API component instance in your markup. 


3. Add an initialize aura handler that action gets called when the component is initialized.


4. Make sure to add a maximize container action so your customers can open the snap-in. Here is the code from the component.

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.

 

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.