English (US)
  1. Zendesk help
  2. Chat
  3. Live chat advice and troubleshooting
  4. How to manage the widget for live chat

How do I customize the pre-chat form?

Mark Nino Valencia
  • Edited

Question

What information can I collect about my customers on the pre-chat form? Can the customer information be required in the pre-chat form? How do I customize the pre-chat form and change what my customers see?

Answer

The pre-chat form collects information about your customers before a live chat session is initiated. This is a feature of live chat and requires one of these widgets:

  • Web widget (Classic)
  • Chat-only web widget
  • Legacy Chat widget

If you need help determining which widget you're using, see the article: Which Zendesk widget do I have with my account and website?

Note: This feature is not available with messaging. For information on messaging, see the article: About messaging.

You can edit the pre-chat form from the Chat dashboard under Settings > Widget > Forms > Pre-chat form. For information on activating your form, see the article: Enabling the pre-chat form on the Chat widget.

 

 

 

You can add, remove, and customize five elements on the form.

 pre_chat_form_diagrammed.png

 

Browse the tabs below for more information on customizing these elements:

Greeting

Identity

Phone number

Department

Question

Greeting

The greeting is the message that will appear at the top of your form. Use this to provide instructions or to welcome your customer to chat. The greeting field cannot process HTML elements such as hyperlinks and should only contain plain text.

Identity

The identity fields collect personal information about your customers. By default, this will include a Name and Email field. You can allow your customers to use either a Facebook or Google account to populate these fields for them. To add these features, select option fort to Allow social login under the Visitor profile.

allow social login setting checked

If you want to collect your customer's information automatically, use the Chat API. For more information, see the article: How to identify visitors in the Chat widget?

If you do not wish to collect your customer's name and email on the pre-chat form. Toggle Visitor profile off.

visitor profile section toggled off

Selecting this option removes both fields from your form. Disabling this means there will be no record of your customer's name or email in the chat history so you will not be able to follow up with them after the chat session ends.

Phone number

To create a phone number field, select the option Allow phone number under the Visitor Profile section.

allow phone number enabled

This creates an optional phone number field on the form. To make this a required field, select Require phone number under the Pre-Chat form.

Department

If you have departments set up in Chat then this field will automatically show up on the pre-chat form. Choose to make this field required and customize the field label under Pre-chat form.

department options displayed in pre chat form

To add more options to this field, see the article: How do I add departments to the pre-chat form?

If you want to keep your chat departments but do not want this field to appear on your widget, see the article: Can I hide the department field on the pre-chat form?

Question

The question field is added automatically, where your customers will type their first message. The field is labeled Message on the form and this label is not customizable. Require this field by selecting Require question under the Pre-Chat form.

There are no other customization options in the pre-chat form. If you need to collect additional information or you want to customize the form beyond this you need to create a completely custom chat widget. For more information about this, see the article: Can I add additional fields to my pre-chat form?

Having trouble with your form?

If you are experiencing issues with your pre-chat form, see the following articles for more help:

Return to top

10 Comments

  • Sam Oh

    Hi,

    Like contactForm, is it possible to prefill the pre-chat form?

    prechatForm: {
       fields: [
          { id: 'name', prefill: {'*': 'John Doe'}},
          { id: 'email', prefill: {'*': 'JohnDoe@gmail.com'}},
       ]
    }
    1
  • Thomas (internalnote.com)
    Community Moderator

    Hey,

    What you're looking for is the Identify feature of the Zendesk Widget API:

    https://developer.zendesk.com/embeddables/docs/widget/core#identify

    <script type="text/javascript">
  zE('webWidget', 'identify', {
    name: 'Lex Luthor',
    email: 'ceo@lexcorp.com',
    organization: 'LexCorp'
  });
</script>

    Note:

    Organization is optional and requires an existing organization with that name in Zendesk Support/Chat

    0
  • Benedikt Badke

    Does the Zendesk Chatbot offer the possibility that a customer must select if he is a new customer or an existing client?

    0
  • Dainne Lucena
    Zendesk Customer Care

    Hi Benedikt Badke

     

    For the Classic Chat Widget, natively it's not possible since that would entail adding another field in the pre-chat form. It can be done by using the Chat SDK though. 

    0
  • Jarrod Greer

    At the bottom of every one of our webpages we have a unique session based identifier that is generated and displayed for the customer. It serves multiple purposes but the biggest thing it does for the company is help us identify orders that generated because of contact with our customer service team instead of being able to go straight to checkout without ever talking to anyone so that we can correctly attribute sales to various online marketing campaigns. Can we have a custom value submitted for chats and support tickets with or without the customer being aware? See the attached photo's. 

    0
  • Thomas (internalnote.com)
    Community Moderator

    Hey,
    You can prefill custom fields in the Classic Web Widget via the following code, where 123456 is the ID of your Connect ID field. Note that the customer will see this value.

    <script type="text/javascript">
      zESettings = {webWidget: {
        contactForm: {
          fields: [
            { id: 2142225, 
              prefill    : { '*': 'My custom field text' } 
            }
             ]      
       }
    }};

    If you want it invisible, you'll need to use the Tag feature:

    <script type="text/javascript">
window.zESettings = {
    "webWidget": {
        "contactForm": {
            "tags": [
                "Connect ID"
            ]
        }
    }
}
</script>

     

    0
  • Lynn Voie

    Is there a way to change the order within the departments field? I would like to move "other question" to the bottom though it seems to only sort A->Z.

    0
  • Usman Saeed

    Can we add custom field to Pre-chat Form?

    2
  • Lisa Setford

    Great Question, we would also like to add a custom fields to the pre-chat form. For example, customers Post Code or prompt customer to provide a URL to product/item. 

    2
  • Arianne Batiles
    Zendesk Customer Care

    Hi Usman Saeed and Lisa Setford,

    While it's not natively possible to add fields in the pre-chat form, you may consider building a custom widget. 

    Web Widget (Classic), Chat-only Web Widget (Classic), and Legacy Chat widget  come with a standard pre-chat form that allows minor customization. The Web SDK can be used to add additional fields to the pre-chat form and render the values of these fields using a custom-built chat app.

    Please note that the Web SDK is no longer undergoing further development since September of 2021. If you're looking for a more versatile solution with added functionalities, switch to messaging and take advantage of Sunshine Conversations. 
    0

Please sign in to leave a comment.

Related articles

Powered by Zendesk