25% off ProSNIPC25OFF

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