[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>
@ -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
|
||||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 39 KiB |