Chatting develops social networking among visitors to your web site. Several chat components are available on the Internet, and you can download any of them. A few of the popular chat components include JoomlaLiveChat (www.joomlalivechat.com), MyLiveChat, and so on. I downloaded the MyLiveChat component, which is available at http://extensions.joomla.org/profile/extension/communication/live-support-hosted/my-live-chat. Its archive file is mod_mylivechat_3.0.zip. Download it to the local disk drive.
After you download the file, open the Extension Manager by selecting Extensions ➤ Extension Manager.
In the Extension Package File box, specify the location of the archive file and click the Upload & Install button, as shown in Figure 9-42.
The MyLiveChat module will install, and you’ll see the message Installing Module Was Successful, as shown in Figure 9-43.
You’ll also find the module included in the Module Manager, but in unpublished mode. To publish the module, click the red cross icon in the Status column. The icon will toggle to a green check sign, which means the module is converted to published mode. A message appears at the top of the Module Manager that says 1 Module Successfully Published (see Figure 9-44) to confirm that the chat module is enabled.
After MyLiveChat is selected from the Module Manager page, it will open in edit mode, in which you can specify certain settings, as shown in Figure 9-45.
You can specify settings such as the type of user who can access the chat module (i.e., whether everyone or only users of a specific group can access it), the chat language, display type, and so on. You also have to specify the position in which the chat module has to appear on the site. From the Position combo box, select the position-7 option that makes the module appear on the right top of the site.
To make the module appear on all the pages of the site, open the Menu Assignment tab. From the Module Assignment combo box, select the On All Pages option to make the chat module appear on all pages of the site (see Figure 9-46).
Now it’s time to access the chat module from the front end. Let’s access the Joomla web site by pointing the browser to http://localhost/joomlasite. You’ll find a new module on the right side of the site with the title MyLiveChat. The module contains a link, Sign up MyLiveChat (see Figure 9-47).
The MyLiveChat module wants the site administrator to sign up and register at www.mylivechat.com. Why? Because after registering at the site, the administrator can login, monitor site visitors, and even chat with them. After clicking the Sign up MyLiveChat link, you will navigate to www.mylivechat.com/register.aspx and will be prompted to enter administrator information, as shown in Figure 9-48.
You need to supply the administrator’s e-mail address, password, first and last name, and so on. Enter the displayed captcha, check the Terms of Service check box, and click the Create Account Now button at the bottom.
If everything goes well, your account is created, and a dialog box pops up and displays Your Account Has Been Created Successfully. Click the OK button to close the dialog box and move on. You will be supplied with a chat code that you can paste on your site to enable visitors to chat with you (i.e., the administrator), as shown in Figure 9-49.
You will learn later in this chapter how to display a chat window on your site using the supplied chat code by making use of the Custom HTML module. Just copy the code, paste it into Notepad for future use, and click the Skip This Step button to move on.
You will be navigated to the Dashboard that displays several menus on the left side that can be used to manage the account (see Figure 9-50). The page also displays a congratulations message for the successful creation of the account, and the administrator’s LiveChat ID and Agent Console link at the top of the page.
It is through the Agent Console window that the administrator can monitor visitors visiting the site and can accept or decline their chat invitations. After the Agent Console link is clicked, the Agent Console window opens up as shown in Figure 9-51.
The window is divided into four panes. The top-left pane shows the agents (the number of administrators of the site who are logged in). The top-right pane shows the list of visitors who are trying to chat with the administrator. Users can chat with any of the visitors and can even ban any undesired visitors from chatting. The bottom-left pane shows the request queue (i.e., the list of customers who are waiting for the administrator’s response). The bottom-right pane displays the chat messages of the selected visitors and enable the administrator to chat with them. Whenever the administrator selects any visitor from the top-right pane, the chat messages will appear in the bottom-right pane, hence enabling the administrator to chat with many visitors simultaneously.
As discussed, the MyLiveChat module on the front side allows only the administrator to access the Dashboard and Agent Console to chat and monitor visitors. To allow the visitors of your site to chat with the administrator, you need to create a separate module and paste the code that was supplied by the MyLiveChat site (refer to Figure 9-49).
Open the Module Manager and click the New button from the toolbar to create a new module. Select Custom HTML when prompted to select the module type. You see the fields to enter information of the new module, as shown in Figure 9-52.
In the Title field, enter the title of the module as Chat With Us. From the Position combo box, select the position-7 option to display the chat window on the top-right side of the site.
To paste the HTML and JavaScript code of the chat window, select the Tools ➤ <> Source code option from the menus of the TinyMCE editor window to open the Source code box. Paste the code supplied by the MyLiveChat site in the Source code box (see Figure 9-53).
Click the OK button after pasting the code to go back to the new module page. Click the Save & Close button to save the module. Now visitors of your site can request and chat with the site administrator. Open the front end of the site and refresh it. You will see the Chat With Us module below the MyLiveChat module, as shown in Figure 9-54.
The Chat With Us module shows a small chat window with a Chat Now button at the bottom.
When a visitor clicks the Chat Now button, a window appears and prompts the user to leave a message for the administrator/agent to respond. The window (see Figure 9-55) prompts the visitor to enter the following information: name, e-mail address, subject of chatting, and a small message. After entering the required information, the visitor needs to click the Send button for the agent to respond.
When a visitor clicks the Send button, the administrator finds the visitor’s name listed in the top-right pane of the Agent Console window. After the visitor’s name is clicked, her information pops up that includes her location, time, subject, browser that she is accessing, and so on. Below the visitor’s information appear the buttons that the administrator can use to invite the visitor for chat, ban her, and view her location on the map (see Figure 9-56). Let’s click the Invite button to chat with the visitor.
A Chat Invitation dialog box pops up to greet the visitor and display the agent’s name. In the default text, replace the text Agent with the agent’s name who is chatting with the visitor; then click the OK button (see Figure 9-57).
On the front end of the site, a chat invitation dialog box opens up that displays the agent’s name who is chatting with her (see Figure 9-58).
The visitor needs to click the Chat Now button found at the bottom in the Chat Invitation window. A dialog box pops up that enables the user to chat with the agent (see Figure 9-59). The user can type the required chat message in the box found at the bottom of the dialog box and then click the Send button.
The chat message typed by the visitor can be seen by the agent/administrator in the Agent Console’s bottom-right pane, as shown in Figure 9-60. The agent can type a responding chat message and click the Send button.
The conclusion is that the visitor chats with the administrator through the chat window found at the front end of the site, and the administrator responds to the visitor through the Agent Console window.
Figure 9-61 shows the text message sent by the administrator in the Agent Console window that is visible to the site visitor. Although MyLiveChat works well, you can also use eAssistance Pro live chat.
Source: Harwani B M (2015), Foundations of Joomla!, Apress; 2nd ed edition