| <div class="whatsapp-widget-container {{section.settings.widget_position}}"> <div class="whatsapp-widget"> <a href="https://api.whatsapp.com/send/?phone={{ section.settings.phone_number }}&text&type=phone_number&app_absent=0" class="ww-icon" title="WhatsApp message" target="_blank" style="text-decoration: none; flex-direction: {{section.settings.flex_direction}}" > <svg viewBox="0 0 32 32"> <path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path> </svg> {% if section.settings.message != blank %} <div class="ww-message"> {% if section.settings.store_logo != blank %} <img src="{{section.settings.store_logo | img_url: '60 x 60' }}" alt="{{section.settings.store_logo.alt}}"> {% endif %} <span class="ww-text">{{ section.settings.message }}</span> <span class="ww-behind {% if section.settings.flex_direction == 'row' %} ww-behind-left {% else %} ww-behind-right {% endif %}" ></span> </div> {% endif %} </a> </div> </div> <style> .whatsapp-widget-container { display: flex; bottom: 2rem; position: fixed; z-index: 10; } .whatsapp--right { justify-content: flex-end; right: 2rem; } .whatsapp--left { justify-content: flex-start; left: 2rem; } .whatsapp-widget { height: max-content; display: flex; align-items: center; gap: 2rem; transition: transform .5s ease; } .whatsapp-widget:hover { transform: scale(1.2); } .whatsapp-widget .ww-icon { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; } .ww-message { display: flex; align-items: center; gap: 10px; border-radius: 8px; border: 1px solid #e2e2e2; min-height: max-content; text-align: center; text-decoration: none; cursor: pointer; word-break: break-word; background: white; padding: 10px 20px; position: relative; box-shadow: 2px 2px 15px 2px rgb(0 0 0 / 17%); font-family: Roboto, "Helvetica Neue", sans-serif; } .ww-behind { transform: translateY(-50%) rotate(135deg); position: absolute; top: 50%; width: 20px; height: 20px; background-color: white; } .ww-behind-left { left: -11px; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; } .ww-behind-right { right: -10px; border-left: 1px solid #e2e2e2; border-top: 1px solid #e2e2e2; } .whatsapp-widget svg { fill: rgb(255, 255, 255); z-index: 1; border-radius: 50px; background-color: rgb(77, 194, 71); box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px; cursor: pointer; } .whatsapp-widget svg { height: 65px; width: 65px; } </style> {% schema %} { "name": "WhatsApp", "settings": [ { "type": "text", "id": "phone_number", "label": "Phone number", "info": "Add with zip code ex: 10123456789" }, { "type": "image_picker", "id": "store_logo", "label": "Store logo" }, { "type": "text", "id": "message", "label": "Message Label", "default": "Message Us", "info": "Leave message blank to show icon only" }, { "type": "select", "id": "widget_position", "default": "whatsapp--right", "label": "Widget Position", "options": [ { "value": "whatsapp--left", "label": "left" }, { "value": "whatsapp--right", "label": "right" } ] }, { "type": "select", "id": "flex_direction", "default": "row", "label": "WhatsApp Icon Position", "options": [ { "value": "row-reverse", "label": "Icon right" }, { "value": "row", "label": "Icon left" } ] } ], "presets": [ { "name": "WhatsApp" } ] } {% endschema %} |