Dashboard guide (button-by-button)

Overview

1. Quick links to all sections. The Overview page is your command center with one-click access to Overview, Widget settings, Templates, Analytics, Billing, and Edit profile. Think of it as the table of contents for your project. New users can start at Install to copy the embed code, then hop to Widget settings to choose color/position and to Templates to add greeting + off-hours messages. This keeps onboarding simple and predictable.
2. Use it as your home base after sign-in. Each time you finish a change, jump back to Overview to keep momentum. From there you can quickly open Analytics to confirm impressions, opens, and clicks; review Templates QA if you rely on multilingual or business-hours logic; and revisit Widget settings to tweak button position or WhatsApp prefill. If something looks off, go to Troubleshooting for copy–paste checks, CSP notes, and quick smoke tests with /api/analytics and /api/track-lead.

Widget settings

Widget ID

1. What it is and where it appears. The Widget ID is the unique identifier used by your embed code to fetch live settings. You’ll see it in the dashboard and inside the snippets on Install. Keep it private; anyone with the ID could copy your configuration. Managing multiple sites? Give each site its own Widget ID so their themes, positions, languages, business hours, and templates stay independent and analytics remain accurate.
2. How it’s used across the app. When you press the copy buttons on Install, the ID is injected automatically. Pages like Templates, Analytics, and Languages use the ID to load or filter their data. If your site looks like it has the wrong theme or messages, double-check you embedded the snippet with the intended Widget ID.

Theme color

1. Pick a color that builds trust. Choose a color that matches your brand or contrasts well with the background so the bubble is visible but not distracting. Updates apply instantly because the widget fetches settings on every page view. If you work in sprints, do a quick visual QA on a few key pages after saving—home, a long article page, and a checkout page—to ensure legibility everywhere.
2. Small teams tip. If you aren’t sure which shade to choose, match your site’s primary button color. This keeps the UI consistent and helps users immediately recognize the bubble as an action—just like “Add to cart” or “Sign up”.

Button position

1. Bottom-right vs. bottom-left. Most sites use bottom-right because it avoids typical navigation patterns and language pickers that live on the left. If you have other floating UI (e.g., cookie banners), choose the opposite side so nothing overlaps. Check on mobile too—the bubble rises above common UI like OS home bars.
2. Accessibility check. After moving the button, verify keyboard focus reaches it and screen readers announce it properly. The fastest way is to tab through your page and listen for “Open WhatsApp chat” (or your CTA text).

Icon, CTA text, Prefill message

1. Design the first impression. The icon is the small graphic in the bubble; the CTA is the short text next to it (for example, “Chat with us”). Keep it friendly and clear. The Prefill is the message users see inside WhatsApp when the chat opens (e.g., “Hi, I’m interested in [your product].”). Keep it short to reduce friction; you can add emoji and variables later as you learn from Analytics questions.
2. Consistency tip. Use one CTA pattern across your site—home, product pages, and support pages—so users don’t need to re-learn what the bubble does in different places.

Copy buttons (Embed & Auto-trigger) + preview

1. Embed snippet. Copies the basic loader you’ll paste before </body>. See the full walkthrough in Install for HTML/WordPress/Webflow/Wix/Squarespace/Shopify/React/Vue/Angular/GTM. After pasting, refresh your site and confirm you can see the bubble. The embedded script is async and tiny, so it won’t block rendering.
2. Auto-trigger snippet. Copies an optional add-on to open the chat automatically under conditions (e.g., delay, exit intent). See Install ▸ Auto-trigger. Start gently: opening the chat too aggressively can reduce trust.

Templates

1. Filters and basics. Use the top controls to filter by Widget ID, locale, and kind (e.g., greeting, off_hours, or custom kinds). Press Refresh after changes. To add your own kinds, open Manage kinds. New teams should start with at least one greeting and one off-hours template per primary language.
2. Multilingual examples. We recommend starting with EN/HI/KN/TA. Each locale can have both greeting and off-hours variants so the chat always feels native. For advanced rules, see Templates QA which tests business hours + locale fallbacks.

