Welcome to the tawk.to JavaScript API documentation.
The API provides a flexible set of methods that can be used in your web projects. To invoke one of the methods below, please be sure to call a method after the embed code on your page.
Use the JavaScript API to manipulate the chat widget displayed on your website.
- API Reference
- Table of contents
- onLoad
- onStatusChange
- onBeforeLoad
- onChatMaximized
- onChatMinimized
- onChatHidden
- onChatStarted
- onChatEnded
- onPrechatSubmit
- onOfflineSubmit
- onChatMessageVisitor
- onChatMessageAgent
- onChatMessageSystem
- onAgentJoinChat
- onAgentLeaveChat
- onChatSatisfaction
- onVisitorNameChanged
- onFileUpload
- onTagsUpdated
- onUnreadCountChanged
- visitor
- maximize
- minimize
- toggle
- popup
- getWindowType
- showWidget
- hideWidget
- toggleVisibility
- getStatus
- isChatMaximized
- isChatMinimized
- isChatHidden
- isChatOngoing
- isVisitorEngaged
- onLoaded
- onBeforeLoaded
- widgetPosition
- endChat
- setAttributes
- addEvent
- addTags
- removeTags
- secureMode
- customstyle
Callback function invoked right after the widget is rendered. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnLoad() {
// place your code here
}
Callback function invoked when the page status changes. The function will receive the changed status which will be either online, away or offline. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnStatusChange(status) {
// place your code here
}
Callback function invoked right when Tawk_API is ready to be used and before the widget is rendered. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnBeforeLoad() {
// place your code here
}
Callback function invoked when the widget is maximized. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatMaximized() {
// place your code here
}
Callback function invoked when the widget is minimized. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatMaximized() {
// place your code here
}
onChatHidden
Callback function invoked when the widget is hidden. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatHidden() {
// place your code here
}
Callback function invoked when the widget is started.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatStarted() {
// place your code here
}
Callback function invoked when the widget is ended. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatEnded() {
// place your code here
}
Callback function invoked when the Pre-Chat Form is submitted. The submitted form data is passed to the function. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnPrechatSubmit(data) {
// place your code here
}
Callback function 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 callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnOfflineSubmit(data) {
// place your code here
}
Callback function invoked when message is sent by the visitor. The message is passed to the function. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatMessageVisitor(message) {
// place your code here
}
Callback function invoked when message is sent by the agent. The message is passed to the function. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatMessageAgent(message) {
// place your code here
}
Callback function invoked when message is sent by the system. The message is passed to the function. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatMessageSystem(message) {
// place your code here
}
Callback function invoked when an agent joins the chat. The data is passed to the function. Will contain {name : ”, position : ”, image : ”, id : ”}. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnAgentJoinChat(data) {
// place your code here
}
Callback function invoked when an agent leaves the chat. The data is passed to the function. Will contain {name : ”, id : ”}. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnAgentLeaveChat(data) {
// place your code here
}
Callback function invoked when an agent leaves the chat. The satisfaction is passed to the function. -1 = dislike | 0 = neutral | 1 = like. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnChatSatisfaction(satisfaction) {
// place your code here
}
Callback function invoked when the visitor manually changes his name. The visitorName is passed to the function. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnVisitorNameChanged(visitorName) {
// place your code here
}
Callback function invoked when a file is uploaded. The link to the uploaded file is passed to the function. This callback is not supported in pop out chat window.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnFileUpload(link) {
// place your code here
}
Callback function invoked when a tag is updated.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnTagsUpdated(data) {
// place your code here
}
Callback function returns count of unread messages.
app/components/my-component.hbs
app/components/my-component.js
@action
handleOnUnreadCountChanged(count) {
// place your code here
}
Object used to set the visitor name and email. Do not place this object in a function, as the values need to be available before the widget script is downloaded.
Setting or changing the values after the widget script has been downloaded will not send the values to the dashboard.
If the name and email will not be available on load time (eg single page app, ajax login), then use the setAttributes function instead.
this.tawkMessenger.visitor({
name : 'Name',
email : '[email protected]'
});
Maximizes the chat widget.
this.tawkMessenger.maximize();
// Example
@action
handleOnLoad() {
this.tawkMessenger.maximize();
}
Minimizes the chat widget.
this.tawkMessenger.minimize();
// Example
@action
handleOnLoad() {
this.tawkMessenger.minimize();
}
Minimizes or Maximizes the chat widget based on the current state.
this.tawkMessenger.toggle();
// Example
@action
handleOnLoad() {
this.tawkMessenger.toggle();
}
Opens the chat widget as a pop out.
this.tawkMessenger.popup();
// Example
@action
handleOnLoad() {
this.tawkMessenger.popup();
}
Returns the current widget type whether it’s inline or embed.
this.tawkMessenger.getWindowType();
// Example
@action
handleOnLoad() {
if (this.tawkMessenger.getWindowType() === 'inline') {
// do something if it's inline
} else {
// do something if it's embed
}
}
Shows the chat widget.
this.tawkMessenger.showWidget();
// Example
@action
handleOnLoad() {
this.tawkMessenger.showWidget();
}
Hides the chat widget.
this.tawkMessenger.hideWidget();
// Example
@action
handleOnLoad() {
this.tawkMessenger.hideWidget();
}
Hides or Shows the widget based on the current visibility state.
this.tawkMessenger.toggleVisibility();
// Example
@action
handleOnLoad() {
this.tawkMessenger.toggleVisibility();
}
Returns the current page status (online, away or offline).
this.tawkMessenger.getStatus();
// Example
@action
handleOnLoad() {
const pageStatus = this.tawkMessenger.getStatus();
if (pageStatus === 'online') {
// do something for online
} else if (pageStatus === 'away') {
// do something for away
} else {
// do something for offline
}
}
Returns a boolean value (true or false) indicating whether the chat widget is maximized.
this.tawkMessenger.isChatMaximized();
// Example
@action
handleOnLoad() {
if (this.tawkMessenger.isChatMaximized()) {
// do something it it's maximized
}
}
Returns a boolean value (true or false) indicating whether the chat widget is minimized.
this.tawkMessenger.isChatMinimized();
// Example
@action
handleOnLoad() {
if (this.tawkMessenger.isChatMinimized()) {
// do something if it's minimized
}
}
isChatHidden
Returns a boolean value (true or false) indicating whether the chat widget is hidden.
this.tawkMessenger.isChatHidden();
// Example
@action
handleOnLoad() {
if (this.tawkMessenger.isChatHidden()) {
// do something if chat widget is hidden
}
}
Returns a boolean value (true or false) indicating whether currently there is an ongoing chat.
this.tawkMessenger.isChatOngoing();
// Example
@action
handleOnLoad() {
if (this.tawkMessenger.isChatOngoing()) {
// do something if there's ongoing chat
}
}
Returns a boolean value (true or false) indicating whether the visitor is currently chatting or has requested a chat.
this.tawkMessenger.isVisitorEngaged();
// Example
@action
handleOnLoad() {
if (this.tawkMessenger.isVisitorEngaged()) {
// do something if visitor engaged in chat
}
}
Returns a boolean value (true or undefined) indicating when the plugin is ready.
this.tawkMessenger.onLoaded();
// Example
if (this.tawkMessenger.onLoaded()) {
// do something when widget is ready
}
Returns a boolean value (true or undefined) indicating when plugin is initialized.
this.tawkMessenger.onBeforeLoaded();
// Example
if (this.tawkMessenger.onBeforeLoaded()) {
// do something before onload
}
Returns a string for current position of the widget.
this.tawkMessenger.widgetPosition();
// Example
@action
handleOnLoad() {
if (this.tawkMessenger.widgetPosition() === 'br') {
// do something if the widget is at bottom right
}
}
Ends the current ongoing chat.
this.tawkMessenger.endChat();
// Example
@action
handleOnLoad() {
this.tawkMessenger.endChat();
}
Sets custom metadata regarding this chat/visitor.
This function takes in two values: attribute and callback.
The attribute value is of the object data type, which is a key-value pair.
The key is of the string data type and can contain only alphanumeric characters and ‘-‘ (dash).
You can also use this function to set the visitor's name and email. However, you will need to enable the secure mode first and also supply the calculated hash value in this function.
Refer to the secure mode section below on how to do this.
The reason for enabling secure mode is to safeguard data integrity — to ensure the value sent from the widget to the dashboard is true and has not been tampered with.
The callback, which is a function, will be invoked to notify whether the save failed.
Error messages returned:
- INVALID_ATTRIBUTES: No attributes were sent
- SESSION_EXPIRED: The visitor’s current session has expired
- SERVER_ERROR: Internal server error
- ACCESS_ERROR: Error in accessing the page
- ATTRIBUTE_LIMIT_EXCEEDED: Total custom attributes (excluding name, email and hash) is 50
- CONTAINS_INVALID_KEY: Custom key is not alphanumeric or dash (keys will be lower case)
- CONTAINS_INVALID_VALUE: Custom value is empty or the total length is more than 255 characters
this.tawkMessenger.setAttributes(attributes, callback);
// Example
@action
handleOnLoad() {
this.tawkMessenger.setAttributes({
id : 'A1234',
store : 'Midvalley'
}, function(error) {
// do something if error
});
}
// Example for setting name and email
@action
handleOnLoad() {
this.tawkMessenger.setAttributes({
name : 'Name',
email : '[email protected]',
hash : 'hash value'
}, function(error) {
// do something if error
});
}
Sets a custom event to chat. This function takes in 3 values: event name, optional metadata and callback.
The event name is of the string data type and can contain only alphanumeric characters and ‘-‘ (dash)
The callback which is a function will be invoked to notify whether the save failed.
INVALID_EVENT_NAME, INVALID_ATTRIBUTES, ATTRIBUTE_LIMIT_EXCEEDED, CONTAINS_INVALID_KEY, CONTAINS_INVALID_VALUE, SESSION_EXPIRED, SERVER_ERROR
this.tawkMessenger.addEvent(eventName, metaData, callback);
// Example
@action
handleOnLoad() {
this.tawkMessenger.addEvent(
'requested-quotation',
function(error) {
// do something if error
}
);
this.tawkMessenger.addEvent(
'product-add-to-cart',
{
sku : 'A0012',
name : 'Jeans',
price : '50'
},
function(error) {
// do something if error
}
);
}
Adds tags to the chat. This function takes in two values: tags and callback. This is of the array data type. The content of the tags should be of the string data type.
The total number of tags is 10. The callback, which is a function, will be invoked to notify whether the save failed.
INVALID_TAGS, TAG_LIMIT_EXCEEDED, VERSION_CONFLICT, SESSION_EXPIRED, SERVER_ERROR
this.tawkMessenger.addTags(tags, callback);
// Example
@action
handleOnLoad() {
this.tawkMessenger.addTags(
[
'hello',
'world'
],
function(error) {
// do something if error
}
);
}
Removes tags from the chat. This function takes in two values: tags and callback. This is of the array data type. The content of the tags should be of the string data type.
The callback, which is a function, will be invoked to notify whether the save failed.
INVALID_TAGS, TAG_LIMIT_EXCEEDED, SESSION_EXPIRED, SERVER_ERROR
this.tawkMessenger.removeTags(tags, callback);
// Example
@action
handleOnLoad() {
this.tawkMessenger.removeTags(
[
'hello',
'world'
],
function (error) {
// do something if error
}
);
}
Secure method ensures the data you are sending is actually from you.
To enable secure mode, embed the following code on your page.
The hash is server side generated HMAC using SHA256, the user’s email and your site’s API key.
You can get your API key from Admin>Property Settings.
this.tawkMessenger.visitor({
name : 'Name',
email : '[email protected]',
hash : '<calculate-hash>'
})
Object used to update the widget styling. Currently only supports zIndex style. Do not place this object in a function, as the values need to be available before the widget script is downloaded. Setting or changing the values after the widget script has been downloaded will not update the widget’s style.
module.exports = function (environment) {
let ENV = {
...
tawkMessenger : {
customStyle : {
zIndex : Integer | String
}
}
...
}
};
// Example
module.exports = function (environment) {
let ENV = {
...
tawkMessenger : {
customStyle : {
zIndex : 1000
}
}
...
}
};
module.exports = function (environment) {
let ENV = {
...
tawkMessenger : {
customStyle : {
zIndex : '1000'
}
}
...
}
};
module.exports = function (environment) {
let ENV = {
...
tawkMessenger : {
customStyle : {
zIndex : '1000 !important'
}
}
...
}
};
module.exports = function (environment) {
let ENV = {
...
tawkMessenger : {
customStyle : {
visibility : {
dekstop : {
xOffset : String | Integer, // '20' || 20
yOffset : String | Integer,
position : '' // 'br', 'bl', 'cr', 'cl', 'tr', 'tl'
},
mobile : {
xOffset : String | Integer, // '20' || 20
yOffset : String | Integer,
position : '' // 'br', 'bl', 'cr', 'cl', 'tr', 'tl'
}
}
}
}
...
}
};
// Example
module.exports = function (environment) {
let ENV = {
...
tawkMessenger : {
customStyle : {
visibility : {
dekstop : {
xOffset : '15',
yOffset : '15',
position : 'cr'
},
mobile : {
xOffset : 15,
yOffset : 15,
position : 'bl'
}
}
}
}
...
}
};