diff --git a/content/applications/websites/livechat.rst b/content/applications/websites/livechat.rst index 9c2cf35fd..e73b9b596 100644 --- a/content/applications/websites/livechat.rst +++ b/content/applications/websites/livechat.rst @@ -5,133 +5,155 @@ Live Chat ========= -Odoo *Live Chat* allows users to communicate with website visitors in real time. With *Live Chat*, -leads can be qualified for their sales potential, support questions can be answered quickly, and -issues can be directed to the appropriate team for further investigation (or follow up). *Live Chat* -also provides the opportunity for instant feedback from customers. +Odoo **Live Chat** allows users to communicate with website visitors in real time. With **Live +Chat**, leads can be qualified for their sales potential, support questions can be answered quickly, +and issues can be directed to the appropriate team for further investigation or follow up. **Live +Chat** also provides the opportunity for instant feedback from customers. Enable Live Chat ================ -In order to enable *Live Chat*, the *Live Chat* application needs to be installed. This can be done -in one of two ways. +The **Live Chat** application is installed in multiple ways: -- Go to :menuselection:`Apps --> Live Chat` and click :guilabel:`Install`. -- In the :menuselection:`Website` application, go to :menuselection:`Configuration --> Settings`, - scroll to the :guilabel:`Email & Marketing` section, check the box next to :guilabel:`Livechat`, - and click :guilabel:`Save`. +- Go to :menuselection:`Apps application`, search `Live Chat`, and click :guilabel:`Install`. +- Go to the :menuselection:`Helpdesk app --> Configuration --> Teams` list view, select a team, and + on the team's settings page, tick the :guilabel:`Live Chat` checkbox, under the + :guilabel:`Channels` section. +- In the :menuselection:`Website` app, go to :menuselection:`Configuration --> Settings`, scroll to + the :guilabel:`How to configure the Twitter API access` section, tick the :guilabel:`Livechat` + checkbox, and click :guilabel:`Save`. .. image:: livechat/enable-setting.png :align: center :alt: View of the settings page and the live chat feature for Odoo Live Chat. -After the :guilabel:`Live Chat` application is installed, a live chat :guilabel:`Channel` will be -created by default and automatically selected in the drop-down. +.. note:: + After the **Live Chat** application is installed, a live chat *Channel* is created by default. Create a new live chat channel ============================== -To create a new live chat *Channel*, go to :menuselection:`Main Odoo Dashboard --> Live Chat app --> -New`. This will open a blank channel detail form. Enter the name of the new channel in the -:guilabel:`Channel Name` field. +To create a new live chat *Channel*, go to :menuselection:`Live Chat app --> New`. This opens a +blank channel detail form. Enter the name of the new channel in the :guilabel:`Channel Name` field. .. image:: livechat/open-channel.png :align: center :alt: View of a live chat channel form for Odoo Live Chat. -To configure the remaining tabs on the channel detail form (:guilabel:`Operators`, -:guilabel:`Options`, :guilabel:`Channel Rules`, and :guilabel:`Widgets`), follow the steps below. +To configure the remaining tabs on the channel detail form (:ref:`Operators +`, :ref:`Options `, :ref:`Channel Rules +`, and :ref:`Widget `), follow the steps below. -Operators ---------- +.. tip:: + The channel detail form for any channel can be accessed by navigating back to the + :guilabel:`Website Live Chat Channels` dashboard, via the breadcrumbs. Click the Kanban card for + the appropriate live chat channel to open the channel detail form. -*Operators* are the users who will respond to live chat requests from customers. When a user is -added as an operator in a live chat channel, they will be able to receive chats from website -visitors wherever they are in the database. Chat windows will open in the bottom right corner of the -screen. +.. _livechat/operators-tab: + +Operators tab +------------- + +*Operators* are the users who act as agents and respond to live chat requests from customers. When a +user is added as an operator in a live chat channel, they can receive chats from website visitors +wherever they are in the database. Chat windows open in the bottom-right corner of the screen. .. image:: livechat/pop-up.png :align: center :alt: View of a live chat pop up window in an Odoo database. -The user who originally created the live chat channel will be added as an operator by default. - -To add additional users, navigate back to the :guilabel:`Website Live Chat Channels` dashboard via -the breadcrumbs and click on the appropriate :guilabel:`Live Chat Channel`. Then, on the channel -detail form, under the :guilabel:`Operators` tab, click :guilabel:`ADD` to reveal an :guilabel:`Add: -Operators` pop-up window. - -In the pop-up window, search for the desired user(s). Then, click the checkbox next to the user(s) -to be added, and click :guilabel:`SELECT`. - -New operators can be created and added to the list directly from this pop-up, as well, by clicking -:guilabel:`New`, and filling out the :guilabel:`Create Operators` pop-up form. When the form is -complete, click :guilabel:`SAVE & CLOSE` (or :guilabel:`SAVE & NEW` for multiple record creations). +On the channel detail form, click the :guilabel:`Operators` tab. The user who originally created the +live chat channel has been added as an operator by default. .. note:: - Current operators can be edited (or removed) by clicking on their respective boxes in the - :guilabel:`Operators` tab, which reveals a separate :guilabel:`Open: Operators` pop-up. In that - pop-up, adjust any information as needed, and click :guilabel:`Save`, or click :guilabel:`Remove` - to remove that operator from the channel. + Current operators can be edited, or removed, by clicking on their respective boxes in the + :guilabel:`Operators` tab, which reveals a separate :guilabel:`Open: Operators` pop-up window. + In that pop-up window, adjust any information, as needed. Then, click :guilabel:`Save`, or click + :guilabel:`Remove` to remove that operator from the channel. -Options -------- +Click :guilabel:`Add` to reveal an :guilabel:`Add: Operators` pop-up window. -The :guilabel:`Options` tab on the live chat channel details form contains the visual and text +In the pop-up window, scroll to find the desired users, or enter their name in the search bar. Then, +tick the checkbox next to the users to be added, and click :guilabel:`Select`. + +New operators can be created and added to the list directly from this pop-up window, as well, by +clicking :guilabel:`New`, and filling out the :guilabel:`Create Operators` form. When the form is +complete, click :guilabel:`Save & Close`, or :guilabel:`Save & New` for multiple record creations. + +.. danger:: + Creating a new user can impact the status of an Odoo subscription, as the total number of users + in a database counts towards the billing rate. Proceed with caution before creating a new user. + If a user already exists, adding them as an operator does **not** alter the subscription or + billing rate for a database. + +.. _livechat/options-tab: + +Options tab +----------- + +The :guilabel:`Options` tab on the live chat channel detail form contains the visual and text settings for the live chat window. -Livechat button -~~~~~~~~~~~~~~~ +.. _livechat/livechat-button: -The *Livechat Button* is the icon that appears in the bottom corner of the website. +Livechat Button section +~~~~~~~~~~~~~~~~~~~~~~~ -.. image:: livechat/chat-button.png +The *Livechat Button* is the icon that appears in the bottom-right corner of the website. + +.. figure:: livechat/chat-button.png :align: center :alt: View of an Odoo website emphasizing the livechat button. + The Live Chat button in the bottom-right corner of an Odoo website. + Change the text in the :guilabel:`Text of the Button` field to update the greeting displayed in the text bubble when the live chat button appears on the website. -Change the :guilabel:`Livechat Button Color` by clicking a color bubble to open the color selection -window. Click the :guilabel:`🔄 (refresh)` icon to the right of the color bubbles to reset the +The :guilabel:`Livechat Button Color` alters the color of the live chat button as it appears on the +website. To change the color, click on a color bubble to open the color selection window, then click +and drag the circle along the color gradient. Click out of the selection window once complete. Click +the :icon:`fa-refresh` :guilabel:`(refresh)` icon to the right of the color bubbles to reset the colors to the default selection. .. tip:: Color selection, for the button or header, can be made manually using a slider or through RGB, HSL, or HEX color code entries from the pop-up color selection window that appears when either of - the color bubbles are clicked. Different options will be available, depending on your operating + the color bubbles are clicked. Different options are available, depending on the operating system. -Livechat window -~~~~~~~~~~~~~~~ +Livechat Window section +~~~~~~~~~~~~~~~~~~~~~~~ The *Livechat Window* is the space where the live chat conversation with website visitors takes place. Edit the :guilabel:`Welcome Message` to change the message a visitor sees when they open a new chat -session. This message will appear as though it is sent by a live chat operator, and acts as both a +session. This message appears as though it is sent by a live chat operator, and acts as both a greeting and an invitation to continue the conversation. Edit the :guilabel:`Chat Input Placeholder` to alter the text that appears in the box where visitors -will type their replies. +type their replies. This message prompts the visitor to initiate the chat. The *Channel Header* is the colored bar at the top of the chat window. The :guilabel:`Channel Header -Color` can be changed following the same steps as the *Livechat Button Color* above. +Color` can be changed following the same steps as the :ref:`Livechat button +`. .. figure:: livechat/chat-window.png :align: center The Livechat Window with a purple header. The chat input placeholder reads "Ask Something..." -Channel rules -------------- +.. _livechat/channel-rules-tab: -The :guilabel:`Channel Rules` tab on the live chat channel details form determines when the *Live -Chat Window* opens on the website, by configuring when a :guilabel:`URL Regex` action is triggered -(e.g., a page visit). +Channel Rules tab +----------------- -To create a new channel rule, click :guilabel:`Add a line`. This opens the :guilabel:`Open: Rules` -pop-up. +To configure which website user actions open the live chat window, go to the :guilabel:`Channel +Rules` tab on the live chat channel detail form. + +To create a new channel rule, click :guilabel:`Add a line`. This opens the :guilabel:`Create Rules` +pop-up window. .. image:: livechat/create-rules.png :align: center @@ -140,69 +162,79 @@ pop-up. Create new rules ~~~~~~~~~~~~~~~~ -Fill out the fields on the :guilabel:`Open: Rules` pop-up as instructed below, then click -:guilabel:`Save`. +Fill out the fields on the :guilabel:`Create Rules` pop-up window as instructed below, then click +:guilabel:`Save & Close`. .. tabs:: .. tab:: Live Chat Button - The *Livechat Button* is the icon that appears in the bottom corner of the website. Select - from one of the following display options: + The *Livechat Button* is the icon that appears in the bottom-right corner of the website. + Select from one of the following display options: - - :guilabel:`Show` displays the chat button on the page(s). - - :guilabel:`Show with notification` displays the chat button, as well as a floating text + - :guilabel:`Show`: displays the chat button on the page. + - :guilabel:`Show with notification`: displays the chat button, as well as a floating text bubble next to the button. - - :guilabel:`Open automatically` displays the button and automatically opens the chat window + - :guilabel:`Open automatically`: displays the button, and automatically opens the chat window after a specified amount of time (designated in the :guilabel:`Open automatically timer` - field). - - :guilabel:`Hide` hides the chat button on the page(s). + field that appears when this option is selected). + - :guilabel:`Hide`: hides the chat button on the page. .. tab:: Chatbot - If a *Chatbot* will be included on this channel, select it from the dropdown. If the chatbot - will only be active when no operators are active, check the box labeled :guilabel:`Enabled - only if no operator`. + To include a :doc:`Chatbot ` on this channel, select it from the drop-down + menu. If the chatbot should only be active when no operators are active, tick the checkbox + labeled, :guilabel:`Enabled only if no operator`. .. tab:: URL Regex - In the :guilabel:`URL Regex` field, input the relative URL of the page where the chat button - should appear. + The *URL Regex* specifies the web pages where this rule should be applied. In the + :guilabel:`URL Regex` field, input the relative URL of the page where the chat button should + appear. + + For example, to apply the rule to the URL, `https://mydatabse.odoo.com/shop`, enter `/shop` + to the :guilabel:`URL Regex` field. + + To apply the rule to *all* pages on the database, enter `/` in the :guilabel:`URL Regex` + field. .. tab:: Open automatically timer - This field designates the amount of time (in seconds) a page will be open before the chat - window will open. If the :guilabel:`Livechat Button` for this rule is not set to - :guilabel:`Open automatically`, this field will be ignored. + This field designates the amount of time (in seconds) a page should be open before the chat + window opens. This field **only** appears if the :guilabel:`Live Chat Button` for this rule is + set to :guilabel:`Open automatically`. .. tab:: Country - If this channel should only be available to site visitors in specific countries, add them to - the :guilabel:`Country` field. If this field is left blank, the channel will be available to - all site visitors, regardless of location. + If this channel should **only** be available to site visitors in specific countries, add them + to the :guilabel:`Country` field. If this field is left blank, the channel is available to all + site visitors, regardless of location. .. note:: - In order to track the geographical location of visitors, :guilabel:`GeoIP` must be installed on - the database. While this feature is installed by default on *Odoo Online*, *On-Premise* databases - will require additional :doc:`setup steps `. + To track the geographical location of visitors, *GeoIP* **must** be installed on the database. + While this feature is installed by default on *Odoo Online* databases, *On-Premise* databases + require additional :doc:`setup steps `. -Widget ------- +.. _livechat/widget-tab: -The :guilabel:`Widget` tab on the live chat channel details form provides the shortcode for an -embeddable website widget. This code can be added to a website to provide access to a live chat -window. +Widget tab +---------- -The live chat widget can be added to websites created through Odoo by navigating to the -:menuselection:`Website --> Configuration --> Settings`. Then scroll to the :guilabel:`Livechat` -section, and select the channel to add to the site. Click :guilabel:`Save` to apply. +The :guilabel:`Widget` tab on the live chat channel detail form provides the code for a website +widget. This code can be added to a website to provide access to a live chat window. + +.. tip:: + The live chat widget can be added to websites created through Odoo by navigating to + :menuselection:`Website app --> Configuration --> Settings`. Then, scroll to the + :menuselection:`How to configure the Twitter API access` section. In the :guilabel:`Channel` + field, select the channel to add to the site. Click :guilabel:`Save` to apply. To add the widget to a website created on a third-party platform, click the first :guilabel:`COPY` -button on the :guilabel:`Widget` tab and paste the code into the `` tag on the site. +button on the :guilabel:`Widget` tab, and paste the code into the `` tag on the site. Likewise, to send a live chat session to a customer, click the second :guilabel:`COPY` button on the -:guilabel:`Widget` tab. This link can be sent directly to a customer, and once they click the link, -it will open a new chat. +:guilabel:`Widget` tab. This link can be sent directly to a customer. When they click the link, they +are redirected to a new chat window. .. image:: livechat/widget-code.png :align: center @@ -245,11 +277,11 @@ If a users :guilabel:`Online Chat Name` is not set, the name displayed will defa Join or leave a channel ----------------------- -To join a live chat channel, go to the :menuselection:`Live Chat` app and click the :guilabel:`JOIN` -button on the kanban card for the appropriate channel. +To join a live chat channel, go to the :menuselection:`Live Chat` app, and click the +:guilabel:`JOIN` button on the Kanban card for the appropriate channel. -Any channel where the user is currently active will show a :guilabel:`LEAVE` button. Click this -button to disconnect from the channel. +Any channel where the user is currently active shows a :guilabel:`LEAVE` button. Click this button +to disconnect from the channel. .. image:: livechat/leave-channel.png :align: center @@ -267,8 +299,8 @@ screen, no matter where they are in the database. They can participate in conver leaving their current location. .. tip:: - Conversations can also be accessed by clicking the :guilabel:`Conversations` icon in the - menu bar. + Conversations can also be accessed by clicking the :icon:`fa-comments` :guilabel:`(messages)` + icon in the menu bar. .. image:: livechat/menu-bar.png :align: center diff --git a/content/applications/websites/livechat/chat-button.png b/content/applications/websites/livechat/chat-button.png index 6580103bd..8b99e56ec 100644 Binary files a/content/applications/websites/livechat/chat-button.png and b/content/applications/websites/livechat/chat-button.png differ diff --git a/content/applications/websites/livechat/chat-window.png b/content/applications/websites/livechat/chat-window.png index 7de39c2a6..1e59ce738 100644 Binary files a/content/applications/websites/livechat/chat-window.png and b/content/applications/websites/livechat/chat-window.png differ diff --git a/content/applications/websites/livechat/enable-setting.png b/content/applications/websites/livechat/enable-setting.png index 32213f60b..a13db7f2f 100644 Binary files a/content/applications/websites/livechat/enable-setting.png and b/content/applications/websites/livechat/enable-setting.png differ diff --git a/content/applications/websites/livechat/leave-channel.png b/content/applications/websites/livechat/leave-channel.png index 5ff3325be..c5d58bc62 100644 Binary files a/content/applications/websites/livechat/leave-channel.png and b/content/applications/websites/livechat/leave-channel.png differ diff --git a/content/applications/websites/livechat/my-profile.png b/content/applications/websites/livechat/my-profile.png index f25eb2135..f58c23136 100644 Binary files a/content/applications/websites/livechat/my-profile.png and b/content/applications/websites/livechat/my-profile.png differ diff --git a/content/applications/websites/livechat/online-chat-name.png b/content/applications/websites/livechat/online-chat-name.png index 2818f1d8a..a75f02d16 100644 Binary files a/content/applications/websites/livechat/online-chat-name.png and b/content/applications/websites/livechat/online-chat-name.png differ diff --git a/content/applications/websites/livechat/pop-up.png b/content/applications/websites/livechat/pop-up.png index a644b1567..fb84e11cb 100644 Binary files a/content/applications/websites/livechat/pop-up.png and b/content/applications/websites/livechat/pop-up.png differ diff --git a/content/applications/websites/livechat/widget-code.png b/content/applications/websites/livechat/widget-code.png index 90d6d459b..864384a22 100644 Binary files a/content/applications/websites/livechat/widget-code.png and b/content/applications/websites/livechat/widget-code.png differ