Create a 3D Floating Social Media Chat Button for Blogger

⚡ Updated for 2026 · Lightweight Blogger Tutorial

How to Add a Lightweight 3D Multi-Chat Button to Blogger

A modern replacement for the old multi-social chat widget: built with HTML, CSS, and vanilla JavaScript, using lightweight Unicode icons and direct links for WhatsApp, Telegram, email, SMS, and phone calls.

💬 WhatsApp ✈ Telegram ✉ Email ✎ SMS ☎ Call

A multi-chat button for Blogger can be surprisingly useful when a blog is also used as a business website, portfolio, service page, affiliate landing page, online catalog, or small-company website. Instead of forcing visitors to search for contact details, one compact floating button can provide several ways to contact the site owner directly.

The original CodeFlare concept used an animated 3D Cube Multi Social Chat interface and supported several messaging services. That idea is still good, but the implementation can be much simpler today. Modern browsers handle CSS transforms, responsive layouts, and native JavaScript well enough that we no longer need to load multiple libraries just to create a small floating contact widget.

💡 General opinion A contact widget should help the visitor complete an action, not become the main attraction. The best version is usually the one that feels fast, stays out of the way, works on mobile, and opens the visitor's preferred communication channel with the fewest possible steps.

What Changed in the 2026 Version?

⚙

No jQueryThe widget uses native JavaScript, reducing an unnecessary dependency for this feature.

◈

No Font AwesomeUnicode symbols replace external icon fonts, which means one less stylesheet request.

⚡

No animation libraryCSS transitions and transforms handle the 3D effect without TweenMax or another animation package.

⌁

Modern direct linksCommunication actions use standard web links such as WhatsApp wa.me, Telegram t.me, mailto:, sms:, and tel:.

▣

Responsive designThe panel automatically fits narrow phone screens and remains compact on desktop.

◉

Accessible interactionThe button uses ARIA attributes and the animation is reduced when the visitor prefers less motion.

The legacy widget included services such as BBM and older browser-specific fallbacks. Those choices made sense when the original code was created, but they are no longer a useful default for a new Blogger implementation. The 2026 version focuses on channels that can be opened directly from a modern browser and are easy for site owners to configure.

Why a Direct Chat Button Can Improve a Blogger Website

For a normal editorial blog, a contact button is optional. For a Blogger business website, however, it can become a strong conversion tool. A visitor reading a service page may already have purchase intent. If the page offers a visible WhatsApp contact button or another direct channel at that moment, the visitor does not need to open a separate contact page, copy a phone number, or manually search for the business account.

• Faster contact: visitors can move from reading to messaging in one click.
• Better mobile usability: direct links can open the appropriate app or web experience on supported devices.
• Cleaner interface: multiple contact options are grouped inside one floating button.
• Lower script overhead: this version does not require jQuery, Font Awesome, or an animation library.
• Easier maintenance: phone numbers, usernames, labels, and colors can be changed in one small configuration block.

✓ SEO note A chat widget does not directly make a page rank higher. Its value is mainly usability and conversion. For search visibility, the article itself still needs clear structure, original explanations, useful examples, fast loading, and content written primarily for people.

Supported Contact Actions

Channel	Link format	Recommended use
💬 WhatsApp	https://wa.me/NUMBER	Sales, customer support, quick inquiries
✈ Telegram	https://t.me/USERNAME	Community, support, direct profile access
✉ Email	mailto:name@example.com	Formal inquiries, quotations, documents
✎ SMS	sms:+628...	Fallback contact on compatible mobile devices
☎ Phone	tel:+628...	Immediate voice contact on supported devices

⚠ Important: Base64 is not encryption Encoding a phone number or username with Base64 does not securely hide it from someone who can inspect the page source. Any contact information delivered to the browser should be treated as public. If a value must remain secret, it should not be placed in client-side HTML or JavaScript.

Live Preview

The demo below uses the same lightweight structure provided in the installation code. The icons are ordinary Unicode characters, so there is no external icon-font request.

Interactive demo area

Contact us

💬 WhatsApp ✈ Telegram ✉ Email ✎ SMS ☎ Call

Choose your preferred contact method.

How to Install the Multi-Chat Button on Blogger

1. Open your Blogger dashboardSign in to Blogger, select the blog where you want to use the widget, and make sure you have permission to edit the theme or layout.
2. Choose where you want to install itFor a site-wide floating button, use Layout → Add a Gadget → HTML/JavaScript. You can also place the code near the closing </body> tag in Theme → Edit HTML.
3. Copy the lightweight widget codeUse the complete code in the next section. It already includes the CSS, HTML, and JavaScript required for the floating contact menu.
4. Replace the sample contact dataChange the WhatsApp number, Telegram username, email address, SMS number, and phone number. Use an international phone-number format for direct links.
5. Save and test on mobileOpen your Blogger site on both desktop and a phone. Test each link separately because app behavior can vary depending on the visitor's device and installed applications.
6. Remove channels you do not needIf you only use WhatsApp and email, delete the other link rows. Fewer choices often make a contact menu faster to understand.

