UChat Official

Introduction

This comprehensive overview explores the newly introduced feature for custom user IDs in the Web Chat Widget of the Omnichannel platform.

This feature enables seamless integration of external user data—such as from websites or forms—into the chat widget, allowing for a personalized user experience.

Previously, passing user details from outside the platform was limited, but now, with this feature, developers can distinguish between guest users and logged-in users, providing tailored interactions based on user data.

This summary details the setup process, key components, and implementation steps for leveraging this feature effectively. It emphasizes the importance of security, data handling, and customization to enhance chatbot interactions.


Key Concepts and Implementation Steps

1. Purpose of the Custom User ID Feature

  • Distinguish Users: Separates guest users from authenticated users.

  • Personalization: Passes user-specific data (name, email, ID) into the chatbot.

  • Enhanced Experience: Enables customized conversations based on user data.

  • Use Cases: Suitable for websites with login systems, forms, or existing user databases.

2. Prerequisites and Settings

  • Platform Limitation: Available exclusively on Omnichannel Web Chat Widget.

  • Access Settings:

    • Navigate to Web Chat Widget Settings.

    • Go to Display Style.

    • Locate Set Custom User ID option.

3. Essential Components

Component

Description

Security Note

Secret Key

Used to encrypt/decrypt data exchanged between frontend and backend

Keep confidential; do not share

Sample Code (PHP)

Generates hash/token for request validation

Typically handled server-side

Script Tag

JavaScript snippet inserted into webpage header

Listens for chat events and passes data

4. Implementation Workflow

  • Step 1: Obtain the script snippet provided by the platform.

  • Step 2: Insert the script into your webpage or code environment.

  • Step 3: Define user data variables (e.g., user ID, name, email).

  • Step 4: Generate a hash/token using the secret key, user ID, and encryption algorithm (SHA-256).

  • Step 5: Pass the user data and hash into the chat widget via the script.

  • Step 6: When the chat widget initializes, it fetches the user data.

  • Step 7: The system creates or matches the user in the backend based on the custom ID.

  • Step 8: The user appears in the chat system with their personalized details.

3. Practical Example

Using a CodePen environment, the process involves:

  • Copying the script into the webpage.

  • Setting user variables:

  • Generating a hash:

    • Use an online tool with HMAC SHA-256.

    • Input: user ID and secret key.

    • Output: hash string.

  • Passing data:

    • Embed the user ID, name, email, and hash into the script.

  • Result:

    • When the chat widget opens, the user is created or matched.

    • The user appears in the live chat dashboard with the provided details.

4. Security and Best Practices

  • Keep the secret key confidential.

  • Handle hash generation on the server-side whenever possible.

  • Validate user data before passing it into the widget.

  • Use HTTPS to secure data transmission.

  • Limit access to the script and secret key.

5. Benefits of Using Custom User IDs

  • Personalized User Experience: Deliver tailored conversations based on user data.

  • Better User Management: Track and analyze user interactions with unique identifiers.

  • Seamless Integration: Connect website forms, login systems, or CRM data directly into chat.

  • Enhanced Engagement: Recognize returning users and provide context-aware responses.

  • Data Consistency: Maintain user data across multiple sessions and devices.

6. Limitations and Considerations

  • Backend Handling: Ideally, hash generation and user data management should be handled server-side for security.

  • Platform Compatibility: Currently limited to Omnichannel Web Chat Widget.

  • Data Privacy: Ensure compliance with data protection regulations when passing user data.

  • Technical Skills: Requires familiarity with JavaScript, server-side scripting, and security practices.

7. Summary Table: Implementation Checklist

Step

Action

Notes

1

Access Web Chat Widget Settings

Navigate to display style options

2

Obtain the script snippet

Copy the provided code

3

Insert script into webpage header

Place before closing </head> tag

4

Define user data variables

User ID, name, email, etc.

5

Generate hash/token

Use HMAC SHA-256 with secret key

6

Pass data into script

Embed variables and hash

7

Test chat widget

Confirm user creation and data passing

8

Monitor in dashboard

Verify user details appear correctly


Summary

Implementing custom user IDs in the Web Chat Widget significantly enhances the personalization and user management capabilities of your chatbot.

By securely passing user data from your website or application, you can create a more engaging and tailored experience for your users, whether they are logged-in customers or guests. Proper handling of security, data privacy, and backend integration ensures a robust and compliant implementation.

If you encounter challenges or have questions, consult the platform’s documentation or community forums. Embracing this feature empowers your chatbot to deliver context-aware interactions, fostering better customer engagement and improved service quality.