[IMP] Livechat: URL Regex clarification

closes odoo/documentation#10533

Signed-off-by: Jessica Rogers (jero) <jero@odoo.com>
Co-authored-by: Felicia Kuan <feku@odoo.com>
Co-authored-by: ksc-odoo <73958186+ksc-odoo@users.noreply.github.com>
Co-authored-by: Sam Lieber (sali) <36018073+samueljlieber@users.noreply.github.com>
This commit is contained in:
jero-odoo 2024-08-01 11:53:48 -04:00
parent c353ef2640
commit 79828e3ea5
9 changed files with 134 additions and 102 deletions

View File

@ -5,133 +5,155 @@
Live Chat Live Chat
========= =========
Odoo *Live Chat* allows users to communicate with website visitors in real time. With *Live Chat*, Odoo **Live Chat** allows users to communicate with website visitors in real time. With **Live
leads can be qualified for their sales potential, support questions can be answered quickly, and Chat**, leads can be qualified for their sales potential, support questions can be answered quickly,
issues can be directed to the appropriate team for further investigation (or follow up). *Live Chat* and issues can be directed to the appropriate team for further investigation or follow up. **Live
also provides the opportunity for instant feedback from customers. Chat** also provides the opportunity for instant feedback from customers.
Enable Live Chat Enable Live Chat
================ ================
In order to enable *Live Chat*, the *Live Chat* application needs to be installed. This can be done The **Live Chat** application is installed in multiple ways:
in one of two ways.
- Go to :menuselection:`Apps --> Live Chat` and click :guilabel:`Install`. - Go to :menuselection:`Apps application`, search `Live Chat`, and click :guilabel:`Install`.
- In the :menuselection:`Website` application, go to :menuselection:`Configuration --> Settings`, - Go to the :menuselection:`Helpdesk app --> Configuration --> Teams` list view, select a team, and
scroll to the :guilabel:`Email & Marketing` section, check the box next to :guilabel:`Livechat`, on the team's settings page, tick the :guilabel:`Live Chat` checkbox, under the
and click :guilabel:`Save`. :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 .. image:: livechat/enable-setting.png
:align: center :align: center
:alt: View of the settings page and the live chat feature for Odoo Live Chat. :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 .. note::
created by default and automatically selected in the drop-down. After the **Live Chat** application is installed, a live chat *Channel* is created by default.
Create a new live chat channel Create a new live chat channel
============================== ==============================
To create a new live chat *Channel*, go to :menuselection:`Main Odoo Dashboard --> Live Chat app --> To create a new live chat *Channel*, go to :menuselection:`Live Chat app --> New`. This opens a
New`. This will open a blank channel detail form. Enter the name of the new channel in the blank channel detail form. Enter the name of the new channel in the :guilabel:`Channel Name` field.
:guilabel:`Channel Name` field.
.. image:: livechat/open-channel.png .. image:: livechat/open-channel.png
:align: center :align: center
:alt: View of a live chat channel form for Odoo Live Chat. :alt: View of a live chat channel form for Odoo Live Chat.
To configure the remaining tabs on the channel detail form (:guilabel:`Operators`, To configure the remaining tabs on the channel detail form (:ref:`Operators
:guilabel:`Options`, :guilabel:`Channel Rules`, and :guilabel:`Widgets`), follow the steps below. <livechat/operators-tab>`, :ref:`Options <livechat/options-tab>`, :ref:`Channel Rules
<livechat/channel-rules-tab>`, and :ref:`Widget <livechat/widget-tab>`), 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 .. _livechat/operators-tab:
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 Operators tab
screen. -------------
*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 .. image:: livechat/pop-up.png
:align: center :align: center
:alt: View of a live chat pop up window in an Odoo database. :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. 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.
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).
.. note:: .. note::
Current operators can be edited (or removed) by clicking on their respective boxes in the 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 :guilabel:`Operators` tab, which reveals a separate :guilabel:`Open: Operators` pop-up window.
pop-up, adjust any information as needed, and click :guilabel:`Save`, or click :guilabel:`Remove` In that pop-up window, adjust any information, as needed. Then, click :guilabel:`Save`, or click
to remove that operator from the channel. :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. 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 :align: center
:alt: View of an Odoo website emphasizing the livechat button. :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 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. 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 The :guilabel:`Livechat Button Color` alters the color of the live chat button as it appears on the
window. Click the :guilabel:`🔄 (refresh)` icon to the right of the color bubbles to reset 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. colors to the default selection.
.. tip:: .. tip::
Color selection, for the button or header, can be made manually using a slider or through RGB, 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 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. system.
Livechat window Livechat Window section
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~
The *Livechat Window* is the space where the live chat conversation with website visitors takes The *Livechat Window* is the space where the live chat conversation with website visitors takes
place. place.
Edit the :guilabel:`Welcome Message` to change the message a visitor sees when they open a new chat 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. 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 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 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
<livechat/livechat-button>`.
.. figure:: livechat/chat-window.png .. figure:: livechat/chat-window.png
:align: center :align: center
The Livechat Window with a purple header. The chat input placeholder reads "Ask Something..." 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 Channel Rules tab
Chat Window* opens on the website, by configuring when a :guilabel:`URL Regex` action is triggered -----------------
(e.g., a page visit).
To create a new channel rule, click :guilabel:`Add a line`. This opens the :guilabel:`Open: Rules` To configure which website user actions open the live chat window, go to the :guilabel:`Channel
pop-up. 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 .. image:: livechat/create-rules.png
:align: center :align: center
@ -140,69 +162,79 @@ pop-up.
Create new rules Create new rules
~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~
Fill out the fields on the :guilabel:`Open: Rules` pop-up as instructed below, then click Fill out the fields on the :guilabel:`Create Rules` pop-up window as instructed below, then click
:guilabel:`Save`. :guilabel:`Save & Close`.
.. tabs:: .. tabs::
.. tab:: Live Chat Button .. tab:: Live Chat Button
The *Livechat Button* is the icon that appears in the bottom corner of the website. Select The *Livechat Button* is the icon that appears in the bottom-right corner of the website.
from one of the following display options: Select from one of the following display options:
- :guilabel:`Show` displays the chat button on the page(s). - :guilabel:`Show`: displays the chat button on the page.
- :guilabel:`Show with notification` displays the chat button, as well as a floating text - :guilabel:`Show with notification`: displays the chat button, as well as a floating text
bubble next to the button. 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` after a specified amount of time (designated in the :guilabel:`Open automatically timer`
field). field that appears when this option is selected).
- :guilabel:`Hide` hides the chat button on the page(s). - :guilabel:`Hide`: hides the chat button on the page.
.. tab:: Chatbot .. tab:: Chatbot
If a *Chatbot* will be included on this channel, select it from the dropdown. If the chatbot To include a :doc:`Chatbot <livechat/chatbots>` on this channel, select it from the drop-down
will only be active when no operators are active, check the box labeled :guilabel:`Enabled menu. If the chatbot should only be active when no operators are active, tick the checkbox
only if no operator`. labeled, :guilabel:`Enabled only if no operator`.
.. tab:: URL Regex .. tab:: URL Regex
In the :guilabel:`URL Regex` field, input the relative URL of the page where the chat button The *URL Regex* specifies the web pages where this rule should be applied. In the
should appear. :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 .. tab:: Open automatically timer
This field designates the amount of time (in seconds) a page will be open before the chat This field designates the amount of time (in seconds) a page should be open before the chat
window will open. If the :guilabel:`Livechat Button` for this rule is not set to window opens. This field **only** appears if the :guilabel:`Live Chat Button` for this rule is
:guilabel:`Open automatically`, this field will be ignored. set to :guilabel:`Open automatically`.
.. tab:: Country .. tab:: Country
If this channel should only be available to site visitors in specific countries, add them to If this channel should **only** be available to site visitors in specific countries, add them
the :guilabel:`Country` field. If this field is left blank, the channel will be available to to the :guilabel:`Country` field. If this field is left blank, the channel is available to all
all site visitors, regardless of location. site visitors, regardless of location.
.. note:: .. note::
In order to track the geographical location of visitors, :guilabel:`GeoIP` must be installed on To track the geographical location of visitors, *GeoIP* **must** be installed on the database.
the database. While this feature is installed by default on *Odoo Online*, *On-Premise* databases While this feature is installed by default on *Odoo Online* databases, *On-Premise* databases
will require additional :doc:`setup steps </administration/on_premise/geo_ip>`. require additional :doc:`setup steps </administration/on_premise/geo_ip>`.
Widget .. _livechat/widget-tab:
------
The :guilabel:`Widget` tab on the live chat channel details form provides the shortcode for an Widget tab
embeddable website widget. This code can be added to a website to provide access to a live chat ----------
window.
The live chat widget can be added to websites created through Odoo by navigating to the The :guilabel:`Widget` tab on the live chat channel detail form provides the code for a website
:menuselection:`Website --> Configuration --> Settings`. Then scroll to the :guilabel:`Livechat` widget. This code can be added to a website to provide access to a live chat window.
section, and select the channel to add to the site. Click :guilabel:`Save` to apply.
.. 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` 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 `<head>` tag on the site. button on the :guilabel:`Widget` tab, and paste the code into the `<head>` tag on the site.
Likewise, to send a live chat session to a customer, click the second :guilabel:`COPY` button on the 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, :guilabel:`Widget` tab. This link can be sent directly to a customer. When they click the link, they
it will open a new chat. are redirected to a new chat window.
.. image:: livechat/widget-code.png .. image:: livechat/widget-code.png
:align: center :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 Join or leave a channel
----------------------- -----------------------
To join a live chat channel, go to the :menuselection:`Live Chat` app and click the :guilabel:`JOIN` To join a live chat channel, go to the :menuselection:`Live Chat` app, and click the
button on the kanban card for the appropriate channel. :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 Any channel where the user is currently active shows a :guilabel:`LEAVE` button. Click this button
button to disconnect from the channel. to disconnect from the channel.
.. image:: livechat/leave-channel.png .. image:: livechat/leave-channel.png
:align: center :align: center
@ -267,8 +299,8 @@ screen, no matter where they are in the database. They can participate in conver
leaving their current location. leaving their current location.
.. tip:: .. tip::
Conversations can also be accessed by clicking the :guilabel:`Conversations` icon in the Conversations can also be accessed by clicking the :icon:`fa-comments` :guilabel:`(messages)`
menu bar. icon in the menu bar.
.. image:: livechat/menu-bar.png .. image:: livechat/menu-bar.png
:align: center :align: center

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 39 KiB