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