Simple customer help widget on pure JS. Code examle

<div class="sidebar-follow">
    <div class="sidebar-follow-icon" style="display:none">

        <div class="sidebar-follow-button sidebar-close-button" onclick="toggleImage();">х</div>

        <ul class='social'>
            <li>
                <a href="https://m.me/JamasterUa/" rel="nofollow" target="_blank">

                    <svg width="30" color="red" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 167.657 167.657"
                        style="enable-background:new 0 0 167.657 167.657;" xml:space="preserve">

                        <path style="fill:#2962ff;" d="M83.829,0.349C37.532,0.349,0,37.881,0,84.178c0,41.523,30.222,75.911,69.848,82.57v-65.081H49.626
            v-23.42h20.222V60.978c0-20.037,12.238-30.956,30.115-30.956c8.562,0,15.92,0.638,18.056,0.919v20.944l-12.399,0.006
            c-9.72,0-11.594,4.618-11.594,11.397v14.947h23.193l-3.025,23.42H94.026v65.653c41.476-5.048,73.631-40.312,73.631-83.154
            C167.657,37.881,130.125,0.349,83.829,0.349z" />
                    </svg>

                    <span>Ask a question on <strong>Facebook</strong></span>
                </a>
            </li>
            <li>
                <a href="https://t.me/Jamaster_bot" rel="nofollow" target="_blank">

                    <svg aria-hidden="true" width="30" focusable="false" data-prefix="fab" data-icon="telegram-plane"
                        class="svg-inline--fa fa-telegram-plane fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 448 512">
                        <path fill="#27a3e2"
                            d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z">
                        </path>
                    </svg>


                    <span>Write to us in <strong>Telegram</strong></span>
                </a>
            </li>

            <li>

                <a href="https://tinyurl.com/jamaster-viber" rel="nofollow" target="_blank">


                    <svg aria-hidden="true" width="30" focusable="false" data-prefix="fab" data-icon="viber"
                        class="svg-inline--fa fa-viber fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512">
                        <path fill="#7b519c"
                            d="M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z">
                        </path>
                    </svg>

                    <span>Ask in Viber</span>
                </a>
            </li>


        </ul>


    </div>

    <div class="sidebar-online-header">
    <div class="sidebar-online"></div>
    <div class="weonline">Support</div>
    </div>

    <div class="sidebar-follow-button" style="top:0px;z-index:999;" onclick="toggleImage();">
        <span>Write to us!</span>
        <div class="follow-but pulse"><i class="fa fa-comments-o" aria-hidden="true"></i>Write</div>
    </div>

</div>

.sidebar-follow-button span {
    font-size: 15px;
    display: block;
    margin: 3px 0px 4px 0px;
}


.weonline {
    font-size: 110%;
    font-weight: bold;
    text-align: right;
}

@-webkit-keyframes pulsed {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.2, 1.2, 1.2);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulsed {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.2, 1.2, 1.2);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}


.sidebar-online {
    display: block;
    width: 15px;
    height: auto;
    background: #13c616;
    border-radius: 10px;
    border: 1px solid yellow;
    padding: 5px;
    -webkit-animation: pulsed 1.25s infinite;
    animation: pulsed 1.25s infinite;
    margin-right: 10px;
    margin-left: 5px;
    box-shadow: 0px 1px #514f4f;
}

.follow-but {
    background: #151412;
    padding: 5px;
    margin: 2px;
    text-align: center;
    background: #ffaa01;
}

.follow-but:hover {
    background: #c8880a;
    transition: .5 ease-in all;
}

.sidebar-online-header {
    display: flex;
    align-items: center;
    padding: 2px;
    border-bottom: 1px dashed #edf4f58c;
}

.sidebar-follow {
    cursor: pointer;
    background: #769ece;
    border-radius: 5px;
    display: block;
    width: 115px;
    color: #FFF;
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 9999;
    font-size: 14px;
    opacity: 0.8;
    padding: 5px;
    transition: 1s ease-in both;
    box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
}

.social {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
    padding: 0;
    clear: both;
    background: #7897be;
    border: 1px solid #eeeeee4f;
    padding: 10px 0;
}

.sidebar-close-button {
    background: #ffaa01;
    display: block;
    width: 30px;
    height: 30px;
    font-size: 30px;
    text-align: center;
    float: right;
    margin-bottom: 7px;
    text-shadow: -1px 2px black;
}



.social li {
    width: 100%;
    max-width: 60px;
}

.social li a {
    display: block;
    background: #ffffff;
    font: normal normal normal 16px/20px 'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    transition: background 0.5s ease 0.3ms;
}

.social li:first-child a:hover {
    background: #8dc9e96b;
}

.social li:nth-child(2) a:hover {
    background: #8cddfc47;
}

.social li:nth-child(3) a:hover {
    background: #c8a3e399;
}


.social li:first-child a {
    border-radius: 0 5px 0 0;
}

.social li:last-child a {
    border-radius: 0 0 5px 0;
}

.social li a span {
    width: 100px;
    float: right;
    text-align: center;
    background: #222;
    color: #fff;
    margin: -25px 74px;
    padding: 8px;
    transform-origin: 0;
    visibility: hidden;
    opacity: 0;
    transform: rotateY(45deg);
    border-radius: 5px;
    transition: all 0.5s ease 0.3ms;
}



.social li a:hover span {
    visibility: visible;
    opacity: 1;
    transform: rotateY(0);
}