Chotam.ru - помощь и поддержка

<!-- ? Виджет с чатом на сайт от команды Chotam | вставьте на сайт -->
<!-- ✅ Этот код не передает никуда никаких данных, ни нам, ни каким-то третьим лицам, не делает никаких сетевых запросов, обращений за скачиваемыми модулями, шрифтами, иконками и прочим. 
     ✅ Вся логика локальна, , все иконки встроены, никаких внешних подключений.
     ✅ В случае необходимости - вносите правки - стили, иконки, цвета заливки. 
     ✅ Проверено на безопасность — можно вставлять на любой сайт. -->

<div class="chat-widget right-bottom"> 
<!-- здесь right-bottom ? - это позиция кнопки - в данном случае - справа-внизу, дефолтно. Варианты left-bottom, center-bottom -->

  <!-- Свернутая кнопка -->
  <div class="chat-button" id="chat-button">
    <div class="tooltip">Есть вопрос?</div>
    <!-- Иконка чата -->
    <svg class="icon" viewBox="0 0 24 24" fill="white">
     <g transform="translate(3, 0)"> 
      <path d="M2 21l1.65-4.95A8 8 0 1 1 10 18H3z"/>
    </g>
    </svg>
  </div>

  <!-- Раскрытое меню -->
  <div class="chat-menu" id="chat-menu">

    <!-- Кнопки соцсетей -->

    <a class="chat-item call" href="#" target="_blank" title="Позвонить">

      <svg viewBox="0 0 24 24" fill="white">
        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.031-.967-.273-.099-.472-.148-.672.15s-.773.966-.948 1.165c-.174.198-.348.223-.645.075-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.019-.458.13-.606.134-.133.298-.347.447-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.672-1.612-.92-2.203-.242-.579-.487-.5-.672-.51l-.573-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.064 2.876 1.213 3.074c.149.198 2.095 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.412.248-.694.248-1.29.173-1.412-.074-.123-.273-.198-.57-.347z"/>
      </svg>

    </a>

    <a class="chat-item whatsapp" href="#" target="_blank" title="WhatsApp">

      <svg width="360" height="362" viewBox="0 0 360 362" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M307.546 52.5655C273.709 18.685 228.706 0.0171895 180.756 0C81.951 0 1.53846 80.404 1.50408 179.235C1.48689 210.829 9.74646 241.667 25.4319 268.844L0 361.736L95.0236 336.811C121.203 351.096 150.683 358.616 180.679 358.625H180.756C279.544 358.625 359.966 278.212 360 179.381C360.017 131.483 341.392 86.4547 307.546 52.5741V52.5655ZM180.756 328.354H180.696C153.966 328.346 127.744 321.16 104.865 307.589L99.4242 304.358L43.034 319.149L58.0834 264.168L54.5423 258.53C39.6304 234.809 31.749 207.391 31.7662 179.244C31.8006 97.1036 98.6334 30.2707 180.817 30.2707C220.61 30.2879 258.015 45.8015 286.145 73.9665C314.276 102.123 329.755 139.562 329.738 179.364C329.703 261.513 262.871 328.346 180.756 328.346V328.354ZM262.475 216.777C257.997 214.534 235.978 203.704 231.869 202.209C227.761 200.713 224.779 199.966 221.796 204.452C218.814 208.939 210.228 219.029 207.615 222.011C205.002 225.002 202.389 225.372 197.911 223.128C193.434 220.885 179.003 216.158 161.891 200.902C148.578 189.024 139.587 174.362 136.975 169.875C134.362 165.389 136.7 162.965 138.934 160.739C140.945 158.728 143.412 155.505 145.655 152.892C147.899 150.279 148.638 148.406 150.133 145.423C151.629 142.432 150.881 139.82 149.764 137.576C148.646 135.333 139.691 113.287 135.952 104.323C132.316 95.5909 128.621 96.777 125.879 96.6309C123.266 96.5019 120.284 96.4762 117.293 96.4762C114.302 96.4762 109.454 97.5935 105.346 102.08C101.238 106.566 89.6691 117.404 89.6691 139.441C89.6691 161.478 105.716 182.785 107.959 185.776C110.202 188.767 139.544 234.001 184.469 253.408C195.153 258.023 203.498 260.782 210.004 262.845C220.731 266.257 230.494 265.776 238.212 264.624C246.816 263.335 264.71 253.786 268.44 243.326C272.17 232.866 272.17 223.893 271.053 222.028C269.936 220.163 266.945 219.037 262.467 216.794L262.475 216.777Z" fill="#25D366"/>
      </svg>

    </a>


    <a class="chat-item telegram" href="#" target="_blank" title="Telegram">

      <svg width="1000px" height="1000px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <linearGradient x1="50%" y1="0%" x2="50%" y2="99.2583404%" id="linearGradient-1">
                <stop stop-color="#2AABEE" offset="0%"></stop>
                <stop stop-color="#229ED9" offset="100%"></stop>
            </linearGradient>
        </defs>
        <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <circle id="Oval" fill="url(#linearGradient-1)" cx="500" cy="500" r="500"></circle>
            <path d="M226.328419,494.722069 C372.088573,431.216685 469.284839,389.350049 517.917216,369.122161 C656.772535,311.36743 685.625481,301.334815 704.431427,301.003532 C708.567621,300.93067 717.815839,301.955743 723.806446,306.816707 C728.864797,310.92121 730.256552,316.46581 730.922551,320.357329 C731.588551,324.248848 732.417879,333.113828 731.758626,340.040666 C724.234007,419.102486 691.675104,610.964674 675.110982,699.515267 C668.10208,736.984342 654.301336,749.547532 640.940618,750.777006 C611.904684,753.448938 589.856115,731.588035 561.733393,713.153237 C517.726886,684.306416 492.866009,666.349181 450.150074,638.200013 C400.78442,605.66878 432.786119,587.789048 460.919462,558.568563 C468.282091,550.921423 596.21508,434.556479 598.691227,424.000355 C599.00091,422.680135 599.288312,417.758981 596.36474,415.160431 C593.441168,412.561881 589.126229,413.450484 586.012448,414.157198 C581.598758,415.158943 511.297793,461.625274 375.109553,553.556189 C355.154858,567.258623 337.080515,573.934908 320.886524,573.585046 C303.033948,573.199351 268.692754,563.490928 243.163606,555.192408 C211.851067,545.013936 186.964484,539.632504 189.131547,522.346309 C190.260287,513.342589 202.659244,504.134509 226.328419,494.722069 Z" id="Path-3" fill="#FFFFFF"></path>
        </g>
      </svg>

    </a>

    <a class="chat-item viber" href="#" target="_blank" title="Viber">

      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 631.99 666.43"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#7360f2;}.cls-3{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:16.86px;}</style></defs><title>Artboard 5</title><path class="cls-1" d="M560.65,65C544.09,49.72,477.17,1.14,328.11.48c0,0-175.78-10.6-261.47,68C18.94,116.19,2.16,186,.39,272.55S-3.67,521.3,152.68,565.28l.15,0-.1,67.11s-1,27.17,16.89,32.71c21.64,6.72,34.34-13.93,55-36.19,11.34-12.22,27-30.17,38.8-43.89,106.93,9,189.17-11.57,198.51-14.61,21.59-7,143.76-22.65,163.63-184.84C646.07,218.4,615.64,112.66,560.65,65Z"/><path class="cls-2" d="M525.88,98.77c-14-12.72-74.43-50.69-200.52-51.24,0,0-149.31-9.81-221.79,55.84C63.23,143.2,49.64,202.43,48.15,274.71s-9.21,210.36,123,247.09h0s-.52,102.51-.58,111.52c0,6.3,1,10.61,4.6,11.5,2.59.63,6.47-.71,9.77-4,21.14-21.23,88.82-102.88,88.82-102.88,90.81,5.93,163.06-12,170.83-14.54C462.91,517.51,562,509,578.77,373.54,596.1,233.91,572.4,138.6,525.88,98.77Z"/><path class="cls-3" d="M389.47,268.77q-2.46-49.59-50.38-52.09"/><path class="cls-3" d="M432.72,283.27q1-46.2-27.37-77.2c-19-20.74-45.3-32.16-79.05-34.63"/><path class="cls-3" d="M477,300.59q-.61-80.17-47.91-126.28t-117.65-46.6"/><path class="cls-1" d="M340.76,381.68s11.85,1,18.23-6.86l12.44-15.65c6-7.76,20.48-12.71,34.66-4.81A366.67,366.67,0,0,1,437,374.1c9.41,6.92,28.68,23,28.74,23,9.18,7.75,11.3,19.13,5.05,31.13,0,.07-.05.19-.05.25a129.81,129.81,0,0,1-25.89,31.88c-.12.06-.12.12-.23.18q-13.38,11.18-26.29,12.71a17.39,17.39,0,0,1-3.84.24,35,35,0,0,1-11.18-1.72l-.28-.41c-13.26-3.74-35.4-13.1-72.27-33.44a430.39,430.39,0,0,1-60.72-40.11,318.31,318.31,0,0,1-27.31-24.22l-.92-.92-.92-.92h0l-.92-.92c-.31-.3-.61-.61-.92-.92a318.31,318.31,0,0,1-24.22-27.31,430.83,430.83,0,0,1-40.11-60.71c-20.34-36.88-29.7-59-33.44-72.28l-.41-.28a35,35,0,0,1-1.71-11.18,16.87,16.87,0,0,1,.23-3.84Q141,181.42,152.12,168c.06-.11.12-.11.18-.23a129.53,129.53,0,0,1,31.88-25.88c.06,0,.18-.06.25-.06,12-6.25,23.38-4.13,31.12,5,.06.06,16.11,19.33,23,28.74a366.67,366.67,0,0,1,19.74,30.94c7.9,14.17,2.95,28.68-4.81,34.66l-15.65,12.44c-7.9,6.38-6.86,18.23-6.86,18.23S254.15,359.57,340.76,381.68Z"/></svg>

    </a>



    <a class="chat-item instagram" href="#" target="_blank" title="Instagram">

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="1000" height="1000" viewBox="0 0 264.5833 264.5833" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)" sodipodi:docname="Instagram_(2022).svg"><defs><radialGradient id="f" cx="158.429" cy="578.088" r="52.3515" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -4.03418 4.28018 0 -2332.2273 942.2356)" fx="158.429" fy="578.088"/><radialGradient inkscape:collect="always" xlink:href="#b" id="g" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.67441 -1.16203 1.51283 .87801 -814.3657 -47.8354)" cx="172.6149" cy="600.6924" fx="172.6149" fy="600.6924" r="65"/><radialGradient inkscape:collect="always" xlink:href="#c" id="h" cx="144.012" cy="51.3367" fx="144.012" fy="51.3367" r="67.081" gradientTransform="matrix(-2.3989 .67549 -.23008 -.81732 464.9957 -26.4035)" gradientUnits="userSpaceOnUse"/><radialGradient inkscape:collect="always" xlink:href="#d" id="e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.10797 .87652 -.6315 -2.23914 1345.6503 1374.1983)" cx="199.7884" cy="628.4379" fx="199.7884" fy="628.4379" r="52.3515"/><linearGradient inkscape:collect="always" id="d"><stop offset="0" stop-color="#ff005f"/><stop offset="1" stop-color="#fc01d8"/></linearGradient><linearGradient id="c"><stop offset="0" stop-color="#780cff"/><stop stop-color="#820bff" offset="1" stop-opacity="0"/></linearGradient><linearGradient inkscape:collect="always" id="b"><stop offset="0" stop-color="#fc0"/><stop offset="1" stop-color="#fc0" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fc0"/><stop offset=".1242" stop-color="#fc0"/><stop offset=".5672" stop-color="#fe4a05"/><stop offset=".6942" stop-color="#ff0f3f"/><stop offset="1" stop-color="#fe0657" stop-opacity="0"/></linearGradient></defs><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:zoom=".515" inkscape:cx="500" inkscape:cy="500" inkscape:document-units="mm" inkscape:current-layer="layer1" inkscape:document-rotation="0" showgrid="false" inkscape:window-width="1366" inkscape:window-height="705" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1"/><g inkscape:label="Layer 1" inkscape:groupmode="layer"><path d="M204.1503 18.1429c-55.2305 0-71.3834.057-74.5232.3175-11.3342.9424-18.387 2.7275-26.0708 6.554-5.9214 2.9413-10.5915 6.3506-15.2005 11.1298-8.3938 8.7157-13.481 19.4383-15.3226 32.1842-.8953 6.1877-1.1558 7.4496-1.2087 39.0558-.0203 10.5354 0 24.4007 0 42.9984 0 55.2008.061 71.3418.3256 74.4764.9157 11.032 2.6453 17.9728 6.3081 25.565 7 14.5329 20.369 25.4428 36.119 29.5137 5.4535 1.4044 11.4767 2.1779 19.2092 2.5442 3.2762.1425 36.6684.2443 70.081.2443 33.4127 0 66.8253-.0407 70.02-.2035 8.9535-.4214 14.1526-1.1195 19.9011-2.6054 15.8517-4.0912 28.9767-14.8383 36.119-29.5748 3.5916-7.409 5.4128-14.6144 6.237-25.0704.179-2.2796.2543-38.6263.2543-74.924 0-36.304-.0814-72.5835-.2605-74.8632-.8343-10.6249-2.6555-17.7692-6.363-25.3207-3.0421-6.1816-6.42-10.798-11.324-15.518-8.752-8.3616-19.4555-13.4502-32.2101-15.2902-6.18-.8936-7.411-1.1582-39.033-1.2131z" inkscape:connector-curvature="0" fill="url(#e)" transform="translate(-71.8155 -18.1429)"/><path d="M204.1503 18.1429c-55.2305 0-71.3834.057-74.5232.3175-11.3342.9424-18.387 2.7275-26.0708 6.554-5.9214 2.9413-10.5915 6.3506-15.2005 11.1298-8.3938 8.7157-13.481 19.4383-15.3226 32.1842-.8953 6.1877-1.1558 7.4496-1.2087 39.0558-.0203 10.5354 0 24.4007 0 42.9984 0 55.2008.061 71.3418.3256 74.4764.9157 11.032 2.6453 17.9728 6.3081 25.565 7 14.5329 20.369 25.4428 36.119 29.5137 5.4535 1.4044 11.4767 2.1779 19.2092 2.5442 3.2762.1425 36.6684.2443 70.081.2443 33.4127 0 66.8253-.0407 70.02-.2035 8.9535-.4214 14.1526-1.1195 19.9011-2.6054 15.8517-4.0912 28.9767-14.8383 36.119-29.5748 3.5916-7.409 5.4128-14.6144 6.237-25.0704.179-2.2796.2543-38.6263.2543-74.924 0-36.304-.0814-72.5835-.2605-74.8632-.8343-10.6249-2.6555-17.7692-6.363-25.3207-3.0421-6.1816-6.42-10.798-11.324-15.518-8.752-8.3616-19.4555-13.4502-32.2101-15.2902-6.18-.8936-7.411-1.1582-39.033-1.2131z" inkscape:connector-curvature="0" fill="url(#f)" transform="translate(-71.8155 -18.1429)"/><path d="M204.1503 18.1429c-55.2305 0-71.3834.057-74.5232.3175-11.3342.9424-18.387 2.7275-26.0708 6.554-5.9214 2.9413-10.5915 6.3506-15.2005 11.1298-8.3938 8.7157-13.481 19.4383-15.3226 32.1842-.8953 6.1877-1.1558 7.4496-1.2087 39.0558-.0203 10.5354 0 24.4007 0 42.9984 0 55.2008.061 71.3418.3256 74.4764.9157 11.032 2.6453 17.9728 6.3081 25.565 7 14.5329 20.369 25.4428 36.119 29.5137 5.4535 1.4044 11.4767 2.1779 19.2092 2.5442 3.2762.1425 36.6684.2443 70.081.2443 33.4127 0 66.8253-.0407 70.02-.2035 8.9535-.4214 14.1526-1.1195 19.9011-2.6054 15.8517-4.0912 28.9767-14.8383 36.119-29.5748 3.5916-7.409 5.4128-14.6144 6.237-25.0704.179-2.2796.2543-38.6263.2543-74.924 0-36.304-.0814-72.5835-.2605-74.8632-.8343-10.6249-2.6555-17.7692-6.363-25.3207-3.0421-6.1816-6.42-10.798-11.324-15.518-8.752-8.3616-19.4555-13.4502-32.2101-15.2902-6.18-.8936-7.411-1.1582-39.033-1.2131z" inkscape:connector-curvature="0" fill="url(#g)" transform="translate(-71.8155 -18.1429)"/><path d="M204.1503 18.1429c-55.2305 0-71.3834.057-74.5232.3175-11.3342.9424-18.387 2.7275-26.0708 6.554-5.9214 2.9413-10.5915 6.3506-15.2005 11.1298-8.3938 8.7157-13.481 19.4383-15.3226 32.1842-.8953 6.1877-1.1558 7.4496-1.2087 39.0558-.0203 10.5354 0 24.4007 0 42.9984 0 55.2008.061 71.3418.3256 74.4764.9157 11.032 2.6453 17.9728 6.3081 25.565 7 14.5329 20.369 25.4428 36.119 29.5137 5.4535 1.4044 11.4767 2.1779 19.2092 2.5442 3.2762.1425 36.6684.2443 70.081.2443 33.4127 0 66.8253-.0407 70.02-.2035 8.9535-.4214 14.1526-1.1195 19.9011-2.6054 15.8517-4.0912 28.9767-14.8383 36.119-29.5748 3.5916-7.409 5.4128-14.6144 6.237-25.0704.179-2.2796.2543-38.6263.2543-74.924 0-36.304-.0814-72.5835-.2605-74.8632-.8343-10.6249-2.6555-17.7692-6.363-25.3207-3.0421-6.1816-6.42-10.798-11.324-15.518-8.752-8.3616-19.4555-13.4502-32.2101-15.2902-6.18-.8936-7.411-1.1582-39.033-1.2131z" inkscape:connector-curvature="0" fill="url(#h)" transform="translate(-71.8155 -18.1429)"/><path d="M132.3452 33.973c-26.7167 0-30.0696.1167-40.5629.5939-10.4727.4792-17.6212 2.136-23.8762 4.567-6.4701 2.5107-11.9586 5.8693-17.4265 11.3352-5.472 5.464-8.8332 10.9483-11.354 17.4116-2.4389 6.2524-4.099 13.3976-4.5703 23.8585-.4693 10.4854-.5923 13.8379-.5923 40.5348 0 26.697.1189 30.0371.5943 40.5225.4817 10.465 2.1397 17.6082 4.5703 23.8585 2.5147 6.4654 5.8758 11.9497 11.3458 17.4136 5.466 5.468 10.9544 8.8349 17.4204 11.3456 6.259 2.4309 13.4097 4.0877 23.8803 4.567 10.4933.477 13.8441.5938 40.5588.5938 26.7188 0 30.0615-.1167 40.5547-.5939 10.4728-.4792 17.6295-2.136 23.8885-4.567 6.4681-2.5106 11.9484-5.8775 17.4143-11.3455 5.472-5.4639 8.8332-10.9482 11.354-17.4115 2.4183-6.2524 4.0784-13.3976 4.5703-23.8585.4713-10.4854.5943-13.8277.5943-40.5246 0-26.697-.123-30.0473-.5943-40.5328-.4919-10.465-2.152-17.6081-4.5703-23.8584-2.5208-6.4654-5.882-11.9498-11.354-17.4137-5.4721-5.468-10.9442-8.8266-17.4204-11.3353-6.2714-2.4309-13.424-4.0877-23.8967-4.5669-10.4933-.4772-13.8339-.5939-40.5588-.5939zm-8.825 17.7147c2.6193-.0041 5.5418 0 8.825 0 26.2659 0 29.379.0942 39.7513.5652 9.5915.4383 14.7971 2.0397 18.2648 3.3852 4.5908 1.7817 7.8638 3.9116 11.3048 7.3521 3.4431 3.4406 5.5745 6.7173 7.3617 11.3046 1.3465 3.461 2.9512 8.6628 3.3877 18.2472.4714 10.3625.5739 13.4754.5739 39.7095 0 26.234-.1025 29.347-.5739 39.7095-.4386 9.5843-2.0412 14.7861-3.3877 18.2471-1.783 4.5874-3.9186 7.8539-7.3617 11.2923-3.443 3.4406-6.712 5.5704-11.3048 7.3521-3.4636 1.3517-8.6733 2.949-18.2648 3.3873-10.3702.471-13.4854.5734-39.7513.5734-26.2679 0-29.381-.1024-39.7513-.5734-9.5914-.4423-14.797-2.0438-18.2668-3.3893-4.5908-1.7817-7.87-3.9116-11.313-7.3521-3.4431-3.4405-5.5745-6.709-7.3617-11.2985-1.3465-3.461-2.9512-8.6628-3.3877-18.2471-.4714-10.3626-.5657-13.4754-.5657-39.7259 0-26.2504.0943-29.347.5657-39.7095.4386-9.5844 2.0412-14.7861 3.3877-18.2512 1.783-4.5874 3.9186-7.8641 7.3617-11.3046 3.443-3.4406 6.7222-5.5704 11.313-7.3562 3.4677-1.3517 8.6754-2.949 18.2668-3.3894 9.075-.4096 12.5919-.5324 30.9264-.553zm61.3363 16.322c-6.5173 0-11.805 5.2776-11.805 11.792 0 6.5125 5.2877 11.7962 11.805 11.7962 6.5172 0 11.8049-5.2837 11.8049-11.7962 0-6.5124-5.2877-11.796-11.805-11.796zm-52.5113 13.7826c-27.8993 0-50.5191 22.6031-50.5191 50.4817 0 27.8786 22.6198 50.4714 50.5191 50.4714s50.511-22.5928 50.511-50.4714c0-27.8786-22.6137-50.4817-50.513-50.4817zm0 17.7147c18.109 0 32.7914 14.6694 32.7914 32.767 0 18.0956-14.6824 32.767-32.7914 32.767-18.111 0-32.7913-14.6714-32.7913-32.767 0-18.0976 14.6803-32.767 32.7913-32.767z" inkscape:connector-curvature="0" fill="#fff"/></g></svg>

    </a>

    <a class="chat-item facebook" href="#" target="_blank" title="Facebook">

      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="2126px" height="2126px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
      viewBox="0 0 2126 2126"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
       <defs>
        <style type="text/css">
         <![CDATA[
          .fil0 {fill:#0866FF;fill-rule:nonzero}
          .fil1 {fill:white;fill-rule:nonzero}
         ]]>
        </style>
       </defs>
       <g id="Layer_x0020_1">
        <metadata id="CorelCorpID_0Corel-Layer"/>
        <path class="fil0" d="M2104.68 1063c0,-575.3 -466.38,-1041.68 -1041.68,-1041.68 -575.3,0 -1041.67,466.38 -1041.67,1041.68 0,488.52 336.31,898.43 790.03,1011l0 -692.68 -214.8 0 0 -318.32 214.8 0 0 -137.16c0,-354.56 160.45,-518.89 508.53,-518.89 66,0 179.87,12.94 226.45,25.88l0 288.56c-24.59,-2.59 -67.29,-3.89 -120.34,-3.89 -170.81,0 -236.8,64.71 -236.8,232.92l0 112.58 340.25 0 -58.46 318.32 -281.79 0 0 715.73c515.78,-62.3 915.48,-501.47 915.48,-1034.05z"/>
        <path class="fil1" d="M1470.99 1381.32l58.46 -318.32 -340.25 0 0 -112.58c0,-168.22 65.99,-232.91 236.8,-232.91 53.05,0 95.75,1.29 120.34,3.88l0 -288.56c-46.58,-12.94 -160.46,-25.88 -226.45,-25.88 -348.08,0 -508.54,164.34 -508.54,518.89l0 137.16 -214.8 0 0 318.32 214.8 0 0 692.68c80.6,19.99 164.87,30.68 251.65,30.68 42.72,0 84.82,-2.64 126.2,-7.63l0 -715.73 281.79 0z"/>
       </g>
      </svg>

    </a>

    <a class="chat-item vk" href="#" target="_blank" title="ВКонтакте">

      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 23.04C0 12.1788 0 6.74826 3.37413 3.37413C6.74826 0 12.1788 0 23.04 0H24.96C35.8212 0 41.2517 0 44.6259 3.37413C48 6.74826 48 12.1788 48 23.04V24.96C48 35.8212 48 41.2517 44.6259 44.6259C41.2517 48 35.8212 48 24.96 48H23.04C12.1788 48 6.74826 48 3.37413 44.6259C0 41.2517 0 35.8212 0 24.96V23.04Z" fill="#0077FF"/>
      <path d="M25.54 34.5801C14.6 34.5801 8.3601 27.0801 8.1001 14.6001H13.5801C13.7601 23.7601 17.8 27.6401 21 28.4401V14.6001H26.1602V22.5001C29.3202 22.1601 32.6398 18.5601 33.7598 14.6001H38.9199C38.0599 19.4801 34.4599 23.0801 31.8999 24.5601C34.4599 25.7601 38.5601 28.9001 40.1201 34.5801H34.4399C33.2199 30.7801 30.1802 27.8401 26.1602 27.4401V34.5801H25.54Z" fill="white"/>
      </svg>

    </a>



    <a class="chat-item odnoklassniki" href="#" target="_blank" title="Одноклассники">


      <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_1_3286)">
      <g clip-path="url(#clip1_1_3286)">
      <path d="M0.599976 95.7C0.599976 50.7 0.599976 28.1 14.5 14.1C28.6 0.200013 51.1 0.200012 96.2 0.200012H104.2C149.2 0.200012 171.8 0.200013 185.8 14.1C199.7 28 199.7 50.7 199.7 95.7V103.7C199.7 148.7 199.7 171.3 185.8 185.3C171.9 199.2 149.2 199.2 104.2 199.2H96.2C51.2 199.2 28.6 199.2 14.6 185.3C0.599976 171.3 0.599976 148.8 0.599976 103.7V95.7Z" fill="#FF7700"/>
      <path d="M100.1 99.2C109.8 99.2 118.6 95.2 124.9 88.9C131.2 82.6 135.2 73.8 135.2 64.1C135.2 54.4 131.2 45.6 124.9 39.3C118.6 33 109.8 29 100.1 29C90.3999 29 81.5999 33 75.2999 39.3C68.9999 45.5 64.9999 54.3 64.9999 64.1C64.9999 73.9 68.9999 82.6 75.2999 88.9C81.5999 95.2 90.4999 99.2 100.1 99.2ZM88.8999 52.7C91.7999 49.8 95.7999 48 100.2 48C104.7 48 108.6 49.8 111.5 52.7C114.4 55.6 116.2 59.6 116.2 64C116.2 68.5 114.4 72.4 111.5 75.3C108.6 78.2 104.6 80 100.2 80C95.6999 80 91.7999 78.2 88.8999 75.3C85.9999 72.4 84.1999 68.4 84.1999 64C84.1999 59.6 86.0999 55.6 88.8999 52.7Z" fill="white"/>
      <path d="M147.5 113.4L137.2 99.3C136.6 98.5 135.4 98.4 134.7 99.1C125 107.4 113 112.8 100.1 112.8C87.2 112.8 75.3 107.4 65.5 99.1C64.8 98.5 63.6 98.6 63 99.3L52.7 113.4C52.2 114.1 52.3 115 52.9 115.6C61.6 122.6 71.7 127.4 82.2 129.9L60.4 168.3C59.8 169.4 60.6 170.8 61.8 170.8H83.1C83.8 170.8 84.4 170.4 84.6 169.7L99.8 135.7L115 169.7C115.2 170.3 115.8 170.8 116.5 170.8H137.8C139.1 170.8 139.8 169.5 139.2 168.3L117.4 129.9C127.9 127.4 138 122.8 146.7 115.6C148 115 148.1 114.1 147.5 113.4Z" fill="white"/>
      </g>
      </g>
      <defs>
      <clipPath id="clip0_1_3286">
      <rect width="200" height="200" fill="white"/>
      </clipPath>
      <clipPath id="clip1_1_3286">
      <rect width="200" height="200" fill="white"/>
      </clipPath>
      </defs>
      </svg>

    </a>

    <a class="chat-item general" href="#" target="_blank" title="Чат на сайте">
      <svg viewBox="0 0 24 24" fill="white">
        <g transform="translate(2, 0)">
         <path d="M2 21l1.65-4.95A8 8 0 1 1 10 18H3z"/>
        </g>
      </svg>
    </a>

    <!-- Кнопка закрытия -->
    <div class="chat-close" id="chat-close" title="Закрыть">
      <svg viewBox="0 0 24 24" fill="white"><path d="M18 6L6 18M6 6l12 12"/></svg>
    </div>
  </div>
