Setting a visitor’s name and email in the Pre-Chat Form using JavaScript

The instructions below are for desktops and laptops only.

You can use tawk.to’s API to automatically fill in a visitor’s name and email in the Details tab, Pre-Chat Form, and Offline Form.

This helps you recognize returning visitors, link conversations to existing contact profiles, and replace anonymous visitor IDs (such as V1234567890123456) with real names and emails.

Ensure that:

• The visitor’s name or email address is already available on your website — for example, from a login or sign-up form. The API can only set details that your system can provide.

• You have access to your tawk.to property’s JavaScript API settings under Administration → Overview → JavaScript API.

• Enable Secure Mode if you plan to send sensitive information (like email addresses or user IDs). This ensures the data is verified using a secure hash generated on your server. To learn how to enable Secure Mode and generate a hash, see this guide: How to generate a hash for the JavaScript API

This is the most secure method and is recommended for all production environments.

With Secure Mode enabled, you can generate a hash (an encrypted signature) on your server using your secret key and the visitor’s unique ID. The widget uses this hash to confirm that the visitor data came from your system and hasn’t been tampered with.

2. On the page where the widget is embedded, define the visitor’s details before loading the tawk.to script:

Notes:

• The hash must match the visitor or user ID used to generate it on your server.

• You can also include the hash later in a login() or setAttributes() call if the visitor signs in after the widget has already loaded.

• If the hash is missing or doesn’t match, the widget will not update the visitor’s details for security reasons.

Single-page applications/AJAX logins

If your website uses a single-page application (SPA) framework (like React, Vue, or Angular) or handles logins dynamically with AJAX, visitor details may become available after the widget has already loaded.

In these cases, use the setAttributes() method to update the visitor’s information once it’s available.

Tips:

• Always call setAttributes() after Tawk_API.onLoad to ensure the widget is fully initialized.

• Use Secure Mode and a valid hash when handling sensitive data or authenticated users.

• For repeated logins or session changes, you can re-run setAttributes() whenever new visitor data is available.

If you don’t have access to a server-side hash generator or just want a quick setup for testing, you can define the visitor’s name and email directly in the script.

This method works well for non-sensitive use cases, but should not be used if you’re exposing personally identifiable information (PII) in production.

When added before the widget embed script, this code automatically fills the visitor’s name and email in the Pre-Chat and Offline forms. The chat session will also display the visitor’s real name instead of the default anonymous ID.

You can also include a phone number in the visitor’s details using the visitor() method with the phone property. Ensure to use the international E.164 format (for example, +1234567890).

To learn how the phone number field appears and behaves in your Pre-Chat Form, see this guide: Using the Pre-Chat Form

• Avoid duplicates
  If the same visitor is identified with different emails or IDs, you may see duplicate profiles. To learn how to merge them, see this guide: How to merge contacts
  
  

• Handle data responsibly
  Do not include secret keys or private information in client-side code. Follow your organization’s privacy policy and relevant data protection laws. Also, enable Secure Mode whenever you’re sending identifiable or sensitive data. This prevents data spoofing and protects user information.
  
  

• Test on a staging environment
  Confirm that the correct visitor profiles appear in the dashboard and that Secure Mode validation works as expected.
  
  

• Explore the API
  To see other methods for managing visitor data, check the JavaScript API documentation.

If you have feedback about this article, or if you need more help:

• Click the green live chat icon

• Schedule a call with us

• Visit our community