This object contains options for customizing the WhatsApp floating widget. It has six main properties: gdprStatus, accounts, timezone, defaultAvatar, urlSettings and options.
gdprStatus
This property is used to set the GDPR status of the user. It is currently not used in the script you provided, so it can be left empty.
Note: The field "gdprStatus" is optional and has a default value of empty. If you want to indicate GDPR compliance, set the value to "1".
accounts
This property is an array of WhatsApp accounts that will be displayed in the floating widget. Each account has the following properties:
Option
Type
Description
daysOfWeekWorking: Each day has the following properties:
isWorkingOnDay: whether the account is working on this day.
workHours: an array of objects that specify the start and end times for each working period on this day. Each object has the following properties:
startTime: the start time of the working period, in HH:mm format.
endTime: the end time of the working period, in HH:mm format.
// Example code[{"accountId":1,"accountName":"Dennis","avatar":"","number":"+14203030923","title":"Support","predefinedText":"Chat on WhatsApp [njwa_page_title] in page: [njwa_page_url]","willBeBackText":"I will be back in [njwa_time_work]","dayOffsText":"I will be back soon","isAlwaysAvailable":"OFF","daysOfWeekWorking": {"sunday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"monday": {"isWorkingOnDay":"ON","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"tuesday": {"isWorkingOnDay":"ON","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"wednesday": {"isWorkingOnDay":"ON","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"thursday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"friday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"saturday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] } } }, {"accountId":2,"accountName":"Tommy","avatar":"","number":"+4302422121322","title":"Director","predefinedText":"We order [njwa_page_title] and [njwa_page_url]. Give me an advice?","willBeBackText":"I will be back in [njwa_time_work]","dayOffsText":"I will be back soon","isAlwaysAvailable":"ON","daysOfWeekWorking": {"sunday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"monday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"tuesday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"wednesday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"thursday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"friday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"saturday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] } } }]
Notes:
"[njwa_time_work]" is the shortcode to display the time when he is offline.
"[njwa_page_title]" displays the page title of the current page he clicks on in the account.
"[njwa_page_url]" adds the current URL to the WhatsApp message.
options
This property is an object that contains various options for customizing the appearance and behavior of the widget. It has three sub-properties: display, styles, and analytics.
display
This sub-property contains options related to when and where the widget is displayed. It has the following properties:
styles
This sub-property contains options related to the appearance of the widget. It has the following properties:
analytics
The analytics field is an optional parameter that can be used to enable analytics tracking for the chat widget. This field contains two sub-fields, enabledGoogle and enabledFacebook, which can be set to either "ON" or "OFF" depending on whether you want to enable tracking for Google Analytics or Facebook Pixel respectively.
Note: that if both enabledGoogle and enabledFacebook are set to "OFF", no analytics tracking will be performed. Also, enabling tracking for these analytics services requires setting up accounts and configuring the tracking code appropriately.
timezone
The timezone field sets the default timezone for the widget, which is used to display the time of messages and events within the widget.
In this case, the timezone is set to +07:00, which represents the time zone for Bangkok, Thailand.
defaultAvatar
The defaultAvatar field sets the default avatar image for users who do not have a profile picture.
In this case, the default avatar is a SVG image of a green circle with a white phone icon in the center.
urlSettings
The urlSettings field sets various options related to how links within the widget should behave.
// Example code{ options: {"display": {"showOnDesktop":"ON","showOnMobile":"ON","time_symbols":"h:m" },"styles": {"title":"Start a Conversation","responseText":"The team typically replies in a <strong>few minutes</strong>.","description":"Hi! Click one of our member below to chat on <strong>WhatsApp</strong>","backgroundColor":"#2db742","textColor":"#fff","scrollHeight":"500","isShowScroll":"OFF","isShowResponseText":"OFF","isShowPoweredBy":"ON","btnLabel":"Need Help? <strong>Chat with us</strong>","btnLabelWidth":"156","btnPosition":"right","btnLeftDistance":"30","btnRightDistance":"30","btnBottomDistance":"30","isShowBtnLabel":"ON","isShowGDPR":"OFF", "gdprContent": "Please accept our <a href=\"https://ninjateam.org/privacy-policy/\">privacy policy</a> first to start a conversation.",
"widgetType":"expandable" },"analytics": {"enabledGoogle":"OFF","enabledFacebook":"OFF","enabledGoogleGA4":"OFF" }, }, timezone:"+07:00", defaultAvatar: `<svg width="48px" height="48px" class="nta-whatsapp-default-avatar" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path style="fill:#EDEDED;" d="M0,512l35.31-128C12.359,344.276,0,300.138,0,254.234C0,114.759,114.759,0,255.117,0
S512,114.759,512,254.234S395.476,512,255.117,512c-44.138,0-86.51-14.124-124.469-35.31L0,512z"/> <pathstyle="fill:#55CD6C;"d="M137.71,430.786l7.945,4.414c32.662,20.303,70.621,32.662,110.345,32.662 c115.641,0,211.862-96.221,211.862-213.628S371.641,44.138,255.117,44.138S44.138,137.71,44.138,254.234 c0,40.607,11.476,80.331,32.662,113.876l5.297,7.945l-20.303,74.152L137.71,430.786z"/> <pathstyle="fill:#FEFEFE;"d="M187.145,135.945l-16.772-0.883c-5.297,0-10.593,1.766-14.124,5.297 c-7.945,7.062-21.186,20.303-24.717,37.959c-6.179,26.483,3.531,58.262,26.483,90.041s67.09,82.979,144.772,105.048
c24.717,7.062,44.138,2.648,60.028-7.062c12.359-7.945,20.303-20.303,22.952-33.545l2.648-12.359 c0.883-3.531-0.883-7.945-4.414-9.71l-55.614-25.6c-3.531-1.766-7.945-0.883-10.593,2.648l-22.069,28.248 c-1.766,1.766-4.414,2.648-7.062,1.766c-15.007-5.297-65.324-26.483-92.69-79.448c-0.883-2.648-0.883-5.297,0.883-7.062
l21.186-23.834c1.766-2.648,2.648-6.179,1.766-8.828l-25.6-57.379C193.324,138.593,190.676,135.945,187.145,135.945"/>
</svg>`, urlSettings: { "onDesktop": "api","onMobile": "api","openInNewTab": "ON" }}
var widgetOption = { gdprStatus:"", accounts: [{"accountId":1,"accountName":"Dennis","avatar":"","number":"+14203030923","title":"Support","predefinedText":"Chat on WhatsApp [njwa_page_title] in page: [njwa_page_url]","willBeBackText":"I will be back in [njwa_time_work]","dayOffsText":"I will be back soon","isAlwaysAvailable":"OFF","daysOfWeekWorking": {"sunday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"monday": {"isWorkingOnDay":"ON","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"tuesday": {"isWorkingOnDay":"ON","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"wednesday": {"isWorkingOnDay":"ON","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"thursday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"friday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"saturday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] } } }, {"accountId":2,"accountName":"Tommy","avatar":"","number":"+4302422121322","title":"Director","predefinedText":"We order [njwa_page_title] and [njwa_page_url]. Give me an advice?","willBeBackText":"I will be back in [njwa_time_work]","dayOffsText":"I will be back soon","isAlwaysAvailable":"ON","daysOfWeekWorking": {"sunday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"monday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"tuesday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"wednesday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"thursday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"friday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] },"saturday": {"isWorkingOnDay":"OFF","workHours": [{"startTime":"08:00","endTime":"17:30" }] } } } ], options: {"display": {"showOnDesktop":"ON","showOnMobile":"ON","time_symbols":"h:m" },"styles": {"title":"Start a Conversation","responseText":"The team typically replies in a <strong>few minutes</strong>.","description":"Hi! Click one of our member below to chat on <strong>WhatsApp</strong>","backgroundColor":"#2db742","textColor":"#fff","scrollHeight":"500","isShowScroll":"OFF","isShowResponseText":"OFF","isShowPoweredBy":"ON","btnLabel":"Need Help? <strong>Chat with us</strong>","btnLabelWidth":"156","btnPosition":"right","btnLeftDistance":"30","btnRightDistance":"30","btnBottomDistance":"30","isShowBtnLabel":"ON","isShowGDPR":"OFF", "gdprContent": "Please accept our <a href=\"https://ninjateam.org/privacy-policy/\">privacy policy</a> first to start a conversation.",
"widgetType":"expandable" },"analytics": {"enabledGoogle":"OFF","enabledFacebook":"OFF","enabledGoogleGA4":"OFF" }, }, timezone:"+07:00", defaultAvatar: `<svg width="48px" height="48px" class="nta-whatsapp-default-avatar" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path style="fill:#EDEDED;" d="M0,512l35.31-128C12.359,344.276,0,300.138,0,254.234C0,114.759,114.759,0,255.117,0
S512,114.759,512,254.234S395.476,512,255.117,512c-44.138,0-86.51-14.124-124.469-35.31L0,512z"/> <path style="fill:#55CD6C;" d="M137.71,430.786l7.945,4.414c32.662,20.303,70.621,32.662,110.345,32.662
c115.641,0,211.862-96.221,211.862-213.628S371.641,44.138,255.117,44.138S44.138,137.71,44.138,254.234
c0,40.607,11.476,80.331,32.662,113.876l5.297,7.945l-20.303,74.152L137.71,430.786z"/> <path style="fill:#FEFEFE;" d="M187.145,135.945l-16.772-0.883c-5.297,0-10.593,1.766-14.124,5.297 c-7.945,7.062-21.186,20.303-24.717,37.959c-6.179,26.483,3.531,58.262,26.483,90.041s67.09,82.979,144.772,105.048
c24.717,7.062,44.138,2.648,60.028-7.062c12.359-7.945,20.303-20.303,22.952-33.545l2.648-12.359 c0.883-3.531-0.883-7.945-4.414-9.71l-55.614-25.6c-3.531-1.766-7.945-0.883-10.593,2.648l-22.069,28.248
c-1.766,1.766-4.414,2.648-7.062,1.766c-15.007-5.297-65.324-26.483-92.69-79.448c-0.883-2.648-0.883-5.297,0.883-7.062
l21.186-23.834c1.766-2.648,2.648-6.179,1.766-8.828l-25.6-57.379C193.324,138.593,190.676,135.945,187.145,135.945"/>
</svg>`, urlSettings: { "onDesktop": "api", "onMobile": "api", "openInNewTab": "ON" }}document.addEventListener("DOMContentLoaded", function() { njtWhatsApp.ready(function() { // #wa is the element we created in step 1. njtWhatsApp.createWidget(document.querySelector("#wa"), widgetOption); })})
Create Button
var buttonOption = { name:"Dennis", info: { number:"+123456789", title:"Sale Support", predefinedText: "Hello, I need help with [njwa_page_title] and [njwa_page_url] shortcodes to output the page's title and URL respectively.",
willBeBackText:"I will be back in time [njwa_time_work]", dayOffsText:"I will be back soon", isAlwaysAvailable:"OFF", daysOfWeekWorking: { sunday: { isWorkingOnDay:"OFF", workHours: [ { startTime:"14:00", endTime:"17:30", }, { startTime:"02:30", endTime:"09:00", }, { startTime:"03:00", endTime:"10:00", }, ], }, monday: { isWorkingOnDay:"ON", workHours: [ { startTime:"21:00", endTime:"17:30", }, { startTime:"03:30", endTime:"17:30", }, ], }, tuesday: { isWorkingOnDay:"OFF", workHours: [ { startTime:"14:00", endTime:"17:30", }, ], }, wednesday: { isWorkingOnDay:"ON", workHours: [ { startTime:"15:00", endTime:"17:30", }, ], }, thursday: { isWorkingOnDay:"ON", workHours: [ { startTime:"14:00", endTime:"17:30", }, ], }, friday: { isWorkingOnDay:"ON", workHours: [ { startTime:"14:00", endTime:"17:30", }, ], }, saturday: { isWorkingOnDay:"OFF", workHours: [ { startTime:"14:00", endTime:"17:30", }, ], }, }, }, styles: { type:"square",// round | square backgroundColor:"#962e4a", textColor:"#eeee22", label:"Chat with me", width:300, height:64, }, avatar:"https://wp.test/wp-content/uploads/2021/02/LkFrSynw-filebird-ninja.png", options: { showOnDesktop:"ON", showOnMobile:"ON", time_symbols:"h:m", }, gdprStatus:"1", defaultAvatar: `<svg width="48px" height="48px" class="nta-whatsapp-default-avatar" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path style="fill:#EDEDED;" d="M0,512l35.31-128C12.359,344.276,0,300.138,0,254.234C0,114.759,114.759,0,255.117,0
S512,114.759,512,254.234S395.476,512,255.117,512c-44.138,0-86.51-14.124-124.469-35.31L0,512z"/> <path style="fill:#55CD6C;" d="M137.71,430.786l7.945,4.414c32.662,20.303,70.621,32.662,110.345,32.662
c115.641,0,211.862-96.221,211.862-213.628S371.641,44.138,255.117,44.138S44.138,137.71,44.138,254.234
c0,40.607,11.476,80.331,32.662,113.876l5.297,7.945l-20.303,74.152L137.71,430.786z"/> <path style="fill:#FEFEFE;" d="M187.145,135.945l-16.772-0.883c-5.297,0-10.593,1.766-14.124,5.297
c-7.945,7.062-21.186,20.303-24.717,37.959c-6.179,26.483,3.531,58.262,26.483,90.041s67.09,82.979,144.772,105.048
c24.717,7.062,44.138,2.648,60.028-7.062c12.359-7.945,20.303-20.303,22.952-33.545l2.648-12.359 c0.883-3.531-0.883-7.945-4.414-9.71l-55.614-25.6c-3.531-1.766-7.945-0.883-10.593,2.648l-22.069,28.248
c-1.766,1.766-4.414,2.648-7.062,1.766c-15.007-5.297-65.324-26.483-92.69-79.448c-0.883-2.648-0.883-5.297,0.883-7.062
l21.186-23.834c1.766-2.648,2.648-6.179,1.766-8.828l-25.6-57.379C193.324,138.593,190.676,135.945,187.145,135.945"/>
</svg>`, timezone: "+07:00", i18n: { online: "Online", offline: "Offline", }, options: { display: { showOnDesktop: "ON", showOnMobile: "ON", time_symbols: "h:m", }, styles: { title: "Start a Conversation", responseText: "The team typically replies in a <strong>few minutes</strong>.", description: "Hi! Click one of our member below to chat on <strong>WhatsApp</strong>", backgroundColor: "#2db742", textColor: "#fff", scrollHeight: "500", isShowScroll: "OFF", isShowResponseText: "OFF", isShowPoweredBy: "ON", btnLabel: "Need Help? <strong>Chat with us</strong>", btnLabelWidth: "156", btnPosition: "right", btnLeftDistance: "30", btnRightDistance: "30", btnBottomDistance: "30", isShowBtnLabel: "ON", isShowGDPR: "OFF", gdprContent: 'Please accept our <a href="https://ninjateam.org/privacy-policy/">privacy policy</a> first to start a conversation.',
}, analytics: { enabledGoogle: "OFF", enabledFacebook: "OFF", enabledGoogleGA4: "OFF", }, }, urlSettings: { onDesktop: "api", onMobile: "api", openInNewTab: "ON", },};document.addEventListener("DOMContentLoaded", function () { njtWhatsApp.ready(function () { document.querySelectorAll(".nta_wa_button").forEach(function (element) { njtWhatsApp.createButton(element, buttonOption); }); })})
Option
Value
Description
Option
Value
Description
Option
Value
Description
Option
Value
Description
accountId
number
a unique identifier for the account.
accountName
text
the name of the WhatsApp account.
avatar
link
the URL of the avatar image for the account.
number
phone number
the phone number associated with the account.
title
text
the title to display for the account in the widget.
predefinedText
text
the default message to be sent when the user clicks the account.
willBeBackText
text
the message to be displayed when the user sends a message outside of the account's working hours.
dayOffsText
text
the message to be displayed when the user sends a message on a day when the account is not working.
isAlwaysAvailable
'ON' | 'OFF'
whether the account is always available for messaging, regardless of its working hours.
daysOfWeekWorking
array object
an array object that specifies the working hours for the account on each day of the week.
showOnDesktop
'ON' | 'OFF'
whether to display the widget on desktop devices.
showOnMobile
'ON' | 'OFF'
whether to display the widget on mobile devices.
time_symbols
h:m
the time format to use for displaying working hours.
title
text
This field specifies the title of the chat widget that will be displayed to the user.
responseText
'text' | 'html'
This field specifies the default response time that the user can expect when they initiate a chat.
description
'text' | 'html'
This field specifies the introductory text that will be displayed to the user in the chat widget. In this case, the text is "Hello there" with the words "Chat now" in bold.
backgroundColor
color
This field specifies the background color of the chat widget.
textColor
color
This field specifies the text color of the chat widget.
isShowScroll
'ON' | 'OFF'
This field specifies whether or not a scroll bar should be displayed when the chat history exceeds the maximum height.
scrollHeight
number
This field specifies the maximum height of the chat window. If the chat history exceeds this height, the window will become scrollable.
isShowResponseText
'ON' | 'OFF'
This field specifies whether or not the default response time text should be displayed in the chat widget.
btnLabel
text
This field specifies the label that will be displayed on the chat button that the user clicks to initiate a chat.
btnLabelWidth
number
This field specifies the width of the chat button.
btnPosition
'left' | 'right'
This field specifies the position of the chat button. In this case, the button will be positioned to the left of the chat widget.
btnLeftDistance
number
This field specifies the distance between the left edge of the chat widget and the left edge of the chat button.
btnRightDistance
number
This field specifies the distance between the right edge of the chat widget and the right edge of the chat button.
btnBottomDistance
number
This field specifies the distance between the bottom edge of the chat widget and the bottom edge of the chat button.
isShowBtnLabel
'ON' | 'OFF'
This field specifies whether or not the chat button label should be displayed.
isShowGDPR
'ON' | 'OFF'
This field specifies whether or not a GDPR (General Data Protection Regulation) notice should be displayed in the chat widget.
gdprContent
'text' | 'html'
This field specifies the text that will be displayed in the GDPR notice. In this case, the text asks the user to accept a policy and includes an underline.
enabledGoogle
'ON' | 'OFF'
The enabledGoogle sub-field determines whether tracking for Google Analytics is enabled. If set to "ON", tracking for Google Analytics will be enabled and data will be sent to your Google Analytics account. If set to "OFF", tracking for Google Analytics will be disabled.
enabledFacebook
'ON' | 'OFF'
The enabledFacebook sub-field determines whether tracking for Facebook Pixel is enabled. If set to "ON", tracking for Facebook Pixel will be enabled and data will be sent to your Facebook Pixel account. If set to "OFF", tracking for Facebook Pixel will be disabled.
onDesktop
'api' | 'web'
The onDesktop and onMobile options specify the URL scheme to use when opening links on desktop and mobile devices, respectively. In this case, both are set to "api", which suggests that links should be opened using a JavaScript API.
onMobile
'api' | 'protocol'
The onDesktop and onMobile options specify the URL scheme to use when opening links on desktop and mobile devices, respectively. In this case, both are set to "api", which suggests that links should be opened using a JavaScript API.
openInNewTab
'ON' | 'OFF'
The openInNewTab option specifies whether links should be opened in a new browser tab. In this case, it is set to "ON", which suggests that links should be opened in a new tab.
