Fix/renaming api name #22
Conversation
WalkthroughThe changes involve a comprehensive renaming of methods and event handlers in the Tawk Messenger API documentation and implementation. The modifications include prefixing method names and event names with "tawk" to standardize the naming convention across various files, including documentation and source code. This renaming aims to enhance consistency and clarity in the API usage. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TawkMessenger
User->>TawkMessenger: tawkToggle()
TawkMessenger-->>User: Toggles visibility
User->>TawkMessenger: tawkLoad()
TawkMessenger-->>User: Emits tawkLoad event
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (8)
docs/spa-setup.md (3)
11-11: LGTM! Consider adding a note about the naming change.The change from
toggle()totawkToggle()is consistent with the PR objectives and helps prevent potential naming collisions. The documentation accurately reflects the new method name.Consider adding a brief note in the documentation mentioning the "tawk" prefix convention for API methods. This could help users understand the naming pattern and its purpose. For example:
## Instance property To access the API functions, call the **$tawkMessenger** anywhere in your components. Upon using -the **tawk-messenger-vue-2** it will auto register the global scope. +the **tawk-messenger-vue-2** it will auto register the global scope. Note that all API methods are +prefixed with "tawk" to prevent naming collisions. ```js this.$tawkMessenger.tawkToggle();--- `21-21`: **LGTM! Consider updating the event documentation reference.** The change from `'load'` to `'tawkLoad'` is consistent with the PR objectives and helps prevent potential naming collisions. The documentation accurately reflects the new event name. Consider updating the sentence about the list of events to explicitly mention the "tawk" prefix. This could help users understand the naming pattern for events. For example: ```diff ## Event handling You can listen on events emitted by the plugin, It must be exactly match the name used to listen -to that event, you can see the list of [events](api-reference.md) here. +to that event. All event names are prefixed with "tawk". You can see the complete list of +[events](api-reference.md) here. ```js this.$tawkMessenger.$on('tawkLoad', () => { // place your code here });--- Line range hint `1-26`: **Overall, the changes look good and align with the PR objectives.** The modifications to the API method and event names in the documentation are consistent with the goal of adding the "tawk" prefix to prevent naming collisions. The documentation has been updated accurately to reflect these changes. To further improve the documentation: 1. Consider adding a brief explanation of the "tawk" prefix convention at the beginning of the document. 2. It might be helpful to include a note about potential migration steps for users updating from a previous version of the library. 3. Ensure that all other documentation files are consistently updated with the new naming convention. <details> <summary>Tools</summary> <details> <summary>LanguageTool</summary><blockquote> [uncategorized] ~8-~8: It appears that a hyphen is missing (if ‘auto’ is not used in the context of ‘cars’). Context: ...ng the **tawk-messenger-vue-2** it will auto register the global scope. ```js this.$tawkMess... (AUTO_HYPHEN) </blockquote></details> </details> </blockquote></details> <details> <summary>docs/ssr-setup.md (3)</summary><blockquote> `46-46`: **LGTM! Consider adding a note about the API change.** The update from `toggle()` to `tawkToggle()` is correct and aligns with the PR objective of adding the "tawk" prefix to API methods. This change will help prevent potential naming collisions. Consider adding a brief note in the documentation mentioning this API change, especially if this is a breaking change for existing users. For example: ```markdown ## Instance property To access the API functions, call the **$tawkMessenger** anywhere in your components. > Note: As of version X.X.X, API method names have been prefixed with "tawk" to prevent naming collisions. ```js this.$tawkMessenger.tawkToggle();--- `56-56`: **LGTM! Consider updating the surrounding text for clarity.** The update from `'load'` to `'tawkLoad'` is correct and aligns with the PR objective of adding the "tawk" prefix to API events. This change will help prevent potential event name collisions. Consider updating the text above the code example to reflect the change in event naming convention. For example: ```markdown ## Event handling You can listen to events emitted by the plugin. Event names are now prefixed with "tawk" to ensure uniqueness. ```js this.$tawkMessenger.$on('tawkLoad', () => { // place your code here });--- Line range hint `1-70`: **Consider updating the entire documentation to reflect the new naming convention.** The changes made to this file accurately reflect the new naming convention for API methods and events. However, it might be beneficial to review and update the entire documentation to ensure consistency and clarity for users. Consider the following suggestions: 1. Add a section at the beginning of the document explaining the naming convention change and its rationale. 2. Review all code examples and text references throughout the document to ensure they use the new "tawk" prefixed names. 3. If this change affects backward compatibility, consider adding a migration guide or version-specific notes. 4. Update the link to the API reference at the end of the document to ensure it points to the most up-to-date version of the API documentation. These updates will help users understand and adapt to the new naming convention more easily. </blockquote></details> <details> <summary>docs/api-reference.md (2)</summary><blockquote> Line range hint `514-821`: **Final section consistently updated with minor suggestion.** The remaining method descriptions and code examples have been correctly updated to use the new "tawk" prefix. The `secureMode` and `customstyle` sections are appropriately left unchanged as they don't require the prefix. However, there's a minor formatting issue in the "Visibility" example: Consider adding a newline before the closing triple backticks in the "Visibility" example to improve readability: ```diff } } }); +Tools
LanguageTool
[grammar] ~544-~544: Consider using either the past participle “initialized” or the present participle “initializing” here.
Context: ...or undefined) indicating when plugin is initialize. ```js this.$tawkMessenger.tawkOnBefor...(BEEN_PART_AGREEMENT)
[uncategorized] ~556-~556: Possible missing article found.
Context: ...tawkWidgetPosition Returns a string for current position of the widget. ```js this.$ta...(AI_HYDRA_LEO_MISSING_THE)
240-240: Minor language improvements suggested.Consider the following language improvements to enhance clarity:
- Line 240: Change "his name" to "their name" for gender-neutral language.
- Line 288: Change "eg" to "e.g." for correct abbreviation.
- Line 544: Change "is initialize" to "is initialized" for correct grammar.
- Line 556: Add "the" before "current position" for better readability.
Also applies to: 288-288, 544-544, 556-556
Tools
LanguageTool
[style] ~240-~240: Since a “visitor” is neither male nor female, the better pronoun might be “their”.
Context: ...voked when the visitor manually changes his name. The visitorName is passed to the ...(SOMEBODY_NEUTRAL)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- docs/api-reference.md (12 hunks)
- docs/spa-setup.md (2 hunks)
- docs/ssr-setup.md (2 hunks)
- src/lib/index.js (2 hunks)
Additional context used
LanguageTool
docs/api-reference.md
[style] ~240-~240: Since a “visitor” is neither male nor female, the better pronoun might be “their”.
Context: ...voked when the visitor manually changes his name. The visitorName is passed to the ...(SOMEBODY_NEUTRAL)
[uncategorized] ~288-~288: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...ail will not be available on load time (eg single page app, ajax login), then use ...(E_G)
[uncategorized] ~360-~360: Possible missing comma found.
Context: ...etWindowType Returns the current widget type whether it’s inline or embed. ```js th...(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~544-~544: Consider using either the past participle “initialized” or the present participle “initializing” here.
Context: ...or undefined) indicating when plugin is initialize. ```js this.$tawkMessenger.tawkOnBefor...(BEEN_PART_AGREEMENT)
[uncategorized] ~556-~556: Possible missing article found.
Context: ...tawkWidgetPosition Returns a string for current position of the widget. ```js this.$ta...(AI_HYDRA_LEO_MISSING_THE)
Markdownlint
docs/api-reference.md
288-288: null
Link fragments should be valid(MD051, link-fragments)
Biome
src/lib/index.js
[error] 184-184: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
Additional comments not posted (6)
src/lib/index.js (4)
68-75: LGTM: Consistent renaming of action methodsThe renaming of action methods by adding the "tawk" prefix is consistent and aligns with the PR objectives. This change reduces the risk of key collisions while maintaining the existing functionality. The new method names clearly indicate their association with the Tawk widget.
82-91: LGTM: Consistent renaming of getter methodsThe renaming of getter methods by adding the "tawk" prefix is consistent and aligns with the PR objectives. This change maintains the existing functionality while reducing the risk of key collisions. The new method names clearly indicate their association with the Tawk widget, enhancing code clarity.
100-176: LGTM: Consistent renaming of event listeners and emittersThe renaming of event listeners and emitters by adding the "tawk" prefix is consistent and aligns with the PR objectives. This change maintains the existing functionality while reducing the risk of key collisions. The new event names clearly indicate their association with the Tawk widget.
Importantly, the consistency between the
addEventListenercalls and the corresponding$emitcalls is maintained, which is crucial for proper event handling. This ensures that the events will continue to function correctly after the renaming.
Line range hint
1-190: Overall approval: Comprehensive and consistent renamingThe changes in this file demonstrate a thorough and consistent approach to renaming methods and events by adding the "tawk" prefix. This aligns well with the PR objectives of addressing key collision issues. Key points:
- All actions, getters, listeners, and setters have been renamed consistently.
- The functionality of the TawkMessenger class remains unchanged.
- The new naming convention clearly associates all methods and events with the Tawk widget.
- These changes should effectively reduce the risk of key collisions in consumer applications.
The renaming effort appears complete and well-executed, with only minor refactoring suggested for the setter method on line 184. Once that is addressed, these changes will significantly improve the API's clarity and reduce potential naming conflicts.
Tools
Biome
[error] 184-184: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
docs/api-reference.md (2)
11-60: Table of contents updated correctly with new method names.The table of contents has been successfully updated to reflect the new method names with the "tawk" prefix. This change is consistent with the PR objectives of renaming API components to avoid key collisions.
Line range hint
206-513: Method descriptions and examples consistently updated.All method descriptions and code examples in this section have been correctly updated to use the new "tawk" prefix. The changes are consistent and align with the PR objectives of renaming API components to avoid key collisions.
Tools
LanguageTool
[style] ~240-~240: Since a “visitor” is neither male nor female, the better pronoun might be “their”.
Context: ...voked when the visitor manually changes his name. The visitorName is passed to the ...(SOMEBODY_NEUTRAL)
[uncategorized] ~288-~288: The abbreviation “e.g.” (= for example) requires two periods.
Context: ...ail will not be available on load time (eg single page app, ajax login), then use ...(E_G)
[uncategorized] ~360-~360: Possible missing comma found.
Context: ...etWindowType Returns the current widget type whether it’s inline or embed. ```js th...(AI_HYDRA_LEO_MISSING_COMMA)
Markdownlint
288-288: null
Link fragments should be valid(MD051, link-fragments)
| this.root.tawkVisitor = (data) => window.Tawk_API.visitor = data; | ||
| this.root.tawkSetAttributes = (attribute, callback) => window.Tawk_API.setAttributes(attribute, callback); | ||
| this.root.tawkAddEvent = (event, metadata, callback) => window.Tawk_API.addEvent(event, metadata, callback); | ||
| this.root.tawkAddTags = (tags, callback) => window.Tawk_API.addTags(tags, callback); | ||
| this.root.tawkRemoveTags = (tags, callback) => window.Tawk_API.removeTags(tags, callback); |
There was a problem hiding this comment.
Approve renaming, but refactor assignment in expression
The renaming of setter methods by adding the "tawk" prefix is consistent and aligns with the PR objectives. This change maintains the existing functionality while reducing the risk of key collisions. The new method names clearly indicate their association with the Tawk widget.
However, there's an issue on line 184 that needs to be addressed:
The assignment window.Tawk_API.visitor = data within the arrow function expression can lead to confusion and is flagged by the static analysis tool. Let's refactor this to improve clarity:
- this.root.tawkVisitor = (data) => window.Tawk_API.visitor = data;
+ this.root.tawkVisitor = (data) => {
+ window.Tawk_API.visitor = data;
+ };This change separates the assignment from the expression, making the code more readable and less prone to misinterpretation.
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| this.root.tawkVisitor = (data) => window.Tawk_API.visitor = data; | |
| this.root.tawkSetAttributes = (attribute, callback) => window.Tawk_API.setAttributes(attribute, callback); | |
| this.root.tawkAddEvent = (event, metadata, callback) => window.Tawk_API.addEvent(event, metadata, callback); | |
| this.root.tawkAddTags = (tags, callback) => window.Tawk_API.addTags(tags, callback); | |
| this.root.tawkRemoveTags = (tags, callback) => window.Tawk_API.removeTags(tags, callback); | |
| this.root.tawkVisitor = (data) => { | |
| window.Tawk_API.visitor = data; | |
| }; | |
| this.root.tawkSetAttributes = (attribute, callback) => window.Tawk_API.setAttributes(attribute, callback); | |
| this.root.tawkAddEvent = (event, metadata, callback) => window.Tawk_API.addEvent(event, metadata, callback); | |
| this.root.tawkAddTags = (tags, callback) => window.Tawk_API.addTags(tags, callback); | |
| this.root.tawkRemoveTags = (tags, callback) => window.Tawk_API.removeTags(tags, callback); |
Tools
Biome
[error] 184-184: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
| ```js | ||
| this.$tawkMessenger.$on('chatHidden', () => { | ||
| this.$tawkMessenger.$on('tawkChatHidden', () => { | ||
| // place your code here | ||
| }); | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## chatStarted | ||
| ## tawkChatStarted | ||
| Listen on event that invoked when the widget is started. | ||
|
|
||
| ```js | ||
| this.$tawkMessenger.$on('chatStarted', () => { | ||
| this.$tawkMessenger.$on('tawkChatStarted', () => { | ||
| // place your code here | ||
| }); | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## chatEnded | ||
| ## tawkChatEnded | ||
| Listen on event that invoked when the widget is ended. This is not supported in pop out chat window. | ||
|
|
||
| ```js | ||
| this.$tawkMessenger.$on('chatEnded', () => { | ||
| this.$tawkMessenger.$on('tawkChatEnded', () => { | ||
| // place your code here | ||
| }); | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## prechatSubmit | ||
| ## tawkPrechatSubmit | ||
| Listen on event that invoked when the Pre-Chat Form is submitted. The submitted form data is passed to the function. This is not supported in pop out chat window. | ||
|
|
||
| ```js | ||
| this.$tawkMessenger.$on('prechatSubmit', (data) => { | ||
| this.$tawkMessenger.$on('tawkPrechatSubmit', (data) => { | ||
| // place your code here | ||
| }); | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## offlineSubmit | ||
| ## tawkOfflineSubmit | ||
| Listen on event that invoked when the Offline form is submitted. The submitted form data is passed to the function. Form data will contain {name : ”, email : ”, message : ”, questions : []}. This is not supported in pop out chat window. | ||
|
|
||
| ```js | ||
| this.$tawkMessenger.$on('offlineSubmit', (data) => { | ||
| this.$tawkMessenger.$on('tawkOfflineSubmit', (data) => { | ||
| // place your code here | ||
| }); | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## chatMessageVisitor | ||
| ## tawkChatMessageVisitor | ||
| Listen on event that invoked when message is sent by the visitor. The message is passed to the function. This is not supported in pop out chat window. | ||
|
|
||
| ```js | ||
| this.$tawkMessenger.$on('chatMessageVisitor', (message) => { | ||
| this.$tawkMessenger.$on('tawkChatMessageVisitor', (message) => { | ||
| // place your code here | ||
| }); | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## chatMessageAgent | ||
| ## tawkChatMessageAgent | ||
| Listen on event that invoked when message is sent by the agent. The message is passed to the function. This is not supported in pop out chat window. | ||
|
|
||
| ```js | ||
| this.$tawkMessenger.$on('chatMessageAgent', (message) => { | ||
| this.$tawkMessenger.$on('tawkChatMessageAgent', (message) => { | ||
| // place your code here | ||
| }); | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
||
| ## chatMessageSystem | ||
| ## tawkChatMessageSystem | ||
| Listen on event that invoked when message is sent by the system. The message is passed to the function. This is not supported in pop out chat window. | ||
|
|
||
| ```js | ||
| this.$tawkMessenger.$on('chatMessageSystem', (message) => { | ||
| this.$tawkMessenger.$on('tawkChatMessageSystem', (message) => { | ||
| // place your code here | ||
| }); | ||
| ``` | ||
|
|
||
| <br/> | ||
|
|
There was a problem hiding this comment.
Method descriptions and examples updated correctly.
The method descriptions and code examples have been consistently updated to use the new "tawk" prefix. This change aligns well with the PR objectives of renaming API components to avoid key collisions.
However, there's a minor typo in the tawkStatusChange event listener example:
-this.$tawkMessenger.$on('tawkStatusChage', (status) => {
+this.$tawkMessenger.$on('tawkStatusChange', (status) => {
// place your code here
});Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ## tawkLoad | |
| Listen on event that invoked right after the widget is rendered. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('load', () => { | |
| this.$tawkMessenger.$on('tawkLoad', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## statusChange | |
| ## tawkStatusChange | |
| Listen on event that invoked when the page status changes. The function will receive the changed status which will be either online, away or offline. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('statusChage', (status) => { | |
| this.$tawkMessenger.$on('tawkStatusChage', (status) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## beforeLoad | |
| ## tawkBeforeLoad | |
| Listen on event that invoked right when Tawk_API is ready to be used and before the widget is rendered. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('beforeLoad', () => { | |
| this.$tawkMessenger.$on('tawkBeforeLoad', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## chatMaximized | |
| ## tawkChatMaximized | |
| Listen on event that invoked when the widget is maximized. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('chatMaximized', () => { | |
| this.$tawkMessenger.$on('tawkChatMaximized', () => { | |
| // place your code here | |
| }) | |
| ``` | |
| <br/> | |
| ## chatMinimized | |
| ## tawkChatMinimized | |
| Listen on event that invoked when the widget is minimized. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('chatMinimized', () => { | |
| this.$tawkMessenger.$on('tawkChatMinimized', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## chatHidden | |
| ## tawkChatHidden | |
| Listen on event that invoked when the widget is hidden. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('chatHidden', () => { | |
| this.$tawkMessenger.$on('tawkChatHidden', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## chatStarted | |
| ## tawkChatStarted | |
| Listen on event that invoked when the widget is started. | |
| ```js | |
| this.$tawkMessenger.$on('chatStarted', () => { | |
| this.$tawkMessenger.$on('tawkChatStarted', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## chatEnded | |
| ## tawkChatEnded | |
| Listen on event that invoked when the widget is ended. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('chatEnded', () => { | |
| this.$tawkMessenger.$on('tawkChatEnded', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## prechatSubmit | |
| ## tawkPrechatSubmit | |
| Listen on event that invoked when the Pre-Chat Form is submitted. The submitted form data is passed to the function. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('prechatSubmit', (data) => { | |
| this.$tawkMessenger.$on('tawkPrechatSubmit', (data) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## offlineSubmit | |
| ## tawkOfflineSubmit | |
| Listen on event that invoked when the Offline form is submitted. The submitted form data is passed to the function. Form data will contain {name : ”, email : ”, message : ”, questions : []}. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('offlineSubmit', (data) => { | |
| this.$tawkMessenger.$on('tawkOfflineSubmit', (data) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## chatMessageVisitor | |
| ## tawkChatMessageVisitor | |
| Listen on event that invoked when message is sent by the visitor. The message is passed to the function. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('chatMessageVisitor', (message) => { | |
| this.$tawkMessenger.$on('tawkChatMessageVisitor', (message) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## chatMessageAgent | |
| ## tawkChatMessageAgent | |
| Listen on event that invoked when message is sent by the agent. The message is passed to the function. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('chatMessageAgent', (message) => { | |
| this.$tawkMessenger.$on('tawkChatMessageAgent', (message) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## chatMessageSystem | |
| ## tawkChatMessageSystem | |
| Listen on event that invoked when message is sent by the system. The message is passed to the function. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('chatMessageSystem', (message) => { | |
| this.$tawkMessenger.$on('tawkChatMessageSystem', (message) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkLoad | |
| Listen on event that invoked right after the widget is rendered. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkLoad', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkStatusChange | |
| Listen on event that invoked when the page status changes. The function will receive the changed status which will be either online, away or offline. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkStatusChange', (status) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkBeforeLoad | |
| Listen on event that invoked right when Tawk_API is ready to be used and before the widget is rendered. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkBeforeLoad', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkChatMaximized | |
| Listen on event that invoked when the widget is maximized. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkChatMaximized', () => { | |
| // place your code here | |
| }) | |
| ``` | |
| <br/> | |
| ## tawkChatMinimized | |
| Listen on event that invoked when the widget is minimized. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkChatMinimized', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkChatHidden | |
| Listen on event that invoked when the widget is hidden. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkChatHidden', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkChatStarted | |
| Listen on event that invoked when the widget is started. | |
| ```js | |
| this.$tawkMessenger.$on('tawkChatStarted', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkChatEnded | |
| Listen on event that invoked when the widget is ended. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkChatEnded', () => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkPrechatSubmit | |
| Listen on event that invoked when the Pre-Chat Form is submitted. The submitted form data is passed to the function. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkPrechatSubmit', (data) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkOfflineSubmit | |
| Listen on event that invoked when the Offline form is submitted. The submitted form data is passed to the function. Form data will contain {name : ", email : ", message : ", questions : []}. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkOfflineSubmit', (data) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkChatMessageVisitor | |
| Listen on event that invoked when message is sent by the visitor. The message is passed to the function. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkChatMessageVisitor', (message) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkChatMessageAgent | |
| Listen on event that invoked when message is sent by the agent. The message is passed to the function. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkChatMessageAgent', (message) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> | |
| ## tawkChatMessageSystem | |
| Listen on event that invoked when message is sent by the system. The message is passed to the function. This is not supported in pop out chat window. | |
| ```js | |
| this.$tawkMessenger.$on('tawkChatMessageSystem', (message) => { | |
| // place your code here | |
| }); | |
| ``` | |
| <br/> |
Summary
There are users reported collision of provider keys since we use generic naming on our API. I added prefix tawk in all actions, getters, listeners, and setters.
Summary by CodeRabbit