NV WhatsApp Chat — User Guide
NV WhatsApp Chat is a Shopify app by NV Trends that adds a floating WhatsApp chat button and popup to your storefront. Shoppers tap the launcher, type their question, and the conversation opens directly in WhatsApp — on their phone or in WhatsApp Web — with your prefilled message template.
This guide walks you through the entire app, from installation to fine-tuning the widget for desktop and mobile.
Install NV WhatsApp Chat from the Shopify App Store →
What the app can do
| Capability | What it means for you |
|---|---|
| Floating WhatsApp launcher | A chat button on every storefront page that opens a branded chat popup. |
| One-tap WhatsApp handoff | The shopper’s message opens in WhatsApp addressed to your number — no separate inbox to manage. |
| Prefilled message templates | Include the page URL, page title, and shop name automatically, so every chat arrives with context. |
| Full branding control | Colors for every element, custom launcher icon, agent avatar, and editable text throughout. |
| Per-device layout | Separate position, size, spacing, and font settings for desktop and mobile. |
| Behavior controls | Display delay, default open/closed state, open animation, and device targeting. |
| Lightweight by design | A single small script served through a Shopify theme app embed — built to avoid slowing your store or affecting SEO. |
Before you begin
You need:
- A Shopify store with admin access.
- A WhatsApp number that can receive customer messages — a personal WhatsApp or WhatsApp Business number both work.
- Permission to approve app charges (the plan includes a 5-day free trial).
The widget itself requires no theme code changes — it is enabled with a single toggle in the theme editor.
Step 1 — Install the app and pick your plan
- Open the NV WhatsApp Chat listing on the Shopify App Store and click Install.
- Approve the app’s permissions in your Shopify admin.
- When the app opens, Shopify shows the plan picker. Choose the Monthly Plan — $5 every 30 days — or the Yearly Plan — $54/year ($6 off). Both include a 5-day free trial.
- Approve the charge. You are not billed until the trial ends, and you can cancel anytime during the trial at no cost.
Billing is handled entirely by Shopify and appears on your regular Shopify invoice.
Step 2 — Add your WhatsApp number
In the app’s Contact settings section:
- Enter your Country code — digits only, without
+or00. For example1for the US,91for India,44for the UK. - Enter your Phone number — digits only, without spaces or dashes.
- Click Save.
Tip: The combined country code and number must be a valid international WhatsApp number between 8 and 15 digits. If saving fails, check for stray spaces, dashes, or a leading zero that isn’t part of the international format.
Step 3 — Enable the widget in your theme
The widget is a Shopify theme app embed, so it has to be switched on once in your theme:
- In your Shopify admin, go to Online Store → Themes.
- Click Customize on your live theme.
- Open App embeds (the puzzle-piece icon in the left sidebar).
- Toggle WhatsApp chat widget on.
- Click Save.
Visit your storefront — the WhatsApp launcher should now appear in the corner. If it doesn’t, see the troubleshooting checklist below.
Step 4 — Brand the widget
The Branding settings section controls how the widget looks.
Images
| Upload | Where it appears | Notes |
|---|---|---|
| Launcher icon | The floating chat button | Optional — replaces the default WhatsApp icon. Keep uploads under roughly 250 KB. |
| Avatar | The chat popup header | Optional — show your support agent’s photo or your logo. Same 250 KB limit. |
Colors
Every color accepts standard CSS values (hex, rgb(), rgba(), hsl(), hsla()):
| Setting | What it colors |
|---|---|
| Launcher background color | The floating chat button |
| Launcher popup background / text | The small teaser bubble next to the launcher |
| Header background / text color | The top bar of the chat popup |
| Popup background color | The body of the chat popup |
| Send button background / text | The button that opens WhatsApp |
The defaults use WhatsApp’s familiar green (#25D366) so the widget is instantly recognizable — change them freely to match your brand.
Step 5 — Edit the text
The Text settings section controls every line the shopper sees:
| Setting | Where it appears | Default |
|---|---|---|
| Greeting title | Popup header | ”Chat with our team” |
| Welcome text | First message in the popup | ”Questions before you order? Send us a WhatsApp message.” |
| Support text | Below the welcome text | ”We usually reply within a few minutes during support hours.” |
| Status text | Popup header, under the title | ”Typically replies in 5 minutes” |
| Input placeholder | The message box | ”Type your message” |
| Send button text | The send button | ”Open WhatsApp” |
| Launcher popup message | The teaser bubble next to the launcher | Editable invitation to chat |
The message template
The Message template defines the text that arrives in your WhatsApp when a shopper sends a message. It supports four placeholders:
| Placeholder | Replaced with |
|---|---|
{customer_message} | What the shopper typed — required, the template cannot be saved without it |
{current_page_url} | The page the shopper was on |
{page_title} | That page’s title |
{shop_name} | Your store’s name |
Default template:
Hello, I need help. Page: {current_page_url}. Title: {page_title}. Shop: {shop_name}. Message: {customer_message}Tip: Keep the page placeholders in the template. Knowing the exact product page a question came from saves a back-and-forth message in almost every conversation.
Step 6 — Tune the layout per device
The Layout settings section has separate Desktop and Mobile tabs, so the widget can be sized correctly for both:
| Setting | What it controls |
|---|---|
| Launcher position | Left or right side of the screen (per device) |
| Popup width / height | Size of the chat popup, in px, %, or rem |
| Launcher size | Diameter of the floating button (44–96 px desktop, 44–88 px mobile) |
| Border radius | How rounded the popup corners are |
| Bottom / side spacing | Distance from the screen edges — useful for clearing cookie bars or other floating buttons |
| Font sizes | Independent sizes for the greeting title, welcome text, status text, support text, launcher teaser, and input field |
Two settings apply to both devices:
- Popup alignment — whether the popup opens to the left or right of the launcher.
- Z-index — the widget’s stacking order. Raise it if another floating element (cookie banner, back-to-top button) covers the widget.
Step 7 — Set the behavior
The Behavior settings section controls when and how the widget appears:
| Setting | What it does |
|---|---|
| Display delay | Wait 0–60 seconds after page load before showing the widget |
| Default state | Start with the popup closed (just the launcher) or open |
| Open/close animation | slide-up, fade, or scale |
| Show on desktop / mobile | Toggle the widget per device type |
| Show status text | Show or hide the “Typically replies in…” line |
| Include current page URL / page title / shop name | Control which context placeholders are filled in the message |
| Require a customer message | If on, shoppers must type something before the send button works |
| Allow Enter to send | Let shoppers press Enter to open WhatsApp |
Recommended starting point: keep the default state closed with no display delay. The launcher is visible but unobtrusive, and shoppers open it when they actually have a question.
How the message reaches you
When a shopper clicks the send button:
- The widget builds the message from your template, filling in the shopper’s text and any enabled context placeholders.
- WhatsApp opens — the app on mobile, WhatsApp Web on desktop — addressed to your number with the message prefilled.
- The shopper hits send in WhatsApp, and the conversation continues there like any normal chat.
The app never stores chat messages and adds no separate inbox — you reply from your own WhatsApp or WhatsApp Business app, with all of its notifications, quick replies, and history.
Pricing and billing
| Plan | Price | Free trial | Includes |
|---|---|---|---|
| Monthly Plan | $5 / 30 days | 5 days | Advanced chat button, customizable design, flexible display options, device targeting, priority support |
| Yearly Plan | $54 / year ($6 off) | 5 days | Same features, billed once a year |
- Billing is handled by Shopify’s own billing system — charges appear on your regular Shopify invoice.
- You are only charged after the 5-day trial ends.
- Uninstalling the app cancels the subscription automatically.
Troubleshooting checklist
| Problem | What to do |
|---|---|
| The widget doesn’t appear on the storefront | Confirm the WhatsApp chat widget app embed is toggled on in Online Store → Themes → Customize → App embeds, and that you saved the theme. |
| Widget shows on desktop but not mobile (or vice versa) | Check the Show on desktop / Show on mobile toggles in Behavior settings. |
| Widget appears late | You may have a Display delay set — reduce it to 0 in Behavior settings. |
| Another element covers the widget | Raise the Z-index in Layout settings until the widget sits on top. |
| Sending opens WhatsApp with the wrong number | Re-check Contact settings: country code and number must be digits only, no +, 00, spaces, or dashes. |
| Settings won’t save | Make sure your subscription is active — the app redirects to the Shopify plan picker if no plan is selected. Also check the inline field errors; the message template must contain {customer_message}. |
| Icon or avatar upload is rejected | Keep image uploads under roughly 250 KB. Resize or compress the image and try again. |
Best practices
- Lead with a real reply expectation — set the status text to something you can honor, like “Typically replies in 5 minutes” during support hours.
- Keep page context in the template —
{current_page_url}and{page_title}tell you exactly what the shopper is looking at before they say a word. - Tune mobile spacing separately — mobile screens are tight; the separate mobile tab lets you shrink the launcher and spacing without touching desktop.
- Use the teaser bubble sparingly — a short, friendly launcher popup message invites chats; a long one gets dismissed.
- Test on your own phone — open your store, send yourself a message, and confirm it lands on the right WhatsApp number with the template filled in.
Frequently asked questions
Does the widget slow down my store? No. It is a single lightweight script delivered through a Shopify theme app embed, with no external libraries or third-party requests. It is built specifically to avoid affecting page speed or SEO.
Do I need WhatsApp Business? No — any WhatsApp number works. WhatsApp Business adds useful extras like quick replies and away messages, but it is not required.
Can shoppers chat without leaving my store? The conversation itself happens in WhatsApp — that is by design. Shoppers compose their message in the on-store popup, and one tap moves it into WhatsApp where both sides get notifications and history.
Does the app store my customers’ messages? No. The message goes straight from the shopper’s browser into WhatsApp. The app only stores your widget settings.
What happens if I uninstall? The widget disappears from your storefront and Shopify cancels the subscription automatically. If you reinstall later, you pick a plan again and reconfigure your settings.
Getting help
- Email us at support@nvtrends.com — Priority support is included with your plan.
- See the product overview and pricing for a feature summary.
- Visit the Shopify App Store listing to install or leave a review.
