WhatsApp Call Button Widget

A customizable WhatsApp call button widget for websites. This project includes:

1. Configurator: A React application to customize the button's appearance and generate the embed code.
2. Standalone Widget: A lightweight, vanilla JavaScript bundle that renders the button on any website.

🚀 Getting Started

Prerequisites

• Node.js (v20 or later recommended)
• npm

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd whatsapp-widget

2. Install dependencies:

   npm install

🛠️ Local Development

Running the Configurator

To run the React-based configurator tool locally:

npm run dev

This will start the development server (usually at http://localhost:5173). You can use this UI to design your button and copy the embed code.

Building the Standalone Widget

To build the lightweight JavaScript widget (the file that gets embedded on other sites):

npm run build:widget

This generates the bundled file at dist/whatsapp-widget.js.

📦 Publishing to npm

This project is configured to automatically publish to npm using GitHub Actions when a new release is created.

1. Setup (One-time)

1. Package Name: The package is configured as @peachai/whatsapp-widget. Ensure you have access to publish to the @peachai scope on npm.
2. NPM Token:
   • Log in to npmjs.com.
   • Generate an Automation Access Token.
   • Go to your GitHub Repository Settings > Secrets and variables > Actions.
   • Create a new Repository Secret named NPM_TOKEN and paste your token.

2. Automatic Publishing

To publish a new version:

1. Update the "version" in package.json (e.g., 0.0.1 -> 0.0.2).
2. Commit and push your changes.
3. Create a new Release on GitHub with a tag starting with v (e.g., v0.0.2).
   • Go to "Releases" > "Draft a new release".
   • Choose a tag: v0.0.2.
   • Click "Publish release".
4. The GitHub Action will automatically build and publish the package to npm.

3. Manual Publishing

If you prefer to publish manually from your local machine:

# 1. Login to npm
npm login

# 2. Build the widget
npm run build:widget

# 3. Publish
npm publish --access public

🌐 Usage

Once published, users can embed the widget using the jsDelivr CDN link.

Example Embed Code:

<script>
  var whatsappButtonConfig = {
    "ctaText": "Chat with us",
    "phoneNumber": "+1234567890",
    "position": "bottom-right",
    "buttonColor": "#25D366"
  };
</script>
<script async src="https://cdn.jsdelivr.net/npm/@peachai/whatsapp-widget@latest/dist/whatsapp-widget.js"></script>