25% off ProSNIPC25OFF

Floating Contact Button

Renders a fixed floating contact button linking to a phone number or contact page, configurable via filter.

Module3 parts · by SnipCraft

PHPOutput

php
<?php
if ( ! function_exists( 'scseed_floating_contact' ) ) {
    function scseed_floating_contact() {
        $href  = apply_filters( 'scseed_contact_href', get_page_link( get_page_by_path( 'contact' ) ) );
        $label = apply_filters( 'scseed_contact_label', __( 'Contact Us', 'scseed' ) );
        if ( empty( $href ) ) {
            return;
        }
        echo '<a id="scseed-contact-btn" href="' . esc_url( $href ) . '" ' .
             'aria-label="' . esc_attr( $label ) . '">' .
             '<span class="scseed-cb-icon" aria-hidden="true">&#9993;</span>' .
             '<span class="scseed-cb-label">' . esc_html( $label ) . '</span>' .
             '</a>';
    }
    add_action( 'wp_footer', 'scseed_floating_contact' );
}

CSSStyles

css
#scseed-contact-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #2ea44f;
  color: #fff;
  text-decoration: none;
  border-radius: 24px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: background 0.2s, transform 0.2s;
}
#scseed-contact-btn:hover {
  background: #26923e;
  transform: translateY(-2px);
}
.scseed-cb-icon {
  font-size: 1.1rem;
}
@media (max-width: 480px) {
  .scseed-cb-label { display: none; }
  #scseed-contact-btn { border-radius: 50%; padding: 0.7rem; }
}

JavaScriptScript

js
(function () {
  'use strict';
  var btn = document.getElementById('scseed-contact-btn');
  if (!btn) { return; }

  var hidden = false;
  var lastScroll = 0;

  window.addEventListener('scroll', function () {
    var current = window.scrollY;
    if (current > lastScroll + 80 && !hidden) {
      btn.style.opacity = '0';
      btn.style.pointerEvents = 'none';
      hidden = true;
    } else if (current < lastScroll - 40 && hidden) {
      btn.style.opacity = '1';
      btn.style.pointerEvents = '';
      hidden = false;
    }
    lastScroll = current;
  }, { passive: true });
})();
#frontend#ux#conversion#contact