</div>

<style>

/* --- Базовые стили --- */
.chat-widget {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* --- Позиции --- */
.right-bottom   { bottom: 20px; right: 20px; }
.left-bottom    { bottom: 20px; left: 20px; }
.center-bottom  { bottom: 20px; left: 50%; transform: translateX(-50%); }
.right-center   { top: 50%; right: 20px; transform: translateY(-50%); }
.left-center    { top: 50%; left: 20px; transform: translateY(-50%); }

/* --- Кнопка чата (свёрнуто) --- */
.chat-button {
  background: #007aff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-button .icon {
  width: 28px;
  height: 28px;
}

.chat-button .tooltip {
  position: absolute;
  top: -35px;
  background: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
}

/* --- Меню соцсетей --- */
.chat-menu {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: fadeIn 0.2s ease-in-out;
}

.chat-item {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.chat-item:hover {
  transform: scale(1.1);
}

/* Цвета заливки кнопок - изначально внешний чат и позвонить - сплошные цветные, соцсети и мессенджеры - белый фон */
.call            { background: #34d058; }
.whatsapp        { background: #FFFFFF; }
.telegram        { background: #FFFFFF; }
.viber           { background: #FFFFFF; }
.instagram       { background: #FFFFFF; }
.facebook        { background: #FFFFFF; }
.vk              { background: #FFFFFF; }
.odnoklassniki   { background: #FFFFFF; } 
.general         { background: #007aff; }

.chat-item svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* Кнопка закрытия */
.chat-close {
  background: #555;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.chat-close svg {
  width: 20px;
  height: 20px;
  stroke: white;
  stroke-width: 2;
  fill: none;
}

/* Анимация появления */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
</style>

<script>
const chatButton = document.getElementById('chat-button');
const chatMenu = document.getElementById('chat-menu');
const chatClose = document.getElementById('chat-close');

chatButton.addEventListener('click', () => {
  chatButton.style.display = 'none';
  chatMenu.style.display = 'flex';
});

chatClose.addEventListener('click', () => {
  chatMenu.style.display = 'none';
  chatButton.style.display = 'flex';
});
</script>
<!-- конец виджета на сайте от Chotam -->