Files
help365/platform/line_chat_history.html
koziavin 00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
update
2025-05-29 16:42:45 +04:00

213 lines
26 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Live chat messages</title>
<meta name="generator" content="Help+Manual" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The&nbsp;Live Chat Messages widget is used to display message history in Live&nbsp;Chats sessions. Placing it on an app form allows viewing chats on app item pages. This feature is used..." />
<meta name="picture" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Full documentation for BRIX365 platform. Low-code developer guide. User guide. Admin guide. Developer guide." />
<meta property="og:url" content="https://brix365.com/en/help" />
<meta property="og:image" content="" />
<link rel="icon" href="favicon.png" type="image/png" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./jquery-ui.min.css" />
<link rel="stylesheet" href="default.css" />
<link rel="stylesheet" href="./search-yandex.css" />
<link rel="stylesheet" href="./article.css" />
<link rel="stylesheet" href="./glossary.css" />
<link rel="stylesheet" href="./theme.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="helpman_settings.js"></script>
<script type="text/javascript" src="helpman_topicinit.js"></script>
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
$(document).ready(function(){highlight();});
</script>
</head>
<body>
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
<header class="header elma-365">
<div class="container">
<a class="header__logo" href="https://brix365.com/en/help">
<img src="./logo-en.svg" alt="header logo">
</a>
<!-- <div class="hero__search-form" id="search-panel">
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
<label class="search-form__label">
<span id="reset-search" class="search__icon"></span>
<input class="search-form__input" type="text">
</label>
<input class="search-form__submit" type="submit" value="Submit">
</form>
</div> -->
<div class="hero__search-form" id="search-panel"> <form class="search-form"> <label class="search-form__label"> <span id="reset-search" class="search__icon"></span> <input class="search-form__input" type="text"> </label> <input class="search-form__submit" type="submit" value="Submit"> </form> </div>
<div class="hero__search">
<a href="#" id="search-icon" class="hero__search-icon">
<img src="search-icon-white.svg" alt="search string">
</a>
<a href="#" id="side-menu-icon" class="hero__side-icon">
<img src="side_menu.svg" alt="side menu">
</a>
</div>
<div class="header__navi">
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a class="project-link" href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://brix365.com/en/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li><li><a class="project-link" href="https://brix365.com/en/help/business_solutions/-elma365-store.html">Business Solutions</a></li></ul></span></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li><li><a href="https://tssdk.brix365.com/" target="_blank">SDK</a></li></ul>
</div>
</div>
</header>
<main class="main container">
<aside class="sidebar" id="sidebar">
<div class="sidebar__header">
<a class="header__logo" href="https://brix365.com/en/help">
<img src="./logo-light-en.svg">
</a>
<span class="sidebar__close elma-365-close" id="close"></span>
</div>
<div class="sidebar__wrapper" id="side-menu">
</div>
</aside>
<article class="article" id="article">
<div class="article-inner">
<div class="content">
<header class="article__header">
<div class="article__bread" style="display:flex; gap:10px;">
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
<div class="topic__breadcrumbs">
<p>Low-code designer &gt; <a href="interface_settings.html">Set up interfaces</a> &gt; Widget types &gt; Live chats widgets / Live chat messages</p>
</div>
</div>
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Live chat messages</span></h1>
</div>
</header>
<section class="article__content">
<div class="scroll-top-inner">
<a href="#h1-article" class="scroll-top"></a>
</div>
<!-- Placeholder for topic body. -->
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">The </span><span style="font-family: Inter; font-weight: bold;">Live Chat Messages </span><span style="font-family: Inter;">widget is used to display message history in <a href="chat_lines.html" class="topiclink">Live Chats</a> sessions. Placing it on an app form allows viewing chats on app item pages. This feature is used by:</span></p>
<ul style="list-style-type:disc">
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">Operators and supervisors. Operators can reply to messages in sessions assigned to them and create new ones.</span></li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">Users without access to the </span><span style="font-family: Inter; font-weight: bold;">Live Chats</span><span style="font-family: Inter;"> workspace. If a group that the user belongs is granted the <a href="create_line.html#read-access" class="topiclink">read permission</a> to sessions, they can view them on the pages of other apps.</span></li></ul>
<h2 class="p_Heading2"><span class="f_Heading2">Set up the widget</span></h2>
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">The </span><span style="font-family: Inter; font-weight: bold;">Live Chat Messages </span><span style="font-family: Inter;">widget can be used only on forms of apps that have:</span></p>
<ul style="list-style-type:disc">
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">An <a href="360009707032.html#account" class="topiclink">Account</a> type property.</span></li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">An <a href="360009707032.html#app" class="topiclink">App</a> type property linked with an app with an </span><span style="font-family: Inter; font-weight: bold;">Account</span><span style="font-family: Inter;"> type field in its context.</span></li></ul>
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">To configure the widget:</span></p>
<ol style="list-style-type:upper-roman">
<li value="1" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">Drag it from the right-side panel of the <a href="interface_designer.html" class="topiclink">interface designer</a> to the modeling canvas or click the </span><span style="font-family: Inter; font-weight: bold;">+Widget</span><span style="font-family: Inter;"> button. Read more about placing widgets on app forms in the <a href="360029250931.html" class="topiclink">Form templates</a> article.</span></li><li value="2" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">In the window that opens, configure the widgets settings.</span></li></ol>
<p style="text-align: justify; text-indent: -24px; line-height: 1.20; margin: 7px 0 16px 48px;"><img alt="line_chat_history-1" width="816" height="288" style="margin:0;width:816px;height:288px;border:none" src="line_chat_history-1.png"/></p>
<ul style="list-style-type:disc">
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter; font-weight: bold;">By account</span><span style="font-family: Inter;">. Select this option if you want to find sessions linked with the same account and view communications with the same customer from all live chats.</span><ul style="list-style-type:circle">
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter; font-weight: bold;">Account field</span><span style="font-family: Inter;">. Click </span><span style="font-family: Inter; font-weight: bold;">&lt;Select&gt;</span><span style="font-family: Inter;"> and specify an <a href="360009707032.html#account" class="topiclink">Account</a> type field from the context of the current app or an app bound with it.</span></li></ul>
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter; font-weight: bold;">By app item</span><span style="font-family: Inter;">. Select this option to view communications from all live chats associated with the same deal or request.</span><ul style="list-style-type:circle">
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter; font-weight: bold;">App</span><span style="font-family: Inter;">. Click </span><span style="font-family: Inter; font-weight: bold;">&lt;Select&gt;</span><span style="font-family: Inter;">. Choose </span><span style="font-family: Inter; font-weight: bold;">Current item</span><span style="font-family: Inter;"> to display all messages associated with items of the app whose form you are configuring. You can also choose another app with an </span><span style="font-family: Inter; font-weight: bold;">Account</span><span style="font-family: Inter;"> type field from the current apps context.</span></li></ul></li></ul>
<ol style="list-style-type:upper-roman" start="3">
<li value="3" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">On the <span style="font-weight: bold;">Events</span> and <span style="font-weight: bold;">System</span> tabs, set settings that are the same for all widgets. You can control widget visibility, configure its hover behavior, set styles, etc. Read more about it in the <span style="color: #0000ff;"><a href="common_widget_settings.html" class="topiclink">System widget settings</a></span> article.</li><li value="4" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">Save the settings.</span></li><li value="5" style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">To make the widget available to users, click </span><span style="font-family: Inter; font-weight: bold;">Save</span><span style="font-family: Inter;"> and </span><span style="font-family: Inter; font-weight: bold;">Publish</span><span style="font-family: Inter;"> on the top panel of the interface designer.</span></li></ol>
<h2 class="p_Heading2"><span class="f_Heading2">Examples of displaying live chat messages in a widget</span></h2>
<h3 class="p_Heading3"><span class="f_Heading3">By account</span></h3>
<p style="text-align: justify; line-height: 1.20;"><span style="font-family: Inter;">Lets say you set up two live chats with different instant messengers connected to them. Both live chats have <a href="360012584960.html" class="topiclink">Contacts</a> as the app specified <a href="create_line.html#connect_account" class="topiclink">for binding accounts</a>.</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">A customer registered in the </span><span style="font-family: Inter; font-weight: bold;">Contacts</span><span style="font-family: Inter;"> app sends messages to both live chats. Two separate sessions are created in BRIX. After finding out initial information about the customer, the operators link the sessions with the contact using the </span><span style="font-family: Inter; font-weight: bold;">+Bind</span><span style="font-family: Inter;"> button. After that, the messenger accounts that the customer used to contact your organization are added to the contacts page. The contacts name is now displayed on the </span>right-side panel<span style="font-family: Inter;"> of both sessions. Operators can go from sessions to the contacts page and view information about the customer.</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">You want communications with the customer from all sessions to be displayed on the contacts page. To do that, you can create a separate tab on the view form of the </span><span style="font-family: Inter; font-weight: bold;">Contacts</span><span style="font-family: Inter;"> app and add the </span><span style="font-family: Inter; font-weight: bold;">Live Chat Messages </span><span style="font-family: Inter;">widget to it. In the widgets settings, select the </span><span style="font-family: Inter; font-weight: bold;">By account</span><span style="font-family: Inter;"> option and choose the </span><span style="font-family: Inter; font-weight: bold;">Accounts</span><span style="font-family: Inter;"> field from the apps context.</span></p>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">As a result, on the contact's page you can see their live chat messages.</span></p>
<p style="line-height: 1.20;"><img alt="line_chat_history-2" width="891" height="579" style="margin:0;width:891px;height:579px;border:none" src="line_chat_history-2.png"/></p>
<h3 class="p_Heading3"><span class="f_Heading3">By app item</span></h3>
<p style="line-height: 1.20; margin: 0 0 11px 0;"><span style="font-family: Inter;">Lets say two customers from the same company message to live chats that have the <a href="360012680899.html" class="topiclink">Deals</a> app selected <a href="create_line.html#connect_request" class="topiclink">for registering requests</a> in the settings. Two separate sessions are created, and operators bind them to the same app item, for example, to one deal.</span></p>
<p style="line-height: 1.20; margin: 0 0 11px 0;"><span style="font-family: Inter;">If you want all conversations associated with the deal to be available on its page, add the </span><span style="font-family: Inter; font-weight: bold;">Live Chat Messages </span><span style="font-family: Inter;">widget to the view form of the </span><span style="font-family: Inter; font-weight: bold;">Deals</span><span style="font-family: Inter;"> app. In its settings, select the </span><span style="font-family: Inter; font-weight: bold;">By app item</span><span style="font-family: Inter;"> option and choose </span><span style="font-family: Inter; font-weight: bold;">Current item</span><span style="font-family: Inter;">.</span></p>
<p style="line-height: 1.20; margin: 0 0 11px 0;"><span style="font-family: Inter;">As a result, you can see chats with customers on the deal page.</span></p>
<p style="line-height: 1.20; margin: 0 0 11px 0;"><img alt="line_chat_history-3" width="861" height="576" style="margin:0;width:861px;height:576px;border:none" src="line_chat_history-3.png"/></p>
<h2 class="p_Heading2"><span class="f_Heading2">Actions with sessions and chats in the widget</span></h2>
<p style="line-height: 1.20; margin: 7px 0 16px 0;"><span style="font-family: Inter;">After customizing the widget, you can:</span></p>
<ol style="list-style-type:decimal">
<li value="1" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">On the left </span>side of<span style="font-family: Inter;"> the widget, see a list of active sessions, which operators have linked to the app item. Operators and live chat supervisors, as well as users with <a href="create_line.html#read-access" class="topiclink">read permission to the sessions</a>, can view the messages. Operators will be able to respond to messages in the sessions assigned to them directly in the widget.</span></li><li value="2" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">In the chat window, view messages from the session selected on the left. If the customer has contacted the live chat again through the same communication channel, earlier correspondence will also be displayed above the messages from the current session. For example, the customer previously contacted the company</span><span style="font-family: Inter;">s technical support via email. After resolving the issue, the operator closed the session. If the client writes to the email address again, messages from the previous inquiry will appear in the widget above the messages from the current session. Note that previous messages are identified by the communication channel within the live chat, so earlier correspondence is displayed even if the closed session is not linked to this specific app item.</span></li><li value="3" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">View messages from all closed sessions related to the item by clicking on </span><span style="font-family: Inter; font-weight: bold;">Archive</span><span style="font-family: Inter;"> in the menu on the left.</span></li><li value="4" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">Operators and supervisors can use the widget to create new sessions. To do that, click </span><span style="font-family: Inter; font-weight: bold;">+New Session</span><span style="font-family: Inter;">. In the window that opens, select the live chat, the contact, and the account.</span></li><li value="5" style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter;">Hide or display system messages in chat, such as routing rule applied, operator reassignment, etc. To do this, in the upper panel to the right of the session name, click the three dots icon and set the desired value.</span></li></ol>
<div class="bottom-nav">
<a id="prev-link" class="topic__navi_prev" href="session-list-widget.html">
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
class="bottom-nav__link">session-list-widget.html</span>
</a>
<a id="next-link" class="topic__navi_next" href="sla-standards-for-session.html">
<span class="bottom-nav__link">sla-standards-for-session.html</span> <span
class="bottom-nav__arrow bottom-nav__arrow--next"></span>
</a>
</div>
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
<div class="feedback" id="feedback"><div class="feedback-help"><span><b>Was this helpful?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx" style="display: none;">Thanks for your feedback!</div><div class="feedback__popup" id="feedback__popup_why" style="display: none;"><div class="feedback__popup-header">Please specify why:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Recommendations did not help me</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Article is hard to understand</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Didn`t answer my question</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Content does not match the topic</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Other</label></div><div class="feedback__popup" id="feedback__popup-other" style="display: none;"><div class="feedback__popup-header">How we can improve it?</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Submit"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg" class="small-img" alt="like"><spanclass="feedback-form__btn-group_yes-btn">Yes</spanclass="feedback-form__btn-group_yes-btn"></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg" class="small-img" alt="dislike"><spanclass="feedback-form__btn-group_no-btn">No</spanclass="feedback-form__btn-group_no-btn"></label></div><select name="category"><option disabled="">Please specify why</option><option value="bad_recommendation" selected="">Recommendations did not help me</option><option value="difficult_text">Article is hard to understand</option><option value="no_answer">Didn`t answer my question</option><option value="bad_header">Content does not match the topic</option><option value="other_reason">Other</option></select><input type="submit"></form></div><div class="found_typo"><p style="margin: 0px; margin-top: 16px !important;"><span><b>Found a typo?</b></span> Select it and press <i>Ctrl+Enter</i> to send us feedback</p></div></div>
</section>
</div>
<aside class="article__sidebar" style="display:none">
<input type="checkbox" />
<div class="article__arrow"></div>
<div class="table-of-contents elma365-right" id="toc2Content">
<h3 class="h3-toc">In this topic</h3>
<nav id="toc2"></nav>
</div>
</aside>
</div>
</article>
</main>
<footer class="footer">
<div class="footer-container">
<div class="footer-mobile">
<ul class="footer-mobile__list"><li><a href="https://brix365.com/en/" target="_blank">BRIX</a></li><li><a href="https://tssdk.brix365.com/en/latest/" target="_blank">SDK</a></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li></ul><ul class="footer-mobile__list"><li><a href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li></ul>
</div>
<div class="footer-wrap">
<div><span class="mobile-question-popup">Send feedback</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Ask a question</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Send"></div></form><div class="hidden fade-in question-success-xs">Sent</div></div>
<div class="footer-flex-b">
<span class="footer-copy">&copy; 2025 BRIX</span>
<ul class="footer-list">
<li class="footer-item">
<a href="#" class="arrow-top" style="display: block;"></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<iframe name="hmnavigation" style="display:none!important"></iframe>
<script src="./jquery-ui.js"></script>
<!--script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script-->
<script src="./jquery.tocify.min.js"></script>
<script src="./TypoReporter.min.js"></script>
<script src="./google-search.js"></script>
<script src="./main.js"></script>
</body>
</html>