How to Implement Per-Page Widget Configurations on a Single Domain

[HermesMacedo]

Hello team, How Much $$?

I would like to get some guidance on the best way to implement the Chatwoot web widget in a multi-language WordPress environment.

My Use Case:

I have a single WordPress website that serves content in three different languages on separate pages:

https://mysite.com/pagina-portugues (Portuguese)

https://mysite.com/pagina-espanhol (Spanish)

https://mysite.com/pagina-english (English)

My Goal:

I want to display a unique and independent chat widget on each of these pages. Each widget instance needs its own specific configuration.

Requirements:

Individual Inboxes: Each page's widget should connect to a different inbox. This means I need to initialize the script with a unique website_token for each page.

Language-Specific Interface: The widget's language (locale) must match the page's language (e.g., pt_BR for Portuguese, es for Spanish, en for English).

Secure Identity Verification: I plan to use HMAC for secure identification, so the identifier_hash will be generated and passed to the widget for each logged-in user.

Pre-fill User Data from Cookies (No Pre-Chat Form):

The pre-chat form must be disabled.

My website already saves the user's information (name, email, phone) in browser cookies after they fill out an initial contact form.

I need the Chatwoot widget to automatically identify the user by reading these values from my site's cookies and setting them using the window.chatwootSDK.setUser() method.

My Question:

What is the best practice for loading the widget script with these different configurations on a page-by-page basis? My primary challenge is figuring out how to dynamically pass the correct website_token, locale, and user information from cookies to the Chatwoot SDK on each specific page load.

Could you provide an example of how the JavaScript snippet should be structured to achieve this? Specifically, how to:

Load the base script.

On the chatwoot:ready event, read browser cookies.

Set the user's identity with setUser().

Set the correct locale for that page.

Thank you for your help!