Embedded Service Chat for Web Developer Guide

Embedded Service Chat 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.

The legacy chat product is in maintenance-only mode, and we won't continue to build new features. You can continue to use it, but we no longer recommend that you implement new chat channels. Instead, you can modernize your customer communication with Messaging for In-App and Web. Messaging offers many of the chat features that you love plus asynchronous conversations that can be picked back up at any time.

Important

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:

    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.

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