neeto-whatsapp-nano

The neeto-whatsapp-nano manages WhatsApp messaging within neeto applications. The nano exports the @bigbinary/neeto-whatsapp-frontend NPM package and neeto-whatsapp-engine Rails engine for development..

Contents

1. Development with Host Application
   • Engine
     • Installation
     • Usage
   • Frontend package
     • Installation
     • Instructions for development
     • Components
2. Instructions for Publishing

Development with Host Application

Engine

The engine handles WhatsApp Business API integration, including sending and receiving messages, processing webhooks for message status updates, and managing WhatsApp message templates.

Installation

1. Add this line to your application's Gemfile:

   source "NEETO_GEM_SERVER_URL" do
      # ..existing gems
   
      gem 'neeto-whatsapp-engine'
   
      # Use this for live development:
      # gem 'neeto-whatsapp-engine', path: "../neeto-whatsapp-nano"
   end

2. And then execute:

   bundle install

3. Add this line to your application's config/routes.rb file:

   mount NeetoWhatsappEngine::Engine, at: "/neeto_whatsapp"

   NOTE: The mount point must be /neeto_whatsapp and cannot be changed to any other path.

4. Run the following command to copy the migrations from the engine to the host application:

   bundle exec rails neeto_whatsapp_engine:install:migrations

5. Add the migrations to the database:

   bundle exec rails db:migrate

6. Add the following environment variables:

WHATSAPP_NANO_WEBHOOK_VERIFY_TOKEN=abc123
WHATSAPP_WEBHOOK_APP_SECRET=abc123
WHATSAPP_ENABLED_ORGANIZATIONS="spinkart"
WHATSAPP_DISABLE_INBOUND_MESSAGES=true   <--- To disable processing incoming messages. Defaults to false.

7. Add the following association to the entity to which you want to associate the whatsapp messages

has_many :whatsapp_messages, class_name: "NeetoWhatsappEngine::Message", as: :entity, dependent: :destroy

8. Override the fetch_entity! method for NeetoWhatsappEngine::Api::V1::MessagesController

# app/overrides/controllers/neeto_whatsapp_engine/api/v1/messages_controller_override.rb

# frozen_string_literal: true

NeetoWhatsappEngine::Api::V1::MessagesController.class_eval do

  private
    def fetch_entity!
      # Fetch entity here
      # example:
      # @entity = @organization.bookings.find_by!(id: params[:entity_id])
    end
end

9. The backend exposes 2 services for sending whatsapp messages:

• For sending template messages

NeetoWhatsappEngine::TemplateMessageService.new(account).process(
  recipient_phone:,
  template_name:,
  language_code:,
  entity: booking,
  template_params: [
    # This is an example on how to send params.
    # Check the params required based on the template(created on meta's dashboard) which you are going to use.
    { name: "client_name", type: "text", text: booking.name },
    { name: "meeting_name", type: "text", text: booking.meeting.name },
    { name: "host_meeting_time", type: "text", text: meeting_time_in_host_time_zone },
    { name: "attendee_list", type: "text", text: attendee_list },
    { name: "meeting_location", type: "text", text: meeting_location },
    { name: "booking_id", type: "text", text: booking.sid }
  ]
)

• For sending free-form text message, you can use the frontend component WhatsAppMessages which handles it internally. But if you want to call it manually, then

NeetoWhatsappEngine::TextMessageService.new(account).process(
  recipient_phone:,
  entity:
  message_text: "Hello",
)

Frontend package

Installation

1. Install the latest neeto-whatsapp-frontend package using the below command:

   yarn add @bigbinary/neeto-whatsapp-frontend

Instructions for development

Check the Frontend package development guide for step-by-step instructions to develop the frontend package.

Components

WhatsAppMessages (source code)

This component provides a chat interface for viewing and sending WhatsApp messages for a given entity. It displays a scrollable message list with WhatsApp-style formatting, status icons, and a sticky compose form at the bottom. Messages are polled every 10 seconds for real-time updates.

Props

• entityId: The ID of the entity whose messages should be displayed.
• entityType: The type of the entity (e.g., "Booking").

Usage

import React from "react";

import { WhatsAppMessages } from "@bigbinary/neeto-whatsapp-frontend";

const App = ({ bookingId }) => (
  <WhatsAppMessages
    entityId={bookingId}
    entityType="Booking"
    // TO enable/disable the compose form to send messages. Defaults to true.
    disableComposeForm={false}
  />
);

export default App;

Instructions for Publishing

Consult the building and releasing packages guide for details on how to publish.