Как сделать отдельную кнопку вызова «Яндекс чата»?

Question

[Денис Московский]

Есть чат от "Яндекс" размещенный на сайте, скрыл его на смартфонах, чтобы не мешал, но хочу вызывать его отдельной кнопкой в меню, как можно реализовать?
#livechat_mobile - id кнопки в меню

скрипт чата:

(function () {
        if($(document).width()< 400){return;}
        window['yandexChatWidgetCallback'] = function() {
            try {
                window.yandexChatWidget = new Ya.ChatWidget({
                    guid: '47c5579c-d37f-4cd4-9b40-93e72da02a76',
                    buttonText: 'Онлайн чат',
                    title: 'Онлайн консультация',
                    theme: 'light',
                    collapsedDesktop: 'never',
                    collapsedTouch: 'always'
                });
            } catch(e) { }
        };
        var n = document.getElementsByTagName('script')[0],
        s = document.createElement('script');
        s.async = true;
        s.charset = 'UTF-8';
        s.src = '/s3/chat/widget.js';
//      s.src = 'https://yastatic.net/s3/chat/widget.js';
        n.parentNode.insertBefore(s, n);
    })();

пытался так:

$('#livechat_mobile').on('click', function(){
    $('.ya-chat-button').trigger('click');
    });

на сайте выводится вот так:

