Snap-Ins for Web Developer Guide

Snap-Ins for Web Developer Guide
Customize Your Web Snap-In
Customize Snap-Ins Chat
Custom Lightning Components for Snap-Ins for Web
Customize the Pre-Chat Page UI with Lightning Components
Custom Pre-Chat Component Code Samples
Customize the Minimized Snap-In UI with Lightning Components
Custom Minimized Component Code Samples
Get Settings from the Snap-Ins Code Snippet
Snap-Ins Code Snippet Versions
PDF

Newer Version Available

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

Customize the Pre-Chat Page UI with Lightning Components

Customize the fields, layout, buttons, images, validation, or any other part of the user interface for pre-chat using a custom Lightning component.

Before you start, make sure that you have a Snap-ins deployment with pre-chat 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 pre-chat interface.

    Change the opening aura component tag to:

    This code implements the lightningsnapin:prechatUI interface, which makes the component available to select as your pre-chat page from Snap-ins Setup.

  2. Create the pre-chat API component.

    This code provides an API that you can use to customize the user interface for the pre-chat page.

  3. Add an initialize aura handler.

    This action gets called when the component is initialized.

    There’s a separate handler for when the component renders.

    Note

  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 Snap-ins Setup.

  5. Add an initialize action in your component controller.
  6. Add a handler for starting a chat.

    Add a click handler to a button element. The customer uses this button to request a chat.

  7. Save your component and select it from Snap-ins Setup.

    After you save your component, go to Snap-ins Setup and navigate to your chat settings. Your component should be available to select as a custom component for your pre-chat page.