Embedded Service for Web Developer Guide

Embedded Service for Web Developer Guide
Adjust General Parameters
Change the Embedded Chat Window Appearance and Behavior
Customize Embedded Chat
Customize the Channel Menu
Embedded Service Customized Components
Lightning Web Components for Embedded Service
Custom Aura Components
Pre-Chat UI
Pre-Chat Component Code Samples
Minimized UI
Minimized Component Code Samples
Get Settings from the Embedded Service Code Snippet
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 Pre-Chat Page UI with Aura Components

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

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