# README
### Widget Options
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 |
| ----------------- | :---------------: | --------------------------------------------------------------------------------------------------- |
| 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. |
* `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.
```javascript
// 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:
| Option | Value | Description |
| ------------- | :---------------: | ---------------------------------------------------- |
| 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. |
**styles**
This sub-property contains options related to the appearance of the widget. It has the following properties:
| Option | Value | Description |
| ------------------ | :-------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |
**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.
| Option | Value | Description |
| --------------- | :---------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |
*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.
| Option | Value | Description |
| ------------ | :---------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. |
```javascript
// Example code
{
options: {
"display": {
"showOnDesktop": "ON",
"showOnMobile": "ON",
"time_symbols": "h:m"
},
"styles": {
"title": "Start a Conversation",
"responseText": "The team typically replies in a few minutes.",
"description": "Hi! Click one of our member below to chat on WhatsApp",
"backgroundColor": "#2db742",
"textColor": "#fff",
"scrollHeight": "500",
"isShowScroll": "OFF",
"isShowResponseText": "OFF",
"isShowPoweredBy": "ON",
"btnLabel": "Need Help? Chat with us",
"btnLabelWidth": "156",
"btnPosition": "right",
"btnLeftDistance": "30",
"btnRightDistance": "30",
"btnBottomDistance": "30",
"isShowBtnLabel": "ON",
"isShowGDPR": "OFF",
"gdprContent": "Please accept our privacy policy first to start a conversation.",
"widgetType": "expandable"
},
"analytics": {
"enabledGoogle": "OFF",
"enabledFacebook": "OFF",
"enabledGoogleGA4": "OFF"
},
},
timezone: "+07:00",
defaultAvatar: ``,
urlSettings: {
"onDesktop": "api",
"onMobile": "api",
"openInNewTab": "ON"
}
}
```
## How To Use Script
### Create Widget
To use the WhatsApp widget, follow these steps:
1. Create an element for the widget to mount:
```html
```
2. Load the widget script and styles in your HTML:
```html
```
3. Add the following code to your script:
```javascript
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 few minutes.",
"description": "Hi! Click one of our member below to chat on WhatsApp",
"backgroundColor": "#2db742",
"textColor": "#fff",
"scrollHeight": "500",
"isShowScroll": "OFF",
"isShowResponseText": "OFF",
"isShowPoweredBy": "ON",
"btnLabel": "Need Help? Chat with us",
"btnLabelWidth": "156",
"btnPosition": "right",
"btnLeftDistance": "30",
"btnRightDistance": "30",
"btnBottomDistance": "30",
"isShowBtnLabel": "ON",
"isShowGDPR": "OFF",
"gdprContent": "Please accept our privacy policy first to start a conversation.",
"widgetType": "expandable"
},
"analytics": {
"enabledGoogle": "OFF",
"enabledFacebook": "OFF",
"enabledGoogleGA4": "OFF"
},
},
timezone: "+07:00",
defaultAvatar: ``,
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
```javascript
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: ``,
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 few minutes.",
description: "Hi! Click one of our member below to chat on WhatsApp",
backgroundColor: "#2db742",
textColor: "#fff",
scrollHeight: "500",
isShowScroll: "OFF",
isShowResponseText: "OFF",
isShowPoweredBy: "ON",
btnLabel: "Need Help? Chat with us",
btnLabelWidth: "156",
btnPosition: "right",
btnLeftDistance: "30",
btnRightDistance: "30",
btnBottomDistance: "30",
isShowBtnLabel: "ON",
isShowGDPR: "OFF",
gdprContent: 'Please accept our privacy policy 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);
});
})
})
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ninjateam.gitbook.io/whatsapp-for-wordpress/developer-zone/whatsapp-js/readme.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.