How to move the Yandex.dialogs chat to the left side of the site?

Question

JavaScript

<script type='text/javascript'>
(function () {
    window['yandexChatWidgetCallback'] = function() {
        try {
            window.yandexChatWidget = new Ya.ChatWidget({
                guid: 
                buttonText: 'Начать чат ',
                title: 'Чат',
                theme: 'dark',
                collapsedDesktop: 'never',
                collapsedTouch: 'always'
            });
        } catch(e) { }
    };
    var n = document.getElementsByTagName('script')[0],
        s = document.createElement('script');
    s.async = true;
    s.src = 'https://chat.s3.yandex.net/widget.js';
    n.parentNode.insertBefore(s, n);

Hello everyone, you need to transfer the Yandex.dialog chat from the right side of the site to the left.
How can I do that?
I looked at the widget code, but I did not see the line with the location.
I tried widgetPosition and simply position, but the widget is not even shown on the site.

Answer 1

The Yandex.Dialogs script is loaded asynchronously, so the synchronous code in JS is executed first and does not catch the widget element. Disable asynchrony by removing the option (line) in the script
//s.async = true; . Then we hang on the DOMContentLoaded event ( https://learn.javascript.ru/onload-ondomcontentloaded) callBack
document.addEventListener('DOMContentLoaded', () => {
const yaChatWidget = document.querySelector('.ya-chat-widget') ;
});
} in callBack we do whatever we want with the widget, well, or almost)

Answer 2

Hello, it didn’t work out and didn’t touch the code itself and used such a tool as a live site, so try it.

Answer 3

(function () {
    window['yandexChatWidgetCallback'] = function() {
        try {
            window.yandexChatWidget = new Ya.ChatWidget({
                guid: 'BEB9CD86-BB2E-4A86-BB9F-111956F9C2B7',
                buttonText: '',
                title: 'Чат',
                theme: 'light',
                collapsedDesktop: 'never',
                collapsedTouch: 'never'
            });
        } catch(e) { }
    };
    var n = document.getElementsByTagName('script')[0],
        s = document.createElement('script');
    s.async = false;
    s.charset = 'UTF-8';
    s.src = 'https://yastatic.net/s3/chat/widget.js';
    n.parentNode.insertBefore(s, n);
  })();
 
function ready() {
   const yaChatWidget = document.querySelector('.ya-chat-widget');
   if (yaChatWidget) {
       yaChatWidget.style.cssText = 'vertical-align: top!important; top: 500px!important; bottom: auto!important'
   }
}

document.addEventListener("readystatechange", ready);

a simple option, it unfolds there in height, so they did not complicate