Skip to content

Bottom Buttons w-bottom_btns.css & WhatsApp Mobile/Desktop URL
Compare
Choose a tag to compare
@arturmamedov arturmamedov released this 12 Apr 16:05
· 138 commits to master since this release
v1.4.98
0ea9341

Bottom Buttons w-bottom_btns.css

Div .bottom-buttons with grouped bottom buttons .b-btn, .b-btn_circle, b-btn_whatsapp

Also in .bottom-buttons.horizontal or .bottom-buttons.vertical style

<!-- Bottom Buttons -->
<div class="bottom-buttons vertical">
    <!-- Anchor to Email form -->
    <a href="#ajaxsend" class="text-center b-btn b-btn_circle bg-dark">
        <i class="fa fa-envelope fa-2x text-white-a"></i>
    </a>

    <!-- Admin helper -->
    <div class="text-center b-btn b-btn_circle bg-info">
        <i class="fa fa-cog fa-2x"></i>
    </div>

    <!-- WhatsApp Button https://faq.whatsapp.com/en/android/26000030/ -->
    <a href="https://wa.me/1234567890?text=Salve,%20desidero%20ricevere%20informazioni%20per%20un%20soggiorno%20presso%20il%20vostro%20Hotel.%20Grazie!" class="b-btn b-btn_circle b-btn_whatsapp" target="_blank">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- Facebook Messenger Button https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/ -->
    <div id="fb-root" class="b-btn"></div>

    <!-- Go2Top {css: .go2top, js: LayoutGo2Top} -->
    <div class="go2top hidden-xs text-center b-btn">
        <i class="fa fa-chevron-up"></i>
        <p class="hidden-sm m-0">Torna su</p>
    </div>
</div>

Bottom Buttons Vertical

Bottom Buttons Horizontal

Social

WhatsApp url Mobile and Desktop

WhatsApp Button https://faq.whatsapp.com/en/android/26000030/

  • Replace 1234567890 with your desired phone number
  • text=The message must be url_encoded use https://www.urlencoder.org/ for get text=The%20message%20must%20be%20url_encoded
<a href="https://wa.me/1234567890?text=Salve,%20desidero%20ricevere%20informazioni%20per%20un%20soggiorno%20presso%20il%20vostro%20Hotel.%20Grazie!" class="b-btn b-btn_circle b-btn_whatsapp whatsapp-weburl" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

File js/social/w-whatsapp.js This is the MOBILE URL and it will be replaced to DESKTOP version (not worry :D)

The mobile first strategy is used cause most people decide to not show WhatsApp on Desktop but only on mobile where it is very useful
Assets 2
Loading