Link to open chat

If you need to open a chat when clicking on a link or after some event. You can use this js code;
<a onclick="document.dispatchEvent(new Event('tocha:open'));" href="javascript:void(0);">Example link</a>< /textarea> <a onclick="document.dispatchEvent(new Event('tocha:open'));" href="javascript:void(0);">Example link</a>  <br><br> <p>To open a chat by having #hash, you can use the following code:</p><pre>document.addEventListener('tocha:loaded', () => {if(window.location.hash === '#start') { document.dispatchEvent(new Event('tocha:open'));}});</pre > <a target="_blank" href="https://tocha.online#start">Example link</a>
        </div>
        <div class="col-md-4 col-sm-12 col-12">

            <ul class="list-group howto-menu">
                                    <li class="list-group-item"><a href="/en/content/howto/howto-create-bot" class="footel__link">Creating telegram bot</a></li>
                                    <li class="list-group-item"><a href="/en/content/howto/howto%20assistant" class="footel__link">How to add an assistant</a></li>
                                    <li class="list-group-item"><a href="/en/content/howto/howto-bot-control" class="footel__link">Bot management</a></li>
                                    <li class="list-group-item"><a href="/en/content/howto/howto-templates" class="footel__link">How to work with templates</a></li>
                                    <li class="list-group-item"><a href="/en/content/howto/howto%20support" class="footel__link">Command /support</a></li>
                                    <li class="list-group-item"><a href="/en/content/howto/howto-user-label" class="footel__link">How user tags work</a></li>
                                    <li class="list-group-item"><a href="/en/content/howto/howto-js-events" class="footel__link">Javascript Events</a></li>
                                    <li class="list-group-item active"><a href="/en/content/howto/howto-js-open-chat" class="footel__link">Link to open chat</a></li>
                                    <li class="list-group-item"><a href="/en/content/howto/howto-customize-css" class="footel__link">Customization with CSS</a></li>
                                    <li class="list-group-item"><a href="/en/content/howto/howto_cookies" class="footel__link">Notice about the use of cookies</a></li>
                            </ul>

        </div>
    </div>
</div>

            </div></div>
    </main>


<footer class="footer">
    <div class="container-md">
        <div class="row">
            <div class="col-lg-2 col-md-4 col-12">
                <div class="footer__logo"><img src="/build/images/dist/logo.png" alt="Tocha online"> tocha</div>
            </div>
            <div class="col-lg-10 col-md-8 col-12 flex">
                <div class="footer__item">
                    <div class="footer__title"><a href="/en/widget_install">How to install?</a></div>
                    <ul class="footer__list">
                        <li><a href="/en/widget_install#wordpress" class="footer__link">Wordpress</a></li>
                        <li><a href="/en/widget_install#tilda" class="footer__link">Tilda</a></li>
                        <li><a href="/en/widget_install#bitrix" class="footer__link">Bitrix</a></li>
                    </ul>
                </div>
                <div class="footer__item">
                    <div class="footer__title"><a href="/en/howto">Popular Questions</a></div>
                    <ul class="footer__list">

                                                    <li>
                                                                    <a href="/en/content/howto/howto-create-bot" class="footer__link">Creating telegram bot</a>
                                                            </li>
                                                    <li>
                                                                    <a href="/en/content/howto/howto%20assistant" class="footer__link">How to add an assistant</a>
                                                            </li>
                                                    <li>
                                                                    <a href="/en/content/howto/howto-bot-control" class="footer__link">Bot management</a>
                                                            </li>
                                                    <li>
                                                                    <a href="/en/content/howto/howto-templates" class="footer__link">How to work with templates</a>
                                                            </li>
                                                    <li>
                                                                    <a href="/en/content/howto/howto%20support" class="footer__link">Command /support</a>
                                                            </li>
                                                    <li>
                                                                    <a href="/en/content/howto/howto-user-label" class="footer__link">How user tags work</a>
                                                            </li>
                                                    <li>
                                                                    <a href="/en/content/howto/howto-js-events" class="footer__link">Javascript Events</a>
                                                            </li>
                                                    <li>
                                                                    <span class="footer__link">Link to open chat</span>
                                                            </li>
                                                    <li>
                                                                    <a href="/en/content/howto/howto-customize-css" class="footer__link">Customization with CSS</a>
                                                            </li>
                                                    <li>
                                                                    <a href="/en/content/howto/howto_cookies" class="footer__link">Notice about the use of cookies</a>
                                                            </li>
                                            </ul>
                </div>
                <div class="footer__item">
                    <ul class="footer__list">
                        <li><a href="/en/updates" class="footer__link">Updates</a></li>
                        <li><a href="/en/agreement" class="footer__link">Privacy policy</a></li>
                    </ul>


                    <div style="margin-top: 40px" class="footer__title"><a href="https://t.me/tocha_online">Telegram channel
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
                                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path>
                            </svg>
                        </a></div>

                </div>
            </div>
        </div>
    </div>
    <div class="footer__bottom">
        <div class="container">
            <div class="row">
                <div class="col-3">
                    © 2024 Tocha All rights reserved
                </div>
                <div class="col-3">
                    <a class="footer__link" href="mailto:support@tocha.online">support@tocha.online</a>
                </div>
                <div class="col-3 text-end">
                    version:0.1.1
                </div>
                <div class="col-3"></div>
            </div>
        </div>
    </div>
</footer>

<script src="/build/app.e8698377.js"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    ym(85090753, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
    });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/85090753" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

            <script type='text/javascript'>
            (function(){
                document.addEventListener('tocha:loaded', () => {
                    let te = document.getElementsByTagName('telegram-web-chat')[0];
                    te.addEventListener('tocha:first-message-send', (e) => {
                        ym(85090753,'reachGoal','first-message-send');
                        console.log('first-message-send');
                    });
                    te.addEventListener('tocha:message-send', (e) => {
                        //при отправке сообщения пользователем
                        //например ym(1234567,'reachGoal','message-send');
                        console.log('message-send');
                    });
                    te.addEventListener('tocha:open-chat-window', (e) => {
                        ym(85090753,'reachGoal','open_chat');
                        console.log('open_chat');
                    });
                });

                var s = document.createElement('script');
                let userLabel  = 'test';
                s.type = 'text/javascript';
                s.async = true;
                s.src = encodeURI('https://tocha.online/0fec82379952eaea1c6ff27d87d35b77/widget.js?userLabel=' + userLabel);
                var ss = document.getElementsByTagName('script')[0];
                ss.parentNode.insertBefore(s, ss);
            })();
        </script>
        <telegram-web-chat></telegram-web-chat>
    
</body>
</html>