Whatsapp y Facebook chat (nuevo) - Bsale-IO/template-docs GitHub Wiki

{% assign chat_icon = '<i class="fas fa-comment-dots"></i>' %}
{% assign close_icon = '<i class="fas fa-times"></i>' %}
{% assign image = site.logo %}
{% assign message = "¡Hola! ¿Necesitas ayuda? Escríbenos " %}
{% assign color-button = "orange" %}
{% assign size-button = "36px" %}
{% assign left = false %}



{% assign chat = false %}
{% for rrss in site.social_networks %}
    {% assign rs_title = rrss.title | downcase %}
    {% if rs_title contains "facebook" or rs_title contains "whatsapp" %}
        {% assign chat = true %}
        {%break%}
    {%endif %}
{% endfor %}
{% if chat %}
<div class="dropdown chat-widget">
<button class="dropdown-toggle chat-widget__btn" type="button" data-toggle="dropdown" aria-expanded="false">
    <span class='chat-widget__chat-icon'>{{chat_icon}}</span>
    <span class='chat-widget__close-icon'>{{close_icon}}</span>
</button>
<div class="dropdown-menu">
    <div class="chat-widget__content">
        <img  class="chat-widget__img" loading='lazy' src="{{image | image_url: 'T'}}">
        <div class="chat-widget__message">{{message}}</div>
        <div class="chat-widget__chat-list">
            {% for rrss in site.social_networks %}
                {% assign rs_title = rrss.title | downcase %}
                {% case rs_title %}
                    {% when "facebook" %}
                        <a class="chat-widget__{{rrss.title}}"
                            data-bs="chat.facebook"
                            href="{{rrss.value}}"   
                            rel="nofollow noopener noreferrer"
                            target="_black"
                            title="Mandanos un Mensaje"
                            >
                            <i class="fab fa-facebook-messenger"></i>
                        </a>
                    {% when "whatsapp" %}
                        <a class="chat-widget__{{rrss.title}}"
                            data-bs="chat.whatsapp"
                            href="https://api.whatsapp.com/send?phone={{ rrss.value | replace: " ", "" | replace: "+",""}}"
                            rel="nofollow noopener noreferrer"  
                            target="_blank" 
                            title="Mandanos un Whatsapp"
                            >
                            <i class="fab fa-whatsapp"></i>
                        </a>
                {% endcase %}
            {% endfor %}
        </div>
    </div>
</div>
</div>

<style>
    .chat-widget{
        --box-shadow-widget: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        position:fixed;
        bottom:10px;
        z-index:1000;
        {% if left %}left:10px;
        {% else %}right:10px;
        {% endif %}
    }
    .chat-widget .chat-widget__close-icon{display:none;}
    .chat-widget.show .chat-widget__close-icon{display:inline;}
    .chat-widget .chat-widget__chat-icon{display:inline;}
    .chat-widget.show .chat-widget__chat-icon{display:none;}

    .chat-widget .dropdown-menu.show{
        box-shadow: var(--box-shadow-widget);
        width:auto;
    }
    .chat-widget__btn.chat-widget__btn {
        background:{{color-button}};
        box-shadow: var(--box-shadow-widget);
        border:none;
        color:white;
    }
    .chat-widget__btn.chat-widget__btn::before,
    .chat-widget__btn.chat-widget__btn::after{
        display:none;
    }
    .chat-widget__content{ 
        background:white;
        width:100%;
        min-width:260px;
        display: grid;
        grid-template-columns: 48px 1fr;
        gap:10px;
        padding: 10px;
    }
    .chat-widget__img{
        width:48px;
        height:48px;
        object-fit:contain;
    }
    
    .chat-widget__message{
        box-sizing:border-box;
        border:silver 1px solid;
        padding:6px;
        border-radius:var(--default-border-radius);
    }
    .chat-widget__chat-list{
        grid-column: 2/3;
        display:flex;
        flex-wrap:wrap;
    }
    .chat-widget__btn.chat-widget__btn{
        width:1.5em;
        height:1.5em;
        font-size:{{size-button}};
        display:flex;
        justify-content:center;
        align-items:center;
        border-radius:100px;
    }
    .chat-widget__whatsapp,.chat-widget__facebook{
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:1.5rem;
        width:2.5rem;
        height:2.5rem;
        border-radius:100px;
    }

    .chat-widget__whatsapp{
        background: linear-gradient(0deg, rgb(32,176,56) 0%, rgb(96,214,106) 100%);
         color: white;
         margin-left:6px;
    }
    .chat-widget__whatsapp:hover{
        color: white;
        outline: 4px rgba(96,214,106,.6) solid;
    }

    .chat-widget__facebook{
        background: linear-gradient(0deg, rgba(0,98,224,1) 0%, rgba(25,175,255,1) 100%);
        color: white;
        margin-left:4px;
    }
    .chat-widget__facebook:hover{
        color:white;
        outline: 4px rgba(25,175,255,.6) solid;
    }
    @media screen and (min-width:768px){
        .chat-widget{bottom:30%;}
    }

  
</style>
{%endif %}