Notifications — Ordio Documentation

Browser notifications

Open Settings > Notifications and select Enable beside Browser notifications. Allow notifications when the browser asks. New orders then produce an alert on that device while the administration area is connected.

Browser permission is managed separately on each device. If alerts stop, check the browser's site permissions and operating-system notification settings.

Before connecting WhatsApp

WhatsApp messages use the Meta WhatsApp Cloud API. Prepare the following in Meta before deployment:

A Meta business portfolio
A Meta app with the WhatsApp product added
An approved WhatsApp business phone number
The phone-number ID shown under WhatsApp > API setup
A permanent access token with permission to send WhatsApp messages
The app secret from the Meta app settings
A private verification token that you create for the webhook

Use international phone numbers, including the country code. For example, enter +14155550123, not a local number without its country code.

Create the message templates

Open WhatsApp Manager > Message templates in Meta and create the three templates below. Choose the Utility category and English as the language. Template names must use lowercase letters and underscores.

Meta asks for example values while reviewing a template. The examples are only for approval and do not appear in live orders.

1. Paid order alert

Name the template new_paid_order.

Use four body variables in this order:

Variable	Live value	Example
`{{1}}`	Order number	`10482`
`{{2}}`	Order total in the configured currency	`$27.50`
`{{3}}`	Fulfilment method	`Collection`
`{{4}}`	Short item summary	`2 x Coffee, 1 x Sandwich`

Suggested body:

New paid order {{1}}

Total: {{2}}
Fulfilment: {{3}}
Items: {{4}}

Add these buttons in the same order:

A dynamic URL button labelled View order. Use https://YOUR-STOREFRONT-DOMAIN/order/{{1}} and provide an example order ID when Meta asks for a sample.
A quick-reply button labelled Accept order.

The URL receives the internal order ID, while the message body displays the shorter order number.

2. Pay-later order alert

Name the template new_pay_later_order.

Use five body variables in this order:

Variable	Live value	Example
`{{1}}`	Order number	`10483`
`{{2}}`	Order total in the configured currency	`$19.00`
`{{3}}`	Fulfilment method	`Delivery`
`{{4}}`	Payment choice	`Pay on delivery`
`{{5}}`	Short item summary	`1 x Family meal`

Suggested body:

New order {{1}}

Total: {{2}}
Fulfilment: {{3}}
Payment: {{4}}
Items: {{5}}

Add the same two buttons, in the same order, as the paid-order template:

View order dynamic URL
Accept order quick reply

3. Customer order update

Name the template customer_order_update.

Use two body variables:

Variable	Live value	Example
`{{1}}`	Order number	`10482`
`{{2}}`	Current order message	`Ready for collection.`

Suggested body:

Order {{1}} update

{{2}}

This template does not need buttons. Ordio uses it for the enabled customer events, including order received, accepted, preparing, ready for collection, out for delivery, completed and cancelled.

Wait until Meta shows all three templates as Approved before enabling WhatsApp notifications. The current integration sends the English template language code en. A different language requires matching approved templates and a code change to the language setting.

Add the template names

Open functions/.env and confirm these values:

WHATSAPP_CUSTOMER_ORDER_UPDATE_TEMPLATE=customer_order_update
WHATSAPP_ORDER_ALERT_TEMPLATE=new_paid_order
WHATSAPP_PAY_LATER_ORDER_ALERT_TEMPLATE=new_pay_later_order

If Meta approved different names, replace only the values after =. Do not put access tokens, app secrets or verification tokens in this file.

Confirm that STOREFRONT_BASE_URL contains the current HTTPS storefront address. The dynamic URL buttons in Meta must use the same domain.

Deploy the integration

From the source folder, run:

npm run deploy -- --providers=whatsapp

Firebase asks for four values:

Prompt	Where to find it
`WHATSAPP_ACCESS_TOKEN`	Permanent access token created for the Meta app
`WHATSAPP_PHONE_NUMBER_ID`	WhatsApp > API setup
`META_APP_SECRET`	App settings > Basic
`WHATSAPP_VERIFY_TOKEN`	A private value you create and keep for webhook verification

Enter each value when prompted. Firebase stores them in Google Cloud Secret Manager. Do not add them to an environment file, documentation, a support message or the downloadable package.

If the command is run again, Firebase may reuse an existing secret. Replace a secret only when the Meta credential has changed.

Configure the Meta webhook

After deployment, open the WhatsApp configuration in the Meta app and use:

https://REGION-PROJECT_ID.cloudfunctions.net/whatsappWebhook

Replace REGION with the configured Functions region and PROJECT_ID with the Firebase project ID.

Paste the callback URL.
Enter the same WHATSAPP_VERIFY_TOKEN used during deployment.
Complete webhook verification.
Subscribe the WhatsApp business account to the messages field.

The webhook receives delivery states and the Accept order quick reply. Ordio verifies Meta's request signature before processing it.

Enable WhatsApp in Ordio

Enter the primary business contact number under Business details.
Confirm that the page shows WhatsApp as connected.
Enable WhatsApp notifications.
Choose the business and customer events to send.
Select Save settings.

The primary contact number receives business order alerts. Customer updates use the number connected to the customer's account.

Test before launch

Use Meta test resources or approved production test recipients first.

Place a pay-at-collection or pay-on-delivery order and confirm the business receives the pay-later template.
Complete a test online payment and confirm the business receives the paid-order template.
Select Accept order in WhatsApp and confirm the order changes to accepted in Orders.
Move the order through the enabled statuses and confirm the customer receives the expected updates.
Confirm the displayed order number, total, currency, fulfilment method and item summary are correct.
Disable one customer event and confirm that status sends no message.
Confirm ordering still completes if Meta temporarily rejects a message.

Common setup problems

The template is rejected: Keep the wording transactional, use the Utility category and provide realistic examples for every variable.

The API reports that a template does not exist: Confirm the name in functions/.env, the approved language and the WhatsApp business account used by the access token. Redeploy after changing an environment value.

The API reports a parameter-count error: Match the body variables and buttons exactly as listed above. Paid alerts use four body values; pay-later alerts use five; customer updates use two.

The webhook cannot be verified: Confirm the callback region and project ID, then enter the exact verification token stored as WHATSAPP_VERIFY_TOKEN.

Messages work only for test numbers: Complete the Meta business, phone-number and template approval steps before sending to other recipients.

The administration area says WhatsApp is not connected: Deploy again with --providers=whatsapp. A normal core deployment does not include the WhatsApp Functions.