Step 1: Set Required Parameters

1. Go to “Settings” > “WordPress/Website Integration” > “Apps & Plugins” section and specify your WordPress site URL to authorize chats and calls, e.g. “https://my-wordpress.example.com”, without any trailing “/”.

Tip: You can specify multiple website URLs separated by a semicolon, e.g. https://my-site-1.example.com; https://my-site-2.example.com.

2. Access security is implemented via the “Maximum allowed requests per IP Address” field, limiting the number of incoming un-replied chats sent to the 3CX extension in the defined “Request Rate Duration” period.

3. Click on “OK” to save.

Step 2: Configure with Website Code Generator

1. Go to “Settings” > “WordPress/Website Integration” > “Website Code Generator” to customize the parameters for 3CX Live Chat & Talk. Each configuration option is followed by the respective generated parameter and example value(s).

2. “Setup & Authentication”:“3CX PhoneSystem URL” (Read-only) – Verify full HTTPS Phone system URL including port.
–  phonesystem-url=”https://my-pbx.3cx.eu:5001″

“Extension/Queue” (Required) – Friendly name for the extension or queue, retrieved from “Click2Talk/Click2Meet” tab.
–  party=”Support Queue”.

“User Identification Form” – Set to identify the web visitor with name and/or email, or none.
–  authentication=”both” – Allowed values: none, both, email, name.

“Enable on Mobile” – Disable to hide the chatbox on mobile devices.
–  enable-onmobile=”true” – Allowed values: true, false

3. “Application Features”:

“Mode” – enable phone call, chat or phone call and chat.
–  allow-call=”true” – Set to false to disallow calls.

“Enable Video Call” – Set to allow video calls in chat and talk mode.
–  allow-video=”false” – Allowed values: true, false

“Ignore Queue Ownership for Chat & Talk Mode” – Enable to ignore queue ownership when call and/or chat is enabled.
–  ignore-queueownership=”false” – Allowed values: true, false

“Sound Notifications” – Set to enable sound notifications for the visitor on incoming chat messages.
–  allow-soundnotifications=”false” – Allowed values: true, false

“Show Typing Indicator” – Set to notify the visitor when an agent is typing a message. Requires v16 Update 5.
–  show-typing-indicator=”false” – Allowed values: true, false

“Auto Focus” – Set to automatically focus keyboard input to the chat box when visitors open your web site.
–  autofocus=”false” – Allowed values: true, false

4. “Window Options”:

“Chat Box Window Title” – Set the title for the chat window.
–  window-title=”Click here to start a live chat!”

“Chat Box Window Icon URL” – Set the chat box title icon with an image (height 32px) URL.
–  window-icon=”https://<image url>”

“Show Operator name” – Enable to display the name of the PBX extension/queue/agent as the message sender. Requires v16 Update 5.
–  show-operator-actual-name=”true” – Allowed values: true, false

“Operator Display Name” – Personalize the agent’s name if “show-operator-actual-name” is set to “false”.
–  operator-name=”Support”

“Operator Image URL” – Set the operator’s icon with an image (50 x 50 px) URL.
–  operator-icon=”https://<image url>”

“Welcome Message” – Sets the chatbox greeting message.
–  invite-message=”Hello! How can I help you?”

“Pop-out Chat Box Window” – Enable the pop-out chat window.
– Allowed values: true, false

“Load Minimized” – Enable to load the chat box minimized. Enabled by default for visitors on mobile browsers and when “Pop-out Chat Box Window” is enabled.
–  minimized=”false” – Allowed values: true, false

“Show “Powered By 3CX” – enable to display this text in the chatbox.
–  enable-poweredby=”true” – Allowed values: true, false

“Minimized Style” – set the chatbox minimized style to bubble or tab.
–  minimized-style=”bubble”

5. “Window Style”:

“Chat Box Window Position” – set the chatbox location to “Bottom Right” or “Bottom Left”.
–  position: fixed; bottom: 8px; right: 8px;

“Animation Style” – select the animation style
–  animation-style=”fadeIn” – Allowed values: none, fadeIn, slideLeft, slideRight

“Primary Color” – set the HTML color code for the chatbox title background, Minimised/Phone-only mode background, Authentication button, and Text input line.
–  –call-us-form-header-background: #007bc7

“Secondary Color” – set the HTML color code for the chatbox title text and Minimised/Phone-only mode icon.
–  –call-us-header-text-color: #ffffff

“Height (px)” – chat box panel and offline form vertical size in pixels.
–  –call-us-form-height: 500px

“Width (px)” – chat box panel and offline form horizontal size in pixels.
–  –call-us-form-width: 300px

6. “Connect”:

“Facebook Account URL” – set your Facebook account URL to link in the chatbox.
–  Facebook-integration-url=”https://fb.com/myaccount”

“Twitter Account URL” – set your Twitter account URL to link in the chatbox.
–  twitter-integration-url=”https://twitter.com/myaccount”

“Email Address” – set your email address to link in the chatbox.
–  email-integration-url=”myaddress@example.com”

7. Click on “Generate” to save your configuration and display the generated Live Chat & Talk Javascript code.

8. Click on “Copy” to use the generated code in your HTML content.

Step 3: Embed in Your Website

Finally, paste the copied code in your HTML content where you want to display “3CX Live Chat & Talk” on your website. Once added to your HTML content, the 3CX Live Chat and Talk chat box appears on the web page.

Offline Mode

When your associated 3CX extension or queue agents are unavailable or logged out, an offline form is automatically presented to web visitors. Info submitted through the offline form is delivered via chat message to the associated extension or queue agents.