Embedded Service for Web Developer Guide

Embedded Service for Web Developer Guide
Customize Your Embedded Component
Customize Embedded Chat
Custom Aura Components
Pre-Chat UI
Pre-Chat Component Code Samples
Minimized UI
Events for the Minimized Chat Window
Minimized Component Code Samples
Get Settings from the Embedded Service Code Snippet
Lightning Web Components for Embedded Service for Web
Multiple Components with Lightning Out
Code Snippet Versions
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Customize the Minimized Embedded Service UI with Aura Components

Customize the user interface for the embedded component when it’s minimized on your web page using a custom Aura component.

Before you start, make sure that you have an Embedded Service 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.

  1. Implement the minimized interface.

    Change the opening aura component tag to:

    This code implements the lightningsnapin:minimizedUI interface, which makes the component available to select as your minimized component from Embedded Service Setup.

  2. Create the minimized API component.

    This code provides an API that you can use to customize the user interface for the minimized component.

  3. Add an initialize aura handler.

    This action gets called when the component is initialized.

  4. 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 Embedded Service Setup.

    Make sure to add a maximize container action so your customers can open the embedded component. We recommend you add the following as a click handler on a button, for example.
  5. Add an initialize action in your component controller.
  6. 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.

  7. Add a minimized event generic handler to your helper.
  8. Save your component and select it from Embedded Service Setup.

    After you save your component, go to Embedded Service Setup and navigate to your chat settings. Your component should be available to select as a custom component for the minimized embedded component.