Add WhatsApp Chat to Any Website

Review the Website for WhatsApp

Before adding another button, inspect the website and see whether WhatsApp is already mentioned anywhere.

WhatsApp Contact Audit

Identifies the framework, every existing WhatsApp button or link, phone/contact buttons, primary CTAs, and any reusable contact component — flags broken WhatsApp links, placeholder or inconsistent phone numbers, and duplicate contact buttons — changes nothing, and reports current status, the best CTA to reuse, the best location, and whether a floating button is actually useful.

Review this existing website specifically for adding WhatsApp as a customer contact option. Do not change anything yet. Identify: - the framework and project type - every existing WhatsApp button or link - phone/contact buttons - primary calls to action - header/navigation - hero section - Contact page - footer - mobile navigation - sticky or floating contact buttons - any existing contact-method component that could be reused Check for: - broken WhatsApp links - placeholder phone numbers - duplicate contact buttons - inconsistent phone numbers - buttons that appear to open WhatsApp but do not work Do not change anything. Finish with: 1. Current WhatsApp/contact status 2. Best existing CTA to reuse 3. Best location for WhatsApp 4. Whether a floating WhatsApp button is actually useful or unnecessary

Prepare the WhatsApp Number

Use the real business WhatsApp number in international format.

Example

+212 6XX XX XX XX

When creating the WhatsApp link, the number should normally be used without spaces or punctuation.

Example format

2126XXXXXXXX

IMPORTANT

Do not use a personal number publicly unless that is genuinely the number the business wants customers to contact.

Choose the Message

You can also prefill a simple message. Keep the message short and natural.

"Hi, I found your website and I'd like more information about your services."

Or for a specific service:

"Hi, I'd like to request a quote for car detailing."

The WhatsApp Link Format

A basic WhatsApp click-to-chat link follows this pattern:

Pattern

https://wa.me/[NUMBER]

You can also include a prefilled message. Give the number and preferred message to your AI coding assistant.

Connect WhatsApp

Add WhatsApp Contact

Adds the official WhatsApp click-to-chat link with a correctly encoded prefilled message — reuses an existing Contact/WhatsApp/Get Quote button where possible, works on desktop, mobile, and keyboard, and keeps a floating button (if genuinely useful) small and clear of other fixed UI — never builds a custom API integration, credentials, chatbot, or backend, checks every link, runs the production build, and reports every button/page changed plus WhatsApp integration: READY or NOT READY.

Add WhatsApp contact to this existing website. WhatsApp number: [WHATSAPP NUMBER IN INTERNATIONAL FORMAT] Prefilled message: [OPTIONAL PREFILLED MESSAGE] First inspect the existing contact UI and reuse existing components where appropriate. Requirements: - preserve the current website design - use the official WhatsApp click-to-chat URL format - correctly encode the optional prefilled message - reuse an existing Contact, WhatsApp, Get Quote, or Message button where appropriate - make the WhatsApp action clear to users - make it work on desktop and mobile - preserve keyboard accessibility - use a recognizable WhatsApp icon only if the project already has an appropriate icon system or it can be added cleanly If a floating WhatsApp button genuinely improves this website: - keep it small and unobtrusive - position it so it does not cover important content - make sure it does not conflict with chat widgets, cookie banners, Guide buttons, or other fixed elements - make it work correctly across mobile screen sizes Do not: - create a custom WhatsApp API integration - add API credentials - build a chatbot - add a backend - duplicate existing contact CTAs unnecessarily - redesign unrelated sections Check every WhatsApp link after implementation. Run the production build. Finish with: **WhatsApp integration: READY / NOT READY** Then list: - every button/link added or changed - every page affected - the final WhatsApp URL used

Where Should WhatsApp Appear?

Good places include:

The hero CTA, Contact page, service pages, footer, mobile contact section, or a floating button.

NOTE

You do not need WhatsApp in all of these places. For a simple business website, one strong CTA plus a Contact-page option may already be enough.

Test on Mobile

Do not consider the setup complete just because the WhatsApp icon appears. Test it as a customer. Open the website on your phone, tap the WhatsApp button, and confirm:

WhatsApp opens

The correct business number appears

The prefilled message appears correctly

The message can be edited

The user can send it normally

Test on Desktop

Open the website on a computer and click the WhatsApp button. Depending on the user's setup, WhatsApp Web or the WhatsApp desktop experience should open appropriately.

Run the Final Production-Readiness Audit

WhatsApp Production Audit

Verifies every WhatsApp CTA uses the correct business number in international format, the prefilled message is encoded correctly, no placeholder/outdated numbers or unnecessary duplicate buttons remain, links work on mobile and desktop, floating buttons don't cover content or break other fixed UI, keyboard accessibility holds, no unnecessary API/backend was added, and the production build succeeds — never redesigns unrelated parts, never deploys, and answers WhatsApp status: READY or NOT READY.

Run a final production-readiness audit for the WhatsApp integration. Verify: - every WhatsApp CTA uses the correct business number - the international number format is correct - the prefilled message is encoded correctly - there are no placeholder or outdated numbers - there are no duplicate unnecessary WhatsApp buttons - WhatsApp links work on mobile - WhatsApp links work appropriately on desktop - floating buttons do not cover important content - mobile navigation and other fixed UI still work - keyboard accessibility is preserved - no unnecessary WhatsApp API or backend integration was added - the production build succeeds - there are no important browser/runtime errors Do not redesign unrelated parts of the website. Do not deploy anything automatically. Finish with: **WhatsApp status: READY / NOT READY** If NOT READY, list only what must be fixed.

Final Real-World Test

After publishing:

Open the live website on your phone. Tap WhatsApp. Confirm the correct number. Check the prefilled message. Send one real test message. Confirm it arrives on the business WhatsApp account.

A Fast Way to Get in Touch

Your website now gives visitors a fast way to contact the business without filling out a form.