Click-to-Call Mobile Bar
Injects a fixed bottom bar on mobile devices with a configurable phone number; hidden on desktop.
Module2 parts · by SnipCraft
PHPMarkup
php
<?php
if ( ! function_exists( 'scseed_ctc_bar' ) ) {
define( 'SCSEED_CTC_PHONE', '+1 (800) 555-0100' );
define( 'SCSEED_CTC_PHONE_HREF', 'tel:+18005550100' );
define( 'SCSEED_CTC_LABEL', 'Call us free' );
function scseed_ctc_bar() {
$href = esc_url( SCSEED_CTC_PHONE_HREF );
$phone = esc_html( SCSEED_CTC_PHONE );
$label = esc_html( SCSEED_CTC_LABEL );
?>
<div id="scseed-ctc-bar" aria-label="Call us">
<a href="<?php echo $href; ?>" class="scseed-ctc-link">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
fill="currentColor" aria-hidden="true">
<path d="M6.62 10.79a15.053 15.053 0 0 0 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24
1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.01 21 3 13.99 3 5
c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57-.1.36-.01.74-.25 1.01L6.62 10.79z"/>
</svg>
<span class="scseed-ctc-label"><?php echo $label; ?>:</span>
<span class="scseed-ctc-number"><?php echo $phone; ?></span>
</a>
</div>
<?php
}
add_action( 'wp_footer', 'scseed_ctc_bar' );
}CSSStyles
css
#scseed-ctc-bar {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: #16a34a;
z-index: 99998;
text-align: center;
box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}
.scseed-ctc-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 20px;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
.scseed-ctc-link:hover { color: #fff; opacity: .92; }
.scseed-ctc-label { opacity: .85; font-weight: 400; }
.scseed-ctc-number { font-weight: 700; letter-spacing: .5px; }
@media (max-width: 768px) {
#scseed-ctc-bar { display: block; }
}#frontend#cta#mobile#phone#click-to-call