Custom Pre-Chat Component Sample Using JavaScript

The following code sample contains examples of the component, controller, and helper code for a custom pre-chat component using plain JavaScript.

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

This component:

Uses Javascript to create an email input field
Uses minimal Aura to get pre-chat fields from Embedded Service setup in a render handler
Provides an example of getting pre-chat field values to pass to the startChat Aura method on lightningsnapin:prechatAPI

This code sample is an example and doesn’t create a functioning pre-chat form on its own. You can use this sample as a starting point, but you must add more pre-chat fields and include your own styling.

Important

Component Code

Controller Code

Helper Code

The sample creates the following unstyled pre-chat form. Preview of the unstyled pre-chat form using this code sample.

Embedded Service Chat for Web Developer Guide

Custom Pre-Chat Component Sample Using JavaScript

Component Code

Controller Code

Helper Code