Chat Nasi Pro

Overview

Chat Nasi Pro is an add-on for the free Chat Nasi plugin. It turns a single floating WhatsApp button into a small support desk.

How it fits with the free plugin

Chat Nasi Pro never edits the free plugin's files. It reads the free plugin's settings and decorates what it prints, so you can update either one on its own.

Requirements & install

Chat Nasi Pro is sold separately and is not distributed on WordPress.org. You install it from the zip file you received.

Install the plugin

1. Install and set up the free Chat Nasi plugin

   Activate it, then open Chat Nasi in the admin menu and enter your WhatsApp number. The free plugin's dashboard looks like this:

   

2. Upload Chat Nasi Pro

   Go to Plugins › Add New › Upload Plugin, choose chat-nasi-pro.zip, select Install Now, then Activate. You can also upload the chat-nasi-pro folder to /wp-content/plugins/ and activate it from the Plugins screen.

3. Open the Pro screen

   Go to Chat Nasi › Pro. You can also use the Pro Settings link under the plugin's name on the Plugins screen. Until a license is active, the menu item shows a small ! badge.

4. Activate your license

   Continue with the next section.

License

A license key unlocks the Pro features on one website at a time.

Activate a key

1. Open the License tab

   Go to Chat Nasi › Pro › License.

2. Paste your key

   Keys look like NASI-XXXX-XXXX-XXXX-XXXX. Select Activate License.

3. Check the status

   A green dot and “License active” confirm it. If activation fails, the message from the license server appears above the form. The most common cause is a key that is already active on another site.

What the status means

How checking works

• Pro re-checks your key once a day in the background. Your visitors never wait for it.
• A refunded or expired key switches Pro features off within 24 hours.
• If the license server is briefly unreachable, Pro keeps the last known status and tries again the next day.

Move to a new domain

Select Deactivate License on the old site first. That frees the slot, and you can activate the same key on the new site. Deactivating the plugin from the Plugins screen also frees the slot.

What happens without an active license

Quick start

Five steps from a fresh install to a working team chat.

1. Add your team in the free plugin

   Open Chat Nasi › Agents, turn on Enable multi-agent panel, and add each person's name, role, photo, WhatsApp number and prefilled message. Select Save Changes.

   

2. Activate your Pro license

   See License.

3. Set who is available when

   Open Pro › Agents & Availability and choose an availability mode for each person. See Agents & availability.

4. Match your brand

   Open the Appearance tab, pick colours, and watch the live preview. See Appearance.

5. Turn on the extras and save

   Enable any extra channels or the pre-chat form on the Channels & Lead Form tab. Select Save Pro Settings, then open your site in a private window to check the result.

Agents & availability

Show visitors who can reply right now. Each teammate appears as online (green) or offline (grey).

Status display

Availability for each person

Every agent from the free plugin gets a card. Choose one of three modes:

Custom hours

• Timezone: start typing a city, such as Africa/Nairobi. Leave it empty to use the business-hours timezone.
• Weekly hours: tick the days this person works and set a start and end time. New schedules default to Monday to Friday, 08:00 to 17:00, with the weekend off.
• Same-day ranges only. The start must be earlier than the end. A shift that runs past midnight is not supported.
• Boundaries count as open. A person with hours ending at 17:00 still shows online at 17:00 and switches to offline at 17:01.
• Show only in languages: optional. See Languages.

The “Back” label

Pro looks up to a week ahead for the next opening time and words it for the visitor:

Times follow Settings › General › Time format. If the format includes am/pm you get “8:00 am”, otherwise “08:00”. Day names follow your site language.

Floating button when nobody is available

When every agent is offline, the main floating button turns grey (and stops pulsing). With a single number and no agents, the button follows the main number's status. You can change the grey in Appearance.

Try it

This demo uses the same rules as the plugin. Johnson follows the default weekly hours (Monday to Friday, 08:00 to 17:00). Change Sarah's mode, the day and the time to see how the panel and the main button respond.

Appearance

Match the chat box to your brand. The defaults already use WhatsApp green.

Colours

Open Pro › Appearance, pick a colour, and check the live preview. Select Reset colours to default to go back to the table below. Only valid hex colours are saved.

Shape

Extra channels

Give visitors a second way to reach you. Each enabled channel adds a small round button next to the WhatsApp button.

Set up a channel

1. Open the tab

   Pro › Channels & Lead Form

2. Tick Enable

   Then fill in the field next to it.

3. Save

   Select Save Pro Settings.

Where the buttons appear

• They sit beside the main floating button on the same side, and never on top of the agent panel. On the right side they line up to the left of the main button. On the left side they line up to its right.
• Their size matches the free plugin's button size (small, medium or large), and they use the same z-index.
• They show only on pages where the free plugin shows its floating button. If a page is excluded by the free plugin's visibility rules, the extras are hidden there too.
• Each channel keeps its own brand colour.

