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">✉</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