22

Chat Widget Customization

Last Update 13 giorni fa

Changing the appearance of the tawk.to chat widget Modifying your widget content Changing your widget language Customizing the widget header and body cards Change how the widget behaves on your site

Saving Pre-Chat and Offline form responses to Custom Attributes in Contacts

The instructions below are for desktops and laptops only.

You can connect Custom Attributes to fields in your Pre-Chat and Offline forms so visitor responses are automatically saved to their Contact record.

This removes the need to manually copy information from chats and helps your team view structured, consistent data directly in the Inbox and Contact profiles.

Before you start

Ensure you have permission to edit the Chat Widget for your property.

About Custom Attributes

Each Custom Attribute has a specific format, such as:
  • Short Text
  • Number
  • Date
  • List (Single Selection)
You can either:
  • Create Custom Attributes in Contacts before adding them to the form, or
  • Create a new one directly from the form editor using + New Custom Attribute

When linking a form field, the selected Custom Attribute determines how the field behaves in the form. The system ensures the input type matches the attribute format and may automatically adjust the field type to maintain structured data.

Note: Custom Attributes can be used across multiple forms and chat widgets.

To learn more about Contacts and Custom Attributes, see this guide:
How to customize a Contact

Link Custom Attributes to Pre-Chat form fields

1. Log in to your tawk.to account, and select the correct property.

2. Click Administration on the left navigation bar.

3. Click Chat Widget in the left submenu.

4. Under Widget Content, click Edit Content. This will open the content editor.

5. In the Widget Content editor, click Pre‑Chat under Widget State. Switch Enable Pre‑Chat on.

6. Click + Add under Body Cards and select Form.

7. This adds the Form with default fields such as Name and Email. Choose the fields you want under Add fields.

8. To connect a field to a Custom attribute, click the Custom Attribute dropdown in a field in your form and select the relevant attribute from the list. You can also select New Custom Attribute to create a new attribute.


Note:
- Built-in fields such as Name, Email, Phone, and Department are not eligible for Custom Attribute mapping.
- When linking fields, the field type must match the Custom Attribute format to ensure data is stored correctly. The system may adjust the field type automatically based on the selected attribute.

9. After selecting an attribute:

- A label appears next to the field name, indicating the attribute it’s connected to.
- The Field Label and format may automatically adjust to the most suitable input type (for example, Number, Date, or list options) to match the attribute. 
To remove the custom attribute, click Clear next to the dropdown. This removes the link while keeping your field label and setup. You can also revert the field back to its original setup before the attribute was linked.
If a connected attribute is deleted from Contacts, you’ll see a message prompting you to update or remove the link.

10. Click Save when you’re done. Your changes apply immediately after saving.

To learn more about setting up and customizing the Pre-Chat Form, see this guide: 
Using the Pre-Chat Form

Apply the same setup to the Offline form

You can also capture and store responses when your team is unavailable using the Offline form.

To apply the same setup to the Offline form:

  1. Open the Offline tab under Widget State.

  2. Add or edit a Form card.

  3. Link fields to Custom Attributes using the same steps as the Pre-Chat form.

  4. Save your changes.

Offline forms use the same field types, settings, and Custom Attribute linking as the Pre-Chat form. Name and Email follow your Offline form rules.

To learn more about setting up and customizing the Offline Form, see this guide: 
Using the Offline Form

What visitors see

Visitors do not see Custom Attributes. They only see the form fields you configure.

Each field uses the appropriate input type, such as:
  • Text input for short answers
  • Number input for numeric values
  • Date picker for dates
  • Yes/No choices for True or False attributes
  • Selection controls for list-based attributes

What agents see

When a visitor submits a form, their responses are saved to the Contact record and displayed in the Inbox and Contact sidebar in a structured format based on the attribute type.

This makes it easier for agents to understand context without searching through chat messages.

Troubleshooting

Attribute not available
If a Custom Attribute was deleted or is missing:
  • Remove the existing link using Remove Attribute
  • Create or select a new attribute and relink it

Reaching attribute limits
If you reach your Custom Attribute limit:
  • Remove unused attributes in Contacts
  • Delete attributes you no longer need before creating new ones

Custom Attributes vs Custom Fields

Custom Fields
  • Appear on Pre-Chat and Offline forms
  • Collect visitor input during a chat or message

Custom Attributes
  • Live on the Contact record
  • Store structured data for reporting, filtering, and viewing in the Inbox

When you link a field to a Custom Attribute, the visitor’s response is automatically saved to their Contact in the correct format.

Why this matters

Linking form fields to Custom Attributes helps you:
  • Reduce manual data entry
  • Keep Contact data structured and consistent
  • Improve filtering and reporting
  • Help agents respond faster with structured context directly available in the Inbox

Related guides

Using the Pre-Chat Form

Using the Offline Form

How to customize a Contact
If you have feedback about this article, or if you need more help:

Was this article helpful?

0 out of 0 liked this article

Still need help? Message Us