Final Lightweight Blogger Widget Code

This standalone version is intended for an HTML/JavaScript gadget or for placement near the bottom of a Blogger theme. It is deliberately namespaced with cfm26- classes to reduce the chance of conflicting with existing template styles.

HTML + CSS + Vanilla JavaScript

<style>
.cfm26-wrap,.cfm26-wrap *{box-sizing:border-box}
.cfm26-wrap{--cfm26-color:var(--main-color,#0b78d0);position:fixed;right:24px;bottom:24px;z-index:9999;font-family:inherit}
.cfm26-btn{width:58px;height:58px;border:0;border-radius:16px;cursor:pointer;color:#fff;background:linear-gradient(145deg,var(--cfm26-color),color-mix(in srgb,var(--cfm26-color) 72%,#001d3d));box-shadow:0 12px 28px color-mix(in srgb,var(--cfm26-color) 30%,transparent);font-size:26px;display:grid;place-items:center;transform:perspective(500px) rotateX(8deg) rotateY(-12deg);transition:transform .25s ease,box-shadow .25s ease}
.cfm26-btn:hover{transform:perspective(500px) rotateX(0) rotateY(0) translateY(-3px);box-shadow:0 16px 34px color-mix(in srgb,var(--cfm26-color) 38%,transparent)}
.cfm26-box{position:absolute;right:0;bottom:72px;width:min(310px,calc(100vw - 32px));padding:12px;border:1px solid #e6ebf0;border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(16,24,40,.16);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:bottom right;transition:.2s ease}
.cfm26-wrap.cfm26-open .cfm26-box{opacity:1;visibility:visible;transform:none}
.cfm26-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 11px;border-bottom:1px solid #edf0f3;margin-bottom:8px}
.cfm26-head b{font-size:.95rem;color:#101828}
.cfm26-close{width:32px;height:32px;border:0;border-radius:9px;background:#f2f4f7;cursor:pointer;font-size:18px}
.cfm26-links{display:grid;gap:7px}
.cfm26-link{display:flex!important;align-items:center;gap:11px;padding:11px 12px!important;border-radius:11px!important;color:#344054!important;text-decoration:none!important;background:#fff;border:1px solid transparent;font-size:.91rem;font-weight:650;transition:.18s ease}
.cfm26-link:hover{background:#f8fafc;border-color:#e4e7ec;text-decoration:none!important;transform:translateX(-2px)}
.cfm26-icon{font-style:normal;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#f2f4f7}
.cfm26-note{font-size:.76rem;color:#98a2b3;padding:8px 10px 3px}
@media(max-width:640px){.cfm26-wrap{right:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){.cfm26-wrap *{animation-duration:.001ms!important;transition-duration:.001ms!important}.cfm26-btn{transform:none!important}}
</style>

<div class="cfm26-wrap" id="cfm26Widget">
  <div class="cfm26-box" id="cfm26Panel">
    <div class="cfm26-head">
      <b>Contact us</b>
      <button class="cfm26-close" id="cfm26Close" type="button" aria-label="Close contact menu">×</button>
    </div>

    <div class="cfm26-links">
      <a class="cfm26-link" href="https://wa.me/621234567890?text=Hello%2C%20I%20found%20you%20through%20your%20website." target="_blank" rel="noopener noreferrer">
        <i class="cfm26-icon">💬</i> WhatsApp
      </a>

      <a class="cfm26-link" href="https://t.me/exampleusername" target="_blank" rel="noopener noreferrer">
        <i class="cfm26-icon">✈</i> Telegram
      </a>

      <a class="cfm26-link" href="mailto:hello@example.com?subject=Website%20Inquiry">
        <i class="cfm26-icon">✉</i> Email
      </a>

      <a class="cfm26-link" href="sms:+621234567890">
        <i class="cfm26-icon">✎</i> SMS
      </a>

      <a class="cfm26-link" href="tel:+621234567890">
        <i class="cfm26-icon">☎</i> Call
      </a>
    </div>

    <div class="cfm26-note">Choose your preferred contact method.</div>
  </div>

  <button class="cfm26-btn" id="cfm26Toggle" type="button" aria-label="Open contact menu" aria-expanded="false" aria-controls="cfm26Panel">💬</button>
</div>

<script>
(function(){
  'use strict';

  var wrap = document.getElementById('cfm26Widget');
  var toggle = document.getElementById('cfm26Toggle');
  var close = document.getElementById('cfm26Close');

  if(!wrap || !toggle || !close) return;

  function setMenu(open){
    wrap.classList.toggle('cfm26-open',open);
    toggle.setAttribute('aria-expanded',String(open));
    toggle.textContent = open ? '×' : '💬';
  }

  toggle.addEventListener('click',function(){
    setMenu(!wrap.classList.contains('cfm26-open'));
  });

  close.addEventListener('click',function(){
    setMenu(false);
    toggle.focus();
  });

  document.addEventListener('click',function(event){
    if(!wrap.contains(event.target)) setMenu(false);
  });

  document.addEventListener('keydown',function(event){
    if(event.key === 'Escape'){
      setMenu(false);
      toggle.focus();
    }
  });
})();
</script>

How to Customize the Widget

1. Change the WhatsApp number

Find 621234567890 and replace it with your own number in international format. Do not add spaces, brackets, or a plus sign inside the wa.me path.

2. Add a pre-filled WhatsApp message

The example already includes a short encoded message after ?text=. You can replace it with your own greeting. Keep the message short and relevant so visitors can edit it easily before sending.

3. Change the Telegram username

Replace exampleusername with the public Telegram username you want visitors to open.

4. Change the widget color

The widget automatically tries to use your Blogger theme variable --main-color. If your template does not define that variable, it falls back to blue. You can set a fixed color by changing:

CSS

--cfm26-color:#0b78d0;

5. Move the button to the left

Replace right:24px with left:24px inside .cfm26-wrap. On the panel, replace right:0 with left:0 so the popup aligns with the button.

6. Remove unused contact channels

Delete the complete <a class="cfm26-link" ...>...</a> block for any service you do not use. This is better than showing inactive buttons.

Performance and Code Optimization Notes

The biggest improvement in this rebuild is not visual; it is structural. The old concept depended on additional libraries and image or icon resources. The new version keeps the widget self-contained and relies on browser-native features.

• Unicode icons replace a separate icon-font stylesheet.
• Vanilla JavaScript replaces jQuery for simple click and keyboard events.
• CSS transforms create the 3D effect without an animation library.
• Scoped class names reduce conflicts with Blogger template CSS.
• No Base64 contact-data trick avoids giving a false impression that public client-side data is encrypted.
• Reduced-motion support minimizes non-essential animation for visitors who request it in their operating system or browser settings.

SEO Tips for a Blogger Contact Widget Tutorial

If you publish this tutorial as an article, avoid repeating the same keyword unnaturally. Use the main phrase where it helps the reader: in the post title, opening paragraph, one or two headings, image alternative text if you add an illustration, and the search description. Related phrases such as Blogger WhatsApp button, floating contact button, multi-chat widget, vanilla JavaScript Blogger widget, and lightweight Blogger script can appear naturally in the explanation.

More importantly, keep the tutorial genuinely useful. Explain why each step exists, show the complete working code, mention limitations, and update the article when messaging platforms change their link formats. That creates more value than simply increasing keyword density.

Common Questions

Does this widget require jQuery?

No. The 2026 version uses native JavaScript for opening, closing, outside-click detection, and the Escape key.

Does it require Font Awesome?

No. All small symbols in the widget are Unicode characters, so there is no icon-font dependency.

Can I use only WhatsApp?

Yes. Remove the Telegram, email, SMS, and phone anchor elements and keep only the WhatsApp link.

Can I install it through Blogger Layout?

Yes. In most Blogger themes you can place the standalone widget inside an HTML/JavaScript gadget. Theme placement can vary, so test it after saving.

Is Base64 a secure way to hide my phone number?

No. Base64 is an encoding format, not encryption. A value included in browser-side source code can still be recovered by someone inspecting the page.

Final Thoughts

The original 3D Cube Multi Social Chat idea remains useful because it solves a practical problem: giving visitors several contact options without filling the page with separate floating buttons. The better approach in 2026 is to preserve that interaction while simplifying the implementation.

For most Blogger sites, the lightweight version above is easier to understand, easier to modify, and more suitable for modern templates. Start with the channels your audience actually uses, test every link on a phone, and keep the interface simple enough that visitors immediately know what will happen when they click.

Reference notes: WhatsApp documents its click-to-chat format using wa.me. Telegram documents HTTPS deep links using t.me. The accessibility behavior in this example also uses the widely supported prefers-reduced-motion media feature. Platform behavior may change, so re-check official documentation when maintaining the widget.