Pre-chat lead form

Ask for a few details before WhatsApp opens. Every submission is saved as a lead.

What happens on submit

1. The visitor clicks a WhatsApp link

   The floating button, an agent row, or a shortcode link.

2. The form opens

   They fill it in and select Start Chat.

3. WhatsApp opens at once

   The lead is saved in the background, so a slow server never delays the chat.

Settings

Open Pro › Channels & Lead Form › Pre-chat lead capture form.

What lands in WhatsApp

Pro builds the visitor's first WhatsApp message from the form:

Spam protection

• A hidden honeypot field catches most bots. Their submissions are quietly discarded.
• Each visitor can send 5 submissions per 10 minutes. After that the server replies “Too many requests”.
• Every request carries a security nonce, and the server repeats the form's checks before saving.

Email & webhooks

Get told about each new lead, or send it straight to the tools you already use.

Email notification

Tick Email me every new lead under Lead delivery. Add an address, or leave it empty to use the site's admin email. Each message has the subject [Your site name] New chat lead and lists the name, email, phone, topic, agent, page and message.

Webhook

Tick Send every lead to Zapier, Make or your CRM as JSON and paste the webhook URL. Pro sends a POST request with a JSON body each time a lead is saved. The request does not wait for a reply, and only public http and https addresses work.

{
  "name": "Amina Otieno",
  "email": "amina@example.com",
  "phone": "+254 700 000 000",
  "topic": "Sales",
  "message": "I would like a quote",
  "page_url": "https://example.com/pricing/",
  "agent_id": "agent_1789854149016_0",
  "agent_name": "Sarah",
  "consent": true,
  "site": "https://example.com",
  "timestamp": "2026-09-20 10:42:07"
}

Verify the signature

Add a signing secret (up to 128 characters) and Pro signs every request. The header is X-Chat-Nasi-Signature and its value is sha256= followed by the HMAC-SHA256 of the raw request body, using your secret as the key. Compare it on your server before trusting the request.

const crypto = require('crypto');

function isValid(rawBody, header, secret) {
  const expected = 'sha256=' +
    crypto.createHmac('sha256', secret).update(rawBody).digest('hex');
  const a = Buffer.from(expected);
  const b = Buffer.from(header || '');
  return a.length === b.length && crypto.timingSafeEqual(a, b);
}

$raw      = file_get_contents( 'php://input' );
$expected = 'sha256=' . hash_hmac( 'sha256', $raw, $secret );
$given    = $_SERVER['HTTP_X_CHAT_NASI_SIGNATURE'] ?? '';

if ( ! hash_equals( $expected, $given ) ) {
    http_response_code( 401 );
    exit;
}

Developers can change the payload with the chnasipro_lead_payload filter. See the Developer reference.

Leads & CSV export

Every form submission is stored in your own WordPress database.

The Leads tab

Open Pro › Leads. Leads are listed newest first, 25 per page.

• Delete removes one lead after a confirmation.
• Delete all leads permanently removes every lead after a confirmation. This cannot be undone.

Export to CSV

Select Export all (CSV) to download every lead, not just the current page. The file is named chat-nasi-leads-YYYY-MM-DD.csv and has these columns:

Date, Name, Email, Phone, Topic, Message, Agent, Page URL, Consent, Channel

• The file starts with a UTF-8 byte-order mark so Excel shows accents correctly.
• Any cell that starts with =, +, - or @ gets a leading apostrophe. This stops a malicious lead from running as a formula when you open the file in Excel or Google Sheets.
• Export needs an active license.

What is stored

Shortcodes

Place the chat box or a single button anywhere: a page, a post, a widget or a page-builder block.

Use [chnasi_chat]. The alias [chat_nasi] works the same way. The shortcode uses your agents, hours and colours, and works whether or not the floating button is shown on that page. If the pre-chat form is on, it opens from shortcode links too.

Build a shortcode

All attributes

Examples

[chnasi_chat]
[chnasi_chat agents="agent_1789854149016_0,agent_1789854149016_2"]
[chnasi_chat title="Sales team" intro="Pick someone to chat with." align="center"]
[chnasi_chat layout="button" label="Chat now"]
[chnasi_chat layout="button" agent="agent_1789854149016_0" align="right"]
[chnasi_chat layout="button" phone="254700000000" message="Hi, I need a quote"]

Use it in a theme file

Call the template helper. It accepts the same arguments as the shortcode.

<?php echo chnasipro_get_chat( array( 'layout' => 'button', 'label' => 'Chat now' ) ); ?>

Argument values cannot contain double quotes or square brackets. Pro removes them.

The generator in the dashboard

The Shortcode & Languages tab has a built-in generator with the same options. Choose a layout, tick the agents, pick an alignment, then select Copy.

Good to know

