The pre-chat form allows you to collect visitor details such as name, email address, or department preference before the chat begins. You can also add custom fields to gather any additional information needed for identification or lead qualification. This helps your agents prepare and route chats to the correct department automatically.
Before saving any changes, you can use the Preview and test option to check how the pre-chat form looks and behaves. This allows you to fine-tune the design, fields, and content without affecting the chat button that is already active on your website.
How to access and enable the pre-chat form
Each pre-chat form is linked to a specific chat button. To configure it, go to Configuration > Chat > Chat buttons.
Choose the chat button you want to edit (or create a new one) and click Edit. In the left menu, select Online scenario. Find the option Request information by pre-chat form, when chat button is clicked and check the box to enable it. You can also click Edit next to this option to open the pre-chat form settings directly.
The pre-chat form can also be enabled in the Offline scenario, but only if the scenario is set to show online button with chatbot.
The Pre-chat form tab is always visible in the left menu of your chat button. When the feature is disabled, it appears grayed out. Once you enable it in the Online scenario, the section becomes active and editable.
Editing the pre-chat form
Open the Pre-chat form section from the left menu. Here you can configure how the form looks:
- Logo - upload an image that appears at the top of the form. The logo is displayed only for specific pre-chat form styles that support header graphics.
- Title - sets the main heading of the form shown above all fields.
- Knowledgebase suggestions - when enabled, visitors can view recommended knowledge base articles directly inside the pre-chat form. This adds a Suggested articles option, which opens a list of articles that may answer their question before starting a chat.
- Extend knowledge base search - optionally expand the search to include article titles, keywords, and descriptions in addition to the article content. This ensures more accurate suggestions based on the visitor’s input.
- Description - an optional text displayed below the title. The description supports HTML formatting, which allows you to add styled text, links, or additional instructions.
Customizing form design
Under the Design sub-tab, you can control the position, style, and appearance of the form:
- Position - choose where the pre-chat form appears on the page. Depending on the selected style, the form can be embedded in the center of the page, shown in one of the bottom corners, docked to the left or right edge, or opened in a pop-up window.
- Size - configure the width and height of the form. Manual sizing is available when the form is centered, placed in a corner, or displayed as a pop-up window. Otherwise, the form uses predefined dimensions.
- Page blocker - when enabled, the rest of the website content becomes visually blocked (overlayed) while the form is open. This helps guide the visitor’s focus and prevents interaction with the background page.
- Z-index - defines the stacking order of the form relative to other elements on your website. A higher value ensures the pre-chat form stays above other components, preventing overlap issues.
- Style - choose from several predefined visual themes. The selected style determines the overall design of the form and also affects which customization options (colors, borders, etc.) are available below.
- Color customization - based on the selected style, additional options appear allowing you to adjust background, text, and other color elements of the form. The available settings vary between styles.
- Custom CSS - apply your own CSS rules to fine-tune the appearance of the form. Clicking Set custom CSS opens a dedicated editor. Custom CSS is stored separately for each pre-chat form style.
Managing form fields
Go to the Fields sub-tab to manage the form inputs. You can:
- Add or remove fields such as Name, Email, or Message.
- Reorder fields and change their labels or placeholders.
- Mark fields as mandatory or optional.
- Enable the option Let visitor choose department to route chats automatically to a selected department.