<div data-ref="widget" class="ya-chat-widget ya-chat-widget_desktop ya-chat-widget_theme_light ya-chat-widget_size_normal">
            
            
        <a data-ref="button" class="ya-chat-button ya-chat-button_theme_light ya-chat-button_collapsed_never ya-chat-button_size_normal ya-chat-button_desktop">
            <div class="ya-chat-button__container ya-chat-button__container_size_normal">
                <svg class="ya-chat-icon ya-chat-icon_type_colored ya-chat-icon_size_normal" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0)">
        <g filter="url(#filter0_d)">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C2.8 0 0 2.8 0 14C0 25.2 2.8 28 14 28C25.2 28 28 25.2 28 14C28 2.8 25.2 0 14 0Z" fill="#00D7D7"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C2.8 0 0 2.8 0 14C0 25.2 2.8 28 14 28C25.2 28 28 25.2 28 14C28 2.8 25.2 0 14 0Z" fill="url(#paint0_linear)"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C2.8 0 0 2.8 0 14C0 25.2 2.8 28 14 28C25.2 28 28 25.2 28 14C28 2.8 25.2 0 14 0Z" fill="url(#paint1_linear)"></path>
        </g>
            <path d="M25.0249 13.7106C24.9593 13.5028 24.8061 13.3169 24.5983 13.1965L8.49834 4.16217C7.86396 3.81217 7.0874 4.2606 7.0874 4.99342V7.11529V8.38404L25.0249 13.7106Z" fill="#FAFFFE"></path>
            <path d="M7.0874 20.9013V23.0231C7.0874 23.745 7.86396 24.2044 8.49834 23.8544L24.5983 14.831C24.8171 14.7106 24.9593 14.5247 25.0249 14.3169L7.0874 19.6216V20.9013Z" fill="#C8F4F9"></path>
            <path d="M7.08759 8.37787L5.87353 8.01693C5.07509 7.77631 4.38603 8.60756 4.7579 9.35131L5.41415 10.6529L6.87978 13.5732L7.09853 13.9997V8.37787H7.08759Z" fill="#DEF8FB"></path>
            <path d="M7.0874 13.9998H25.0796C25.0796 13.8904 25.0577 13.792 25.0249 13.6936L7.0874 8.37793V13.9998Z" fill="#DEF8FB"></path>
            <path d="M7.09853 14.0005L4.7579 18.6489C4.38603 19.3927 5.07509 20.2239 5.87353 19.9833L7.08759 19.6224V14.0005H7.09853Z" fill="#FAFFFE"></path>
            <path d="M7.0874 19.6219L25.0358 14.3063C25.0686 14.2078 25.0905 14.0984 25.0905 14H7.0874V19.6219Z" fill="#FAFFFE"></path>
        </g>
        <defs>
        <filter id="filter0_d" x="-25.7204" y="-14.7308" width="79.4408" height="79.4408" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
            <feOffset dy="10.9896"></feOffset>
            <feGaussianBlur stdDeviation="12.8602"></feGaussianBlur>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"></feColorMatrix>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
        </filter>
        <linearGradient id="paint0_linear" x1="44.8437" y1="-28.5469" x2="14" y2="16.5156" gradientUnits="userSpaceOnUse">
            <stop stop-color="white"></stop>
            <stop offset="1" stop-color="white" stop-opacity="0"></stop>
        </linearGradient>
        <linearGradient id="paint1_linear" x1="14" y1="33.3594" x2="34.3437" y2="-11.4844" gradientUnits="userSpaceOnUse">
            <stop stop-color="#00BCBC"></stop>
            <stop offset="1" stop-color="white" stop-opacity="0"></stop>
        </linearGradient>
        <clipPath id="clip0">
            <path d="M0 0H28V28H0V0Z" fill="white"></path>
        </clipPath>
        </defs>
    </svg>
                
        <div class="ya-chat-button__text">
            <div class="ya-chat-button__text-container">Онлайн чат</div>
        </div>
            </div>
            
        <div data-ref="badge" class="ya-chat-badge ya-chat-badge_theme_light ya-chat-badge_type_num ya-chat-badge_size_normal">
            <div data-ref="badgeCount" class="ya-chat-badge__count"></div>
        </div>
    
        </a>
            
        <div data-ref="paranja" data-attach-to="" class="ya-chat-paranja"></div>
        
        <div data-ref="popup" data-attach-to="" style="" class="ya-chat-popup ya-chat-popup_position_static ya-chat-popup_desktop ya-chat-popup_theme_light">
            <div class="ya-chat-popup__content-wrapper" style="width: 360px; height: 520px">
                
            
        <div data-ref="header" class="ya-chat-header ya-chat-header_theme_light ya-chat-header_visible">
            <div class="ya-chat-header__text">
                Онлайн консультация
            </div>
            <div data-ref="headerClose" class="ya-chat-header__close"></div>
        </div>
    
            
        <div data-ref="close" class="ya-chat-close ya-chat-close_theme_light">
            <div data-ref="closeButton" class="ya-chat-close__button-box">
                <div class="ya-chat-close__button"></div>
            </div>
        </div>
    
            <div data-ref="mount:widget__mount" class="ya-chat-widget__mount">
                
        <div data-ref="loader" class="ya-chat-loader ya-chat-loader_theme_light">
            <div class="ya-chat-loader__spinner"></div>
        </div>
    
            <iframe scrolling="no" src="https://yandex.ru/chat?build=widget&amp;lang=ru&amp;parentOrigin=https%3A%2F%2Fxn--b1aftlcheoc0h.xn--p1ai&amp;parentUrl=https%3A%2F%2Fxn--b1aftlcheoc0h.xn--p1ai%2F&amp;flags=newHeader%3D1%3Bembed_button%3D1&amp;widgetId=msngr_widget_1q6i0e" class="ya-chat-messenger-iframe ya-chat-messenger-iframe_visible" allow="microphone; camera"></iframe></div>
            
        <div data-ref="error" class="ya-chat-error ya-chat-error_theme_light">
            <div class="ya-chat-error__title">Не удалось загрузить чат</div>
            <div class="ya-chat-error__button">Попробовать ещё раз</div>
        </div>
    
        
            </div>
        </div>
    
    
        </div>

Но с JS только знакомлюсь, по этому нужна помощь.

Answer 1

[Mario Kun]

let button = document.querySelectorAll('body > div.ya-chat-widget.ya-chat-widget_desktop.ya-chat-widget_theme_light.ya-chat-widget_size_normal > a')[0];

$('#livechat_mobile').on('click', function(){
    button.dispatchEvent(new Event('click'));
    });

Comments

[Денис Московский]

Похоже кнопку не определяет... Заглянул в консоль, там ошибка:

Uncaught ReferenceError: button is not defined
    at HTMLAnchorElement.<anonymous> ((index):4861)
    at HTMLAnchorElement.dispatch (jquery-2.1.3.min.js?154355934684320:3)
    at HTMLAnchorElement.r.handle (jquery-2.1.3.min.js?154355934684320:3)
(anonymous) @ (index):4861
dispatch @ jquery-2.1.3.min.js?154355934684320:3
r.handle @ jquery-2.1.3.min.js?154355934684320:3

Не подскажите, что может быть не так?