• Visitors see nothing if the license is not active. Administrators see a short hint instead.
• If no agents are set up in the free plugin, the box falls back to the main WhatsApp number.
• Administrators also see a hint when the agent IDs in agents match nobody, or when a button has no number.
• When click tracking is on in the free plugin, clicks on shortcode links are counted in its analytics too.

Languages

Every visitor-facing string, from both plugins, can be translated with WPML or Polylang. No changes to the free plugin are needed.

Translate the chat text

1. Save your settings once

   Pro registers the strings whenever you save settings, and whenever you open a Chat Nasi or Chat Nasi Pro screen while the license is active.

2. Open your translation screen

   WPML: WPML › String Translation, domain “Chat Nasi”.
   Polylang: Languages › Translations, group “Chat Nasi”.

3. Translate and save

   Visitors now see the text in their own language. The Languages section of the Shortcode & Languages tab shows which plugin was detected and how many strings are registered.

Which strings are translatable

Show an agent in some languages only

On the Agents & Availability tab, fill in Show only in languages with language codes such as en, fr. On any other language the agent is not shown. Leave it empty to show the agent everywhere. A French-speaking agent, for example, can appear only on your French pages.

Pro finds the visitor's language from Polylang first, then WPML, then the first two letters of the site locale.

Other translation plugins

Hook the chnasipro_translate_string filter. It runs for every string on the public site.

add_filter( 'chnasipro_translate_string', function ( $value, $name, $context ) {
    // $value   Current string. $name is a stable key such as 'pro_online_label'.
    // $context Group name, always 'Chat Nasi'.
    return my_translation_lookup( $value, $name );
}, 10, 3 );

Translate the Pro screens themselves

Chat Nasi Pro's own admin text uses the text domain chat-nasi-pro and loads translations from the plugin's languages folder. To make a template, run this from the plugin folder:

wp i18n make-pot . languages/chat-nasi-pro.pot

Developer reference

For developers who extend, style or debug Chat Nasi Pro.

How Pro plugs into the free plugin

• Pro loads on plugins_loaded at priority 20, after the free plugin and most other plugins.
• It reads the free plugin's options through CHNASI_Settings and translates them through the option_chnasi_settings filter, on the public site only.
• Its CSS, JS and footer output run at priority 20. Pro knows the floating button is showing when the free plugin's chnasi-frontend stylesheet is enqueued, so every free display rule is respected.
• Its script finds the free plugin's markup through these attributes: [data-chnasi-root], [data-chnasi-agent-panel], .chnasi-agent-panel-body and a[data-chnasi-agent-id]. If you customise the free plugin's markup, keep them.
• Availability is computed in the visitor's browser from a config printed by PHP, and refreshed every 60 seconds. That keeps status correct on full-page-cached sites.

Files

chat-nasi-pro/
├─ chat-nasi-pro.php                  bootstrap, constants, template helper
├─ uninstall.php                      removes data when the plugin is deleted
├─ admin/
│  ├─ class-chnasipro-admin.php       menu, tabs, AJAX save, CSV export, lead deletion
│  └─ views/  page-dashboard.php, partial-hours.php
├─ includes/
│  ├─ class-chnasipro-license.php     activation, daily check, deactivation
│  ├─ class-chnasipro-settings.php    defaults, sanitising, option storage
│  ├─ class-chnasipro-availability.php  schedules, online/offline logic
│  ├─ class-chnasipro-i18n.php        WPML / Polylang registration and translation
│  ├─ class-chnasipro-leads-db.php    leads table and queries
│  ├─ class-chnasipro-frontend.php    CSS tokens, channels, lead form, lead endpoint
│  └─ class-chnasipro-shortcode.php   [chnasi_chat] and [chat_nasi]
├─ assets/  css/ (admin-pro, frontend-pro)  js/ (admin-pro, frontend-pro)
└─ languages/

Hooks and functions

add_filter( 'chnasipro_lead_payload', function ( $payload, $lead ) {
    $payload['source'] = 'website-chat';
    return $payload;
}, 10, 2 );

AJAX and admin-post actions

Stored data

Style it yourself

The appearance settings are printed as CSS custom properties on :root. Override them in your theme to go beyond the dashboard.

Useful classes: .chnasipro-online and .chnasipro-offline on each agent link, .chnasipro-all-offline on the floating button, .chnasipro-box and .chnasipro-inline-btn for shortcodes, and .chnasipro-prechat-modal for the form.

Security

• Every admin action checks a nonce and the manage_options capability.
• All input is sanitised field by field before it is saved, and all output is escaped.
• The public lead endpoint has a honeypot, a rate limit and a nonce, and repeats the form's checks on the server.
• CSV export neutralises spreadsheet formulas.

Deactivate versus delete

Troubleshooting

Answers to the questions that come up most.

.chnasipro-prechat-box form input,
.chnasipro-prechat-box form select,
.chnasipro-prechat-box form textarea {
  background: #fff;
  color: #111827;
}

Changelog

What changed in each release.