Templates QA

1. What it does. This page runs live checks against /api/templates/choose using your current languages and hours. Toggle “Include inline business hours” to simulate the typical Mon–Sat, Sun-closed pattern and verify the correct message is chosen at 11:15 (greeting) and 23:30 (off-hours).
2. Reading PASS/FAIL. If a row fails, click open to see the raw API response and why the fallback occurred (e.g., missing locale template). Fix by adding the missing template in Templates or by adjusting Business hours.

Languages

1. How locale is chosen. The widget can read browser preferences and also respects explicit overrides you set. When a locale lacks a matching template, the system falls back to English or the default language. Test the exact behavior in Templates QA.
2. Practical tip. If most of your audience is bilingual, keep the greeting short and put the key ask first (e.g., “How can we help?”). This reduces the cost of mismatches when fallbacks occur.

Business hours

1. Set windows & time zone. Define your open windows (e.g., Mon–Sat 10:00–18:00; Sun closed) and set the correct time zone. Hours feed into /api/templates/choose so the API returns a greeting inside windows and an off-hours message after hours.
2. Inline hours for QA. You can even pass hours as query params to the API for one-off tests. See examples on Templates QA.

Analytics

1. What we log. The widget records impressions (bubble views), opens, closes, and clicks. CTR is computed from impressions and clicks. Use the day and page tables to find where users interact most, then refine your CTA or move the bubble position accordingly.
2. Smoke test endpoints. If numbers look low, quickly test /api/analytics and /api/track-lead with minimal payloads (see Troubleshooting ▸ Smoke test). If calls succeed but charts stay empty, double-check you embedded the snippet with the correct Widget ID.

Leads

1. Where they appear. Leads created from the pre-chat panel or API appear in your dashboard. For advanced workflows (Google Sheets/CRM), use a webhook as described in Troubleshooting ▸ Webhooks.
2. Quality tip. Keep the pre-chat form lightweight—name and message are usually enough. Every extra required field reduces completions.

Billing

1. Plans & upgrades. Use Billing to upgrade or downgrade. If you test payments, confirm your webhook in the provider dashboard points to the correct production URL.
2. Common pitfalls. If plan changes don’t reflect, verify environment variables and webhook secrets (see Troubleshooting ▸ Billing).

Profile

1. Business details & WhatsApp number format. Keep your business name and WhatsApp number correct—these appear in snippets and drivers. Use full international format (e.g., +91…). If messages don’t open WhatsApp, double-check the number formatting here first.
2. Brand hygiene. If you rebrand, update logo/CTA tone, template language, and theme color in one pass so your experience stays cohesive.

Widget behavior & customization

1. How the bubble renders. The script loads async and applies settings at runtime. It’s designed to be fast and resilient. See Install for safe paste locations and CSP notes.
2. Auto-trigger rules. Ship with conservative defaults. If you enable auto-open, prefer a time-based delay or on-scroll trigger. Aggressive rules (every pageview) can lower trust and increase bounce—measure with Analytics.

APIs (for developers)

/api/widget.js

1. What it loads. Returns the minimal loader that renders the bubble and wires events. It reads your Widget ID and fetches settings. See production-safe placement in Install.

/api/auto-trigger

1. When to include. Include only if you want automatic chat opens based on behavior. Start with gentle rules and validate with Analytics.

/api/analytics & /api/track-lead

1. Payload shapes & examples. These endpoints log interactions and collect leads. Use the quick tests in Troubleshooting ▸ Smoke test if data seems missing. If your charts show leads but no impressions/opens/clicks, verify your environment variables and that you’re posting the expected fields.

/api/templates/choose

1. Parameters, fallbacks & business-hours logic. Pass wid, locale, and optionally h/m to simulate a specific time. Provide inline hours via sun=closed or mon=10:00-18:00… for QA scenarios. The endpoint chooses a template in this order: widget-scoped templates in the requested locale, global matches, and finally defaults. Validate everything on Templates QA.