Dansday
When building the frontend for the 3cat ecommerce platform, I realized that a one size fits all communication strategy is a conversion killer. Historically, our WhatsApp chat bubble was a static fixture. Whether a customer was browsing a budget iPhone 11, examining a premium iPhone 15 Pro Max, or visiting our dedicated trade in page, they were greeted by the exact same generic message. This passive approach missed a massive opportunity to engage customers when their intent was highest. I wanted to turn this static element into an active, intelligent sales assistant that understands context.
To solve this, I designed and implemented Chat CTA 2.0. The goal was to give our marketing team a robust dynamic configuration layer. Instead of hardcoded text, the marketing manager can now target specific customer segments based on the page URL. When a customer navigates the site, the chat bubble dynamically transforms into Teega, our proactive virtual assistant, tailored precisely to what the user is looking at.
The core architecture of Chat CTA 2.0 is built on a few critical pillars:
- URL Pattern Matching
The system evaluates the active window location and compares it against a configured list. By supporting wildcard characters, a single rule can target groups of related products. For instance, targeting used iPhone 15 variants with a wildcard allows one cohesive message to cover the base, Plus, Pro, and Pro Max models. - Dual Message Sequencing
Static messages quickly become background noise. I engineered a two phase message sequence to catch the eye. The chat bubble initializes with a hook, and after a five second delay, the first message beautifully fades out and is replaced by a secondary message. Simultaneously, the underlying WhatsApp prefilled link updates to match the new text. This ensures the user transition is seamless when they click. - Dynamic Metadata Placeholders
To make the conversation feel deeply personal, the messaging engine extracts metadata directly from the product page. By supporting placeholders like product name, price, and instalment price, we speak to the user in real time about their exact interest. I also added string processing to clean up long product names, keeping only the first two words so that a long title like Used iPhone 15 Pro Max 128GB Red becomes a clean, friendly Used iPhone in the chat bubble. - Graceful Fallback Mechanism
Reliability is paramount in retail. If a user lands on a unique page that does not match any marketing pattern, the system gracefully falls back to a global default configuration. This fallback still maintains the two phase sequencing, ensuring every single visitor receives an engaging experience.
With Chat CTA 2.0, we successfully bridged the gap between passive browsing and active sales guidance. By delivering highly contextualized messages, such as offering direct assistance when a price feels steep or providing instalment breakdowns, we make the shopping experience feel human. This implementation proves that small, thoughtful updates to user experience can drive massive leaps in customer engagement.