Introduction

The 3CX Live Chat function allows you to answer calls and messages from your website visitors directly from 3CX. Read more about the Live Chat solution.

Step 1: Add Live Chat in 3CX

1. Log into your 3CX Web Client and navigate to “Admin” > “Voice & chat” and click on “+ Add Live Chat”.
2. In the ‘Destination’ field, specify to which extension or queue you want to send live chat messages and calls. The chat will be available based on the department office hours the destination is part of.
3. Enter your website address.
4. Specify what information you require from visitors before they can open a chat.
5. You can give visitors the option to also call you - in this case the user will connect to 3CX directly without dialing a number. A browser connection will be established using WebRTC. You can allow a visitor to call you without initiating a chat first.
6. Now choose how you want the live chat box to display on your website when a visitor first goes to a web page. You can show a chat box or just a chat bubble.

Step 2: Customize your Chat Bubble

You can preview the chat bubble in the bottom right of the page to test the functionality and see how it will appear on your website.

Styling

Go to the “Styling” tab on the top of the Live Chat window to customize the appearance of your chat bubble.

1. Choose from one of the 4 predefined themes or select “Customize”. For the last option, click on each of the color tiles and use the pop-up color picker or enter your RGB, HSL or HEX numbers.
2. Use the radio button to choose your desired bubble icon.
3. Choose to override the website font and use Rubik.
4. Click on the drop-down box to select a chat box animation.

Messages

Go to the “Messages” tab on the top of the Live Chat window to customize the language, greetings etc.

1. Choose if you want to set your default interface language to be different to your visitor's browser language.
2. Under ‘Captions & Buttons’ to enter your own intro text and button label to appear on the live chat form.
3. Use the ‘Greetings’ section to customize your online and offline greeting messages.
4. Finally, the ‘Auto Messages’ section defines how you want automated messages to be worded.

Agent

Go to the “Agent” tab on the top of the Live Chat window to customize the agent’s avatar, display name etc.

1. Use the checkbox to decide if you will display your agent's real name or if you would like to set up a default name and avatar. In order to display your agent's actual avatar, this needs to be uploaded via their Web Client profile.
2. If you decide to use a default agent, use the ‘Default Agent Info’ section to upload a photo and set the name you wish to be displayed.

Advanced

Go to the “Advanced” tab on the top of the Live Chat window to customize your privacy message and queue calling.

1. Select the checkbox to enable calls to a queue or ring group when there is no agent handling the chat. For this setting to work correctly, the “Destination” set in the “General” settings must be a ring group or queue.
2. If you need to display a GDPR notice to visitors prior to them initiating a conversation, use the slider button and edit the notice in the text box below.
3. Finally, click “Save”.

Step 3: Enable Live Chat on your website

Now that you have configured your live chat, it’s time to add it to your website. If you have a dedicated person for your site administration, use the email box to send them all the information they need to get you up and running.

If you are installing Live Chat on WordPress, click the “Copy” button and follow the below instructions. If you are installing on a non-wordpress site, copy the HTML code and proceed to the Non-WordPress sites instructions.

WordPress websites

1. Log in to the admin panel of your WordPress website.
2. Navigate to ‘Plugins’ and click “Add New” at the top of the page.
3. Type “3CX” into the search bar and click “Install Now” on the “3CX Free Live Chat, Calls & WhatsApp” result.
4. Once installed, click on “3CX Live Chat” in the sidebar.
5. Once installed, click “Activate” to activate the plugin.
6. Click on “3CX Live Chat” in the sidebar and paste the URL you copied earlier. It can be found again in the Web Client configuration under the ‘Information’ field.
7. Either tick the box to show the chat on all pages or use the tick boxes below to select individual pages.
8. Finally, click “Save Changes”.

Note: Currently the WordPress plugin will support only one Live Chat URL per website. Multi-chat bubble support will be released in the near future. In the meantime, if multiple Live Chat options are required, simply paste the different code snippets into the pages you require.

Non-WordPress sites

1. If you are not using WordPress, copy the HTML code from the Web Client.
2. Paste the code before the </body> tag on your individual web pages.
3. See our guides for popular CMS systems.

1. Drupal
2. Joomla
3. Squarespace
4. Weebly
5. Wix