WhatsApp JS
Below is example of how to create button and widget
var buttonOption = {
"name": "Dennis",
"info": {
"number": "0123456789",
"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": "ON",
"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": "14: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",
"backgroundColor": "#962e4a",
"textColor": "#eeee22",
"label": "Chat with me now",
"width": 300,
"height": 64
},
"avatar": "https://wp.test/wp-content/uploads/2021/02/LkFrSynw-filebird-ninja.png",
"options": {
"display": {
"displayCondition": "excludePages",
"includePages": null,
"exceptPages": [],
"showOnDesktop": "ON",
"showOnMobile": "ON",
"time_symbols": "h:m",
"excludePages": [
"806"
]
},
"styles": {
"title": "Sale Support",
"responseText": "The team typically replies in a few hours",
"description": "Need help? Chat with us! <strong>asdasd</strong>",
"backgroundColor": "#1e73be",
"textColor": "#dd9933",
"scrollHeight": "500",
"isShowScroll": "OFF",
"isShowResponseText": "OFF",
"btnLabel": "Chat with us",
"btnLabelWidth": "156",
"btnPosition": "left",
"btnLeftDistance": "120",
"btnRightDistance": "60",
"btnBottomDistance": "105",
"isShowBtnLabel": "OFF",
"isShowGDPR": "ON",
"gdprContent": "<strong><em>Please accept our GDPR policy</em> as</strong><span style=\"text-decoration: underline\"> dasd </span>"
},
"analytics": {
"enabledGoogle": "ON",
"enabledFacebook": "ON"
}
},
"gdprStatus": false,
"defaultAvatar": "https://wp.test/wp-content/plugins/whatsapp/dist/assets/img/whatsapp_logo.svg",
timezone: '+07:00',
i18n: {
"online": "Online",
"offline": "Offline"
}
}
$(document).ready(function() {
$(".nta_wa_button").each(function(i, element){
var id = $(element).data('id')
$(element).njtWhatsAppButton(buttonOption)
})
});
var widgetOption = {
"gdprStatus": "",
"accounts": [
{
"accountId": 926,
"accountName": "Dennis",
"avatar": "",
"number": "0123456789",
"title": "Sale Support",
"predefinedText": "I have a question",
"willBeBackText": "I will be back in [njwa_time_work]",
"dayOffsText": "I will be back soon",
"isAlwaysAvailable": "OFF",
"daysOfWeekWorking": {
"sunday": {
"isWorkingOnDay": "ON",
"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": "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": 485,
"accountName": "Dennis",
"avatar": "",
"number": "+84706060999",
"title": "Sale Support",
"predefinedText": "I need help with, use [njwa_page_title] and [njwa_page_url] shortcodes to output the page's title and URL respectively.",
"willBeBackText": "I will be back in [njwa_time_work]",
"dayOffsText": "I will be back soon",
"isAlwaysAvailable": "OFF",
"daysOfWeekWorking": {
"sunday": {
"isWorkingOnDay": "ON",
"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": "OFF",
"workHours": [
{
"startTime": "08:00",
"endTime": "17:30"
}
]
},
"thursday": {
"isWorkingOnDay": "ON",
"workHours": [
{
"startTime": "08:00",
"endTime": "17:30"
}
]
},
"friday": {
"isWorkingOnDay": "OFF",
"workHours": [
{
"startTime": "08:00",
"endTime": "17:30"
}
]
},
"saturday": {
"isWorkingOnDay": "ON",
"workHours": [
{
"startTime": "08:00",
"endTime": "17:30"
}
]
}
}
}
],
"options": {
"display": {
"displayCondition": "excludePages",
"includePages": null,
"exceptPages": [],
"showOnDesktop": "ON",
"showOnMobile": "ON",
"time_symbols": "h:m",
"excludePages": [
"806"
]
},
"styles": {
"title": "Sale Support",
"responseText": "The team typically replies in a few hours.",
"description": "Hello there <strong>Chat now</strong>",
"backgroundColor": "#1e73be",
"textColor": "#dd9933",
"scrollHeight": "500",
"isShowScroll": "OFF",
"isShowResponseText": "OFF",
"btnLabel": "Chat with me",
"btnLabelWidth": "156",
"btnPosition": "left",
"btnLeftDistance": "120",
"btnRightDistance": "60",
"btnBottomDistance": "105",
"isShowBtnLabel": "OFF",
"isShowGDPR": "ON",
"gdprContent": "<strong><em>Please accept our policy</em> as</strong><span style=\"text-decoration: underline\"> dasd </span>"
},
"analytics": {
"enabledGoogle": "ON",
"enabledFacebook": "ON"
}
},
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>`,
}
$(document).ready(function() {
$("#wa").njtWhatsApp(widgetOption)
accounts: njt_wa.accounts,
});
});
Last modified 1mo ago