Code for Inserting Hotline and Facebook Messenger Sticky Buttons on Mobile

Creating Hotline & Facebook Chat Buttons Without Plugins (WordPress)

There are many plugins that can help you create Hotline or Facebook Chat buttons in the footer of a WordPress website. However, many of us hesitate to use plugins because they can make the site heavier or cause conflicts with other components.

I’ve built several websites and received very positive feedback from clients about:

• A Hotline button at the bottom-left corner (desktop)
• Two buttons (Hotline + Facebook Chat) at the bottom (mobile)

Today, I’ll guide you on how to create similar buttons!

Create Hotline Button for Desktop

Basically, we create a simple HTML block and insert it into the footer.php file of your theme.

Find footer.php

Go to:

• Dashboard → Appearance → Theme Editor → footer.php

For Flatsome (child theme):

• Appearance → Theme Editor → Select theme → Flatsome → footer.php

Add HTML Code

Paste this before the closing </body> tag:

<a href="tel:+84972939830">
  <div class="hotline">
    <span class="before-hotline">Hotline:</span>
    <span class="hotline-number">0972.939.830</span>
  </div>
</a>

👉 When users click, it will call the phone number.

Add CSS Styling

Paste this above the HTML code:

<style>
.mobile-hotline{display:none}
.hotline {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 9000;
    display: block;
    background: #fac100;
    color: red;
    padding: 5px 12px;
    border-radius: 99px;
}
.hotline .hotline-number{
    font-size:20px;
    color:#b20000;
    font-weight:bold
}

@media (max-width: 767px) {
    .hotline {
        display:none;
    }
}
</style>

Key Properties Explained:

• position: fixed → stays fixed on screen
• left: 10px → 10px from left
• bottom: 10px → 10px from bottom
• Hidden on mobile (display: none)

Create Hotline + Facebook Chat Buttons for Mobile

Add HTML

Paste before </body>:

<div class="mobile-hotline">
  <div class="mobile-hotline-left">
    <a href="http://www.messenger.com/t/joseph.thien.75" target="blank">Chat Facebook</a>
  </div>
  <div class="mobile-hotline-right">
    <a href="tel:+84972939830" target="blank">Call Now</a>
  </div>
</div>

👉 Replace:

• Messenger link with your own
• Phone number accordingly

Add CSS (inside <style>)

@media (max-width: 767px){
  .mobile-hotline{
    display:block;
    bottom:0;
    width:100%;
    background:rgba(0,0,0,0.5);
    height:60px;
    position:fixed;
    z-index:9999999
  }

  .mobile-hotline-left{
    width:45%;
    float:left;
    text-align:center;
    background:#00a502;
    margin:7px 5px 0 10px;
    height:45px;
    border-radius:4px
  }

  .mobile-hotline-left a{
    color:white;
    line-height:46px;
    font-size:16px;
    font-weight:bold
  }

  .mobile-hotline-right{
    width:45%;
    float:right;
    text-align:center;
    background:#fac100;
    margin:7px 10px 0 5px;
    height:45px;
    border-radius:4px
  }

  .mobile-hotline-right a{
    color:red;
    line-height:46px;
    font-size:16px;
    font-weight:bold
  }
}

Final Result

• Desktop → Floating Hotline button
• Mobile → Bottom bar with:
  • Facebook Chat
  • Call button

Conclusion

You can copy the full combined code and paste it before </body> in footer.php to use both desktop and mobile buttons at once.

If you have any issues, feel free to contact me for support. Thanks for following Ninh Binh Web, and good luck building your website! 🚀