Мини чат (Ucoz), вид как в вайбере.

В вайбере тот кто пишет всегда находится справа(собеседники слева), воспроизведём такое же.
Итак, в "Вид материалов" модуля чат ставим код

Код

<style>body {background:url(здесь ссылка на фон) no-repeat 0%0%/cover fixed !important;}</style>  
  <div class="rsrt">  
  <div class="rsblock">  
  <div class="rsava">  
  <a href="$PROFILE_URL$" title="$USERNAME$" rel="nofollow">  
  <img class="rsimg" src="$AVATAR_URL$" alt="name" /></a>  
  <a class="User$GID$" href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;">$USERNAME$</a>  
  </div>  
  <div class="rsmesr trs">$MESSAGE$  
  <div class="rstime">$TIME$</div>  
  </div>  
  </div>  
  <div class="gb" style="display:none;">$USERNAME$</div>  
  </div>

Первая строчка это фон нашего чата, ссылку задайте из файл-менеджера, предварительно загрузив туда вашу картинку.
Далее, в таблицу стилей CSS, пропишем это

Код

.rsrt {width:80%;float:right;margin:5px 2px;}
.rsblock {display:flex;flex-direction:row-reverse;}
.rsmess, .rsmesr {align-self:flex-start;min-width:0px;word-wrap:break-word;padding:5px; border-radius:10px; position:relative; color:#000;}
.rsmess {background:#fff;}
.rsmesr {background:#b3e0ff;}
.rsava {flex:0 1 55px;align-self:flex-start;min-width:55px;text-align:center; word-wrap:break-word;}
.rsimg {margin:auto;display:block; width:40px;height:40px;border-radius:40%;}
.rstime {font-size:10px;color:#808080;padding:2px;text-align:right;}
.rsmesr::after {
content:"";
position:absolute;  
width:5px;
left:100%;
top:0px;
border-radius:8px 0px 0px 0px;
padding:5px;
box-shadow:-8px 0px 0px 0px #b3e0ff;
z-index:-1;
}
.rsmess::before {
content:"";
position:absolute;  
width:5px;
right:100%;
top:0px;
border-radius:0px 8px 0px 0px;
padding:5px;
box-shadow:8px 0px 0px 0px #fff;
z-index:-1;  
}

И в глобальный блок "Нижняя часть сайта" поместим небольшой скрипт.

Код

<script>
/*--- written sentimo viberchat_v1.01 http://css-html.do.am/ ---*/
  $(function() {$('#mchatIfm2').load(function(){
var iframe = $($('#mchatIfm2')[0].contentWindow.document.body);
  iframe.find(".gb").each(function(){
  if ($(this).text() !== '$USERNAME$'){
  $(this).parent().css('float', 'left').end().prev().css('flex-direction', 'row');
  $(this).prev().find('.trs').addClass('rsmess').removeClass('rsmesr');}
});
});});
</script>

Ну и пример, Тыц...
P.S. Для не авторизованных пользователей(гостей) все участники чата будут слева, а вот авторизованный пользователь всегда будет справа, как в вайбере.