Snap-Ins for Web Developer Guide

Snap-Ins for Web Developer Guide
Customize Your Web Snap-In
Customize Snap-Ins Chat
Custom Lightning Components
Pre-Chat UI
Pre-Chat Component Code Samples
Minimized UI
Minimized Component Code Samples
Get Settings from the Snap-Ins Code Snippet
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: 

    1<aura:component implements="lightningsnapin:prechatUI">

    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. 
    1<lightningsnapin:prechatAPI aura:id="prechatAPI"/>

    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.

    1<aura:handler name="init" value="{!this}" action="{!c.onInit}" />

    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. 
    1/**
2 * On initialization of this component, set the prechatFields attribute and render prechat fields.
3 * 
4 * @param cmp - The component for this state.
5 * @param evt - The Aura event.
6 * @param hlp - The helper for this state.
7 */
8onInit: function(cmp, evt, hlp) {
9   // Get prechat fields defined in setup using the prechatAPI component.
10   var prechatFields = cmp.find("prechatAPI").getPrechatFields();
11
12   // Render your fields
13},
  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. 

    1/**
2 * Function to start a chat request (by accessing the chat API component)
3 *
4 * @param cmp - The component for this state
5 */
6onStartButtonClick: function(cmp) {
7    // Make an array of field objects for the library.
8    var fields = // Get your prechat fields.
9        
10    // If the prechat fields pass validation, start a chat.
11    if(cmp.find("prechatAPI").validateFields(fields).valid) {
12        cmp.find("prechatAPI").startChat(fields);
13    } else {
14        console.warn("Prechat fields did not pass validation!");
15    }
16},
  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.