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.

Notes:

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.

How To Use Script

Create Widget

To use the WhatsApp widget, follow these steps:

  1. Create an element for the widget to mount:

  2. Load the widget script and styles in your HTML:

  3. Add the following code to your script:

Create Button

PreviousWhatsApp JSNextWhy Upgrade?

Last updated

Was this helpful?