WhatsApp Widget

{"feature":"whatsapp-widget","audience":"end_users","apps":["NextJS"],"tags":["whatsapp","widget","website","integrations"]}

WhatsApp Website Widget

• Where in Kraya
  • Page: https://kraya-ai.com/dashboard/widget
• What it does
  • Generates a small code snippet to embed a floating WhatsApp chat button on your website.
  • Clicking the button opens WhatsApp (web or mobile) to start a chat with your business number.

Overview

Use the widget to make it easy for website visitors to message you on WhatsApp. Customize text and branding, then copy-paste a single <script> block into your site.

In-app help vs this website widget

• The WhatsApp website widget is for visitors on your own website. It uses the snippet you embed and opens WhatsApp with your business number from the Widget settings page.
• In-app support chat is different: it appears only when you are signed in to Kraya on the Dashboard and is for your team to get product help. It is not installed on your marketing site and does not replace this embeddable widget. See Support bot chat.

Setup

1. Open the Widget page
   Enter your business WhatsApp number (with country code), welcome message, and button label.

2. Personalize
   Add a profile name and profile image URL (optional).

3. Generate code
   Click “Generate Code” and copy the provided snippet.

4. Install on your website
   Paste the snippet before the closing </body> tag on any page where you want the widget.

Notes

• No WhatsApp Business API connection is required for the widget.
• Changing settings? Re-generate and replace the snippet on your site.

Tips

• Use a short, friendly welcome message (2–3 lines).
• Ensure the phone number includes country code (e.g., 91xxxxxxxxxx).
• Test on desktop and mobile browsers.

Edge cases to expect

• Content Security Policy (CSP)
  • If your site has strict CSP, allowlist the script source to load the widget.
• Caching
  • If you don’t see changes after replacing the snippet, hard refresh or clear CDN/browser cache.
• Wrong phone number format
  • The link may not open correctly. Always include country code and only digits where possible.

Troubleshooting (quick)

• “Widget not showing”
  • Make sure the snippet is placed before </body>. Check browser console for blocked scripts (CSP).
• “Opens but can’t send”
  • Confirm the WhatsApp number is valid and active. Try a direct link test from your phone.

Short decision tree

• No widget → Confirm snippet position → Check console for CSP → Re-generate and paste again.
• Wrong conversation target → Correct the number with country code → Re-generate.

FAQs

• Can I show different messages on different pages?
  • Yes. Generate multiple snippets and include the one you want on each page.
• Does this use the WhatsApp API?
  • No, it opens a regular WhatsApp chat.

Related guides

• WhatsApp API Integration (if you need in-app messaging and templates)
• Leads (capturing and managing inquiries)

Screenshots (to add later)