25% off ProSNIPC25OFF

WhatsApp Click-to-Chat Widget

Adds a floating WhatsApp button to the frontend that opens a pre-filled chat with a configurable phone number and message.

Module2 parts · by SnipCraft

PHPLogic

php
<?php
if ( ! function_exists( 'scseed_wa_widget_output' ) ) :
add_action( 'wp_footer', 'scseed_wa_widget_output' );
function scseed_wa_widget_output() {
    $phone   = apply_filters( 'scseed_wa_phone',   '15550000000' );    // E.164 without +
    $message = apply_filters( 'scseed_wa_message', 'Hello! I have a question.' );
    $label   = apply_filters( 'scseed_wa_label',   'Chat on WhatsApp' );
    $url     = 'https://wa.me/' . rawurlencode( preg_replace( '/[^0-9]/', '', $phone ) )
               . '?text=' . rawurlencode( $message );
    ?>
    <a id="scseed-wa-btn"
       class="scseed-wa-btn"
       href="<?php echo esc_url( $url ); ?>"
       target="_blank"
       rel="noopener noreferrer"
       aria-label="<?php echo esc_attr( $label ); ?>">
        <svg class="scseed-wa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
            <path fill="#fff" d="M16 2.9C8.8 2.9 3 8.7 3 15.9c0 2.3.6 4.5 1.8 6.5L3 29.1l7-1.8c1.9 1 4 1.6 6.1 1.6 7.2 0 13-5.8 13-13S23.2 2.9 16 2.9zm6.6 17.8c-.3.8-1.5 1.5-2.1 1.6-.5.1-1.2.1-1.9-.1-.4-.1-1-.3-1.7-.6-3-1.3-5-4.3-5.1-4.5-.1-.2-1.1-1.5-1.1-2.8s.7-2 .9-2.3c.3-.3.6-.3.8-.3h.6c.2 0 .4 0 .6.5.2.4.8 2 .9 2.1.1.2.1.4 0 .6-.1.2-.2.3-.3.5-.1.2-.3.4-.4.5-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.7-.1.2-.2.8-.9 1-1.2.2-.3.4-.3.7-.2.3.1 2 .9 2.3 1.1.3.2.5.3.6.4.1.3.1 1.1-.2 1.9z"/>
        </svg>
        <span class="scseed-wa-label"><?php echo esc_html( $label ); ?></span>
    </a>
    <?php
}
endif;

CSSStyles

css
.scseed-wa-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9985;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #25d366;
    color: #fff;
    border-radius: 50px;
    padding: 0.65rem 1.1rem 0.65rem 0.75rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37,211,102,0.45);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.scseed-wa-btn:hover {
    background: #1ebe5d;
    box-shadow: 0 6px 20px rgba(37,211,102,0.55);
    transform: translateY(-2px);
    color: #fff;
}
.scseed-wa-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .scseed-wa-label { display: none; }
    .scseed-wa-btn { padding: 0.75rem; border-radius: 50%; }
}
#conversion#whatsapp#contact#floating-button#chat