Scene 1 — Checkout Confirmation Page (Order Completed)
This widget appears on the order completed/thank you page after checkout, injected via the
orderdetails_page_afterproductinfo widget zone. It invites the customer to opt-in to WhatsApp order tracking notifications.
yourstore.com/checkout/completed/10251
Your order has been successfully processed!
Order #10251
Date
28/05/2026
Total
R$ 289,90
Payment
Credit Card
Shipping
Correios PAC
Track your order on WhatsApp Free
Get real-time updates about your order directly on WhatsApp. Receive notifications when your order is confirmed, shipped, and delivered — including your tracking code!
Order confirmation
Shipping updates
Tracking code
Delivery notice
+55
Your number is only used for order updates. You can opt out at any time.
After the customer opts in, the widget transitions to a success confirmation state with a WhatsApp chat preview.
yourstore.com/checkout/completed/10251 (after opt-in)
Next Scene
Scene 2 — Customer Order Details Page (My Account → Orders)
This tracking widget appears on the customer's order details page, injected via the
orderdetails_page_overview widget zone. It shows shipment progress and WhatsApp notification status for the order.
yourstore.com/orderdetails/10247
Order #10247
Complete
Next Scene
Scene 3 — Order In Transit (Active Shipment)
Shows the tracking widget in the in-transit state — the shipment has been dispatched but not yet delivered. The progress bar and pulsing dot indicate the current step.
yourstore.com/orderdetails/10250
Order #10250
Shipped
Next Scene
Scene 4 — Opt-Out / Not Subscribed State
Shown when the customer has opted out of WhatsApp notifications or never opted in. Provides a non-intrusive re-subscribe option.
yourstore.com/orderdetails/10243 (not subscribed)
Next Scene
Scene 5 — Mobile Responsive (375px)
The opt-in widget adapts to mobile screens with a stacked layout. Phone input and button go full-width. Features collapse into a 2-column grid.
Order #10251 placed!
Track on WhatsApp
Get shipping updates and your tracking code directly on WhatsApp.
Confirmation
Shipping
Tracking
Delivery
Only used for order updates
Wireframe Annotations — Customer-Facing Widgets
These widgets are rendered via the nopCommerce widget zone system. The plugin implements IWidgetPlugin to inject view components into public store pages.
Widget Zones
orderdetails_page_afterproductinfo— Opt-in widget on the checkout completed pageorderdetails_page_overview— Tracking status widget on the order details pageorder_summary_content_after— Compact opt-in prompt on the order summary page (optional)
View Components
- WhatsAppOptInViewComponent (new)
- Renders the opt-in widget with pre-filled phone from billing address
- Submits via AJAX
POST /WhatsApp/OptInwith orderId + phone - On success: transitions to the confirmation state without page reload
- Stores opt-in status in customer attribute
WhatsApp.OptIn
- WhatsAppTrackingViewComponent (new)
- Renders the tracking progress + notification status for the order
- Data source:
WhatsAppMessageLogentries for the order ID - Tracking URL constructed from carrier name via
CarrierTrackingUrlssetting - Shows notification list with sent/delivered/read status from webhook data
Model / Property Bindings
- Scene 1 — Opt-In Widget
OrderId— from route dataCustomerPhone— pre-filled fromBillingAddress.PhoneNumberIsOptedIn— from customer attributeWhatsApp.OptInCountryCode— derived fromBillingAddress.CountryIdphone prefix
- Scene 2 — Tracking Widget
OrderId,OrderStatus— fromOrderentityShipmentStatus— fromShipmententity (mapped to progress step)TrackingNumber,CarrierName— fromShipmentTrackingUrl— constructed fromCarrierTrackingUrls[CarrierName]with{tracking}replacedNotifications— list ofWhatsAppMessageLogentries for the order, each withMessageType,Status,SentAt
Public Routes (v2.0.0)
POST /WhatsApp/OptIn— customer opts in: stores phone + creates customer attributePOST /WhatsApp/OptOut— customer opts out: removes attribute, adds to blacklistGET /WhatsApp/TrackingStatus?orderId={id}— AJAX: returns tracking progress + notification list as JSON
Privacy & Compliance
- Phone number is only stored if customer explicitly opts in (LGPD compliance)
- Opt-out immediately stops all future notifications and adds to blacklist
- Widget is not shown if the admin has disabled the plugin (
IsEnabled = false) - Widget hidden for guest customers if
RequireCustomerAccountsetting is true - No phone numbers are exposed to third parties — only used for WhatsApp API calls
Responsive Breakpoints
- Desktop (>768px) — Horizontal layout: icon + content side by side
- Tablet (768px) — Features stack to 2-column grid
- Mobile (<480px) — Full-width stacked layout, phone input 100%, compact features
Backend Changes Required
- WhatsAppBusinessPlugin.cs — implement
IWidgetPluginwithGetWidgetZonesAsync() - Components/WhatsAppOptInViewComponent.cs (new) — renders opt-in widget
- Components/WhatsAppTrackingViewComponent.cs (new) — renders tracking widget
- Views/Components/WhatsAppOptIn/Default.cshtml (new) — opt-in partial view
- Views/Components/WhatsAppTracking/Default.cshtml (new) — tracking partial view
- WhatsAppPublicController.cs (new) — handles OptIn/OptOut/TrackingStatus
- WhatsAppBusinessSettings.cs — add
ShowOptInOnCheckoutCompleted,ShowTrackingOnOrderDetails,RequireCustomerAccount - Models/OptInModel.cs (new) — OrderId, Phone, CountryCode
- Models/TrackingWidgetModel.cs (new) — order progress, notifications, tracking info