3CX: Installing the 3CX Live Chat and Talk Plugin for WordPress

3CX: Installing the 3CX Live Chat and Talk Plugin for WordPress

Introduction


The “3CX Live Chat and Talk” plugin enables your WordPress site visitors to talk and chat directly with you via the latest 3CX PBX. Calls from website visitors are forwarded to your PBX using WebRTC (Web Real-Time Communication) technology, free of any charges.


Install and Configure Plugin

To install the “3CX Live Chat and Talk” plugin on your WordPress site:

  1. Login to WordPress and go to “Plugins” > “Add New”.




2. Search for “3CX Live Chat and Talk” and click on “Install Now.

3. When the installation completes, click on “Activate” to enable the plugin on your WordPress site.




4. Switch to the 3CX “Management Console” > “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-0.example.com; https://my-site-1.example.com

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

6. Click on “OK” to save your settings in the 3CX Management Console.


Create a “Live Chat & Talk” Item

After installing and configuring the “3CX Live Chat and Talk” plugin on your WordPress site, you need to start creating “Live Chat & Talk” items. These can be used in specific pages or posts or even site-wide to enable you to chat, call, and video call with your WordPress site’s visitors. To create a “Live Chat & Talk” item:

1. In your WordPress site administration panel, click on the “3CX Live Chat & Talk” sidebar link and then on “Add New” to create a new “Live Chat & Talk” item.



2. Set the name for the new “Live Chat & Talk” item.

3. Use the “Configuration” tab to set these options:

  • “3CX Click2Talk URL” – use the “Click2Talk URL” from the “Click2Talk/Click2Meet” tab for the extension or queue in the 3CX Management Console, assigned to handle the incoming chat messages, e.g.  https://my-pbx.3cx.eu/callus#sales
  • “Mode” – enable phone call, chat, phone call, and chat, and optionally ignore queue ownership for phone and video calls.
  • “Enable video call” – website visitors can alternatively initiate a video call instead of an audio call.
  • “Chatbox window title” – the panel title for the chatbox.
  • “Chatbox window icon” – set the chat box window icon by uploading an image (height 32px) or using a URL.
  • “Show Operator Name” – enable to display the name of the PBX extension/queue/agent as the message sender. Requires v16 Update 5.
  • “Operator Static Name” – text to display to visitors as the message sender, if “Show Operator Name” is disabled.
  • “Operator image” – leave empty for the default operator icon or set by uploading an image (50 x 50 px) or using a URL.
  • “Welcome message” – the welcome chat message automatically displayed to website visitors using the panel.
  • “Phone call hovers text” – the hint text appearing when hovering over the phone icon when “Phone only” mode is configured.
  • “User identification form” – choose to ask visitors for their Name and/or Email before a chat or call session.
  • “Pop-out” – enable visitors to open the chatbox as a pop-out window.
  • “Enable on mobile” – enable the chatbox to be visible on mobile devices.
  • “Sound notifications” – enable sound notifications for the visitor.
  • “Show typing indicator” – enable to notify the visitor when an agent is typing a message. Requires v16 Update 5.
  • “Autofocus” – automatically focuses keyboard input to the chatbox when visitors open your website.


4. On the “Style” tab, use these fields to customize the plugin’s appearance on your WordPress site:

  • “Primary color” – set the HTML color code for the chatbox title background, Minimised/Phone-only mode background, Authentication button, and Text input line.

  • “Secondary color” – set the HTML color code for the chatbox title text and Minimised/Phone-only mode icon.

  • “Panel width” – set the chatbox panel’s horizontal size, in pixels. Defaults to 250px.

  • “Panel height” – set the chatbox panel’s vertical size, in pixels. Defaults to 450px.

  • “Position” – set the chatbox location to “Bottom Right” or “Bottom Left”.

  • “Animation style” – set the animation style to “Slide up”, “Slide left”, “Fade in” or none.

  • “Minimized style” – set the minimized style for the chatbox to “Bubble” or “Tab”.

  • “Load minimized” – enable to display the chat box panel minimized. Enabled by default for visitors on mobile browsers and when “Pop-out” is enabled.

  • “Facebook Account URL” – set your Facebook account URL, linked in the chatbox.

  • “Twitter Account URL” – set your Twitter account URL, linked in the chatbox.“Email Address” – set your email address, linked in the chatbox.

  • “Show “Powered By 3CX” – enable to display this text in the chatbox.

    • 5. Click “Save” when done.


    Display Plugin Panel on WordPress Site

    You can display the “3CX Live Chat and Talk” panel, by copying a specific shortcode from the list of “Live Chat & Talk” items and enabling it on:

    • All site pages:

    1. Go to “Appearance” > “Widgets” and drag a “Text” widget in a site widget area visible across the site, e.g. the footer area of the active WordPress theme.

    2. Add the shortcode, i.e. [3cx-clicktotalk id=”15” title=”Click To Talk to Us”], in the content and click “Save” to apply

    • Specific post of page:

    1. Create a new Post or Page

    2. Add the shortcode, i.e.  [3cx-clicktotalk id=”15” title=”Click To Talk to Us”], in the content and click “Publish” to apply.

    3. Click “Preview Changes” to see the post or page with the embedded “3CX Live Chat and Talk” plugin panel.


    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.

    Note: While 3CX does support Live Chat and Talk, TelWare does not provide support or troubleshooting for this feature. 

      • Related Articles

      • 3CX: Live Chat & Talk for Non-WordPress Sites

        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: ...

      • 3CX: The Chat Feature

        The built-in “Chat” function enables you to send and receive messages to/from colleagues and web visitors if you have configured the Installing the 3CX Live Chat and Talk Plugin for WordPress on your website. 1. Chat Actions – Right-click a chat to ...

      • 3CX: How to Chat on the Web Client

        The built-in “Chat” function enables you to send and receive messages to colleagues and web visitors if you have configured the 3CX Live Chat & Talk plugin on your website. 1. Log into your Web Client. 2. Click Chat (or the chat icon) on the left ...

      • 3CX: Installing the Microsoft Edge Extension

        Open your Microsoft Edge browser. Navigate to https://microsoftedge.microsoft.com/addons/detail/kcijpkomlnpfpjmkbghnnmflfebimpfg Press the “Get” button to add the extension to your browser. Note: Your Microsoft Edge browser may require updating prior ...

      • Installing the 3CX Google Extension from the Chrome Web Store

        Installing the Google 3CX Google Extension 1. Find the 3CX Extension in the Chrome Web Store. 2. Click the ""Add to Chrome"" button in the top right. 3. You should now see a handset icon in your Google Chrome toolbar. Note: You may need to go to your ...