Skip to main content

Enhancing Customer Engagement through Real-Time Notifications: A Developer’s Guide to Integrating Fynd Webhooks with Third-Party APIs

In this document, we will learn how to create a Notification Extension that uses WhatsApp APIs and Fynd Webhoooks to send a message to the customer when they place an order. A Notification Extension is a type of Communication Extension that monitors specific events in a system and notifies the customers through popular messaging platforms by subscribing to Fynd webhook events.

info

Refer to Introduction to Extensions to learn more about Extensions.

Third-party Notification APIs​

Third-party Notification APIs are provided by service providers that enable businesses to send notifications to users through various communication channels, such as SMS, email, push notifications, and messaging apps (like WhatsApp, Telegram, or Facebook Messenger). These APIs are maintained and hosted by third-party companies (e.g., Twilio, WhatsApp Business API, etc.), allowing developers to leverage their infrastructure, scalability, and security features to handle messaging without building a full notification system from scratch.

  1. Twilio: Enables SMS, WhatsApp, and email notifications with robust templating and easy API integration for multi-channel communication.
    1. SendGrid (by Twilio): An email platform offering customizable templates and A/B testing, perfect for transactional and marketing emails.
  2. WhatsApp Business API (Meta): The official API for WhatsApp allows businesses to send end-to-end encrypted messages with templates, ideal for brand interactions.
  3. Telegram Bot API: Allows sending of rich messages on Telegram, including images, buttons, and videos, to reach Telegram’s user base. [Get started with Telegram Bot API]
  4. Vonage (Nexmo): Offers SMS, WhatsApp, Viber, and more with features like real-time messaging and message tracking, making it versatile for notifications.
  5. Firebase Cloud Messaging (FCM): A powerful service for mobile push notifications, compatible with Android, iOS, and the web, ideal for app-based alerts.
  6. Plivo: Known for SMS and Voice APIs, it’s a reliable option for global SMS coverage and two-way communication needs.
  7. Slack API: Allows you to send messages to Slack channels or users, useful for business updates or internal notifications.
  8. Amazon Simple Notification Service (SNS): A scalable option for SMS, email, and push notifications, with integration into the AWS ecosystem.
  9. Infobip: Supports SMS, Voice, Email, WhatsApp, and more, all in one omnichannel platform with advanced tracking.

Fynd Commerce Webhooks​

Webhooks are automated notifications sent between systems triggered by specific events. Fynd Commerce offers over 150 webhook events to which you can subscribe, enabling real-time updates and integration possibilities. Refer to Webhooks for more details.
Below is a sample selection of some of our available webhooks:

Company
company/product/update : Product updated (v3 available)
company/product-size/create : Product size created : (v2 available)
company/support-ticket/create : Support ticket created
company/courier-partner/account-status : Courier partner account status changed

Storefront
application/order/placed : Order placed (We will be using this wehbook in our use case)
application/payment/failed : Payment failed
application/cart/create : Cart created
application/coupon/redeem : Coupon redeemed
application/refund/refund_done : Refund done
application/shipment/data_update : Shipment updated
application/user/create : User created

User action
click/user_login/identity : User logged in
click/product_search/search : Searched for products
click/product_view/click : Product is viewed
click/product_wishlist_add/engagement : Added to wishlist

Extension
extension/extension/install : Extension installed
extension/extension-subscription/create : Subscribed to an extension

End Use Cases​

  1. WhatsApp Order Notification
    Use Case: Send a notification to the customer via WhatsApp when they places an order. The notification would include order number, items purchased, estimated delivery time, and a thank-you message. This enhances customer experience by providing immediate feedback and assurance about their purchase.
    Webhook: application/order/placed and application/shipment/create
    Channel: WhatsApp

  2. Product Update Notification
    Use Case: Notify the relevant team members via email or Slack whenever a product is updated. This can help ensure that everyone is aware of changes to product details, allowing for quicker responses to any issues or necessary updates in marketing materials.
    Webhook: company/product/update
    Channel: Email / Slack

  3. Abandon Cart Notification
    Use Case: Sends a friendly reminder when a customer adds items to their cart but doesn’t completed the purchase within a day. This helps increases purchases in the seller’s store.
    Webhook: application/cart/create and application/cart/update
    Channel: Telegram

  4. Discount Start Notification
    Use Case: Push a notification to all users or relevant marketing personnel when a new discount is activated. This can encourage timely promotions across various channels, enhancing customer engagement.
    Webhook: application/discount/start
    Channel: SMS / WhatsApp

  5. Payment Failed Notification
    Use Case: Alert customers and the finance team when an order payment fails, prompting necessary follow-up actions to resolve payment issues, such as retrying the payment or contacting the customer.
    Webhook: application/order/payment_failed
    Channel: Slack / Jira

WhatsApp Order Notification Extension​

The Fynd WhatsApp Order Notification extension is designed to help the seller build stronger relationships with their customers by sending instant notifications on order confirmations, and delivery status. This ensures that the customers are well-informed through the most widely used messaging platforms, WhatsApp.

Benefits​

  • Improved Customer Satisfaction
  • Reduced Customer Service Load
  • Higher Engagement with Minimal Cost
  • Easy Integration
A lot more to come

We will be showcasing case studies for all the different extension types and a variety of use cases. These case studies will help you understand the Fynd Commerce Extensions ecosystem better and build valuable extensions for your seller.

Step-by-Step Guide​

The step-by-step process will walk you through setting up and configuring the extension, from integrating with WhatsApp’s API to handling order-placed notifications. Following these instructions, you can create a WhatsApp Order Notification extension and have a foundation for developing any notification extension across multiple channels.

Prerequisites​

  • Git for the starter code
  • Node.js 18+ for FDK CLI
  • Collect access-token from WhatsApp. Refer to Auth Tokens for more details.
note

Please ensure that you follow the coding standards provided in our Development Checklist.

1. Create a Fynd Partner Account​

Do the following steps to create a Fynd Partner account:

  1. Go to Fynd Partner.
  2. Enter your details.
  3. Enter the OTPs you received on your mobile number and email address to verify your contact details.
  4. Enter the basic details of your organization.
  5. Click Create Partner Organization. You have successfully created a Fynd Partner account.

Refer to Creating A Partner Account for more details.

2. Create a Development Company​

Do the following steps to create a development company:

  1. Login to your Fynd Partner account.
  2. Select an organization where you need to create a development company.
  3. Go to Company.
  4. In the Development tab, click Add.
  5. Fill in the required details.
  6. Click Save. Your development account is created and will be available in the Development tab.

Refer to Create Development Company for more details.

3. FDK CLI​

  • Run the following commands in your terminal:
# Install FDK CLI
npm install -g @gofynd/fdk-cli

# Login to your Fynd Partner account
fdk login

# Create dummy product data in your development company
fdk populate

# Initialise an extension
fdk extension init

Refer to our Get Started page for more details.

4. Subscribe to Webhook​

  1. Open the extension folder that you have created in a code editor.
  2. Open server.js file.
  3. Create an empty function, which will be used to send notifications.
async function orderPlacedNotification (event_name, request_body, company_id, application_id) {
  // Will be filled later
  console.log(event_name, request_body, company_id, application_id);
}

  1. In setupFdk function under webhook_config.event_map object, do the following:

    1. Add an object with application/order/placed key
    2. Set the handler key to orderPlacedNotification
    3. Set the version key to 1.

  2. Set the access_mode to offline.

const fdkExtension = setupFdk({

  access_mode: 'offline',
  webhook_config: {
    api_path: '/api/webhook-events',
    notification_email: '<[email protected]>',
    event_map: {
      'application/order/placed': {
        handler: orderPlacedNotification,
        version: '1',
      },
    },
  },
});

5. Send Notification​

  1. In server.js, let’s first create a message template function to generate the text to send to the customers.
const confirmationText = (first_name, product_name, order_number, url) =>
`Dear ${first_name},
We have received your order for ${product_name}.

Order number: ${order_number}

Click below to track your order:
${url}`
  1. Let’s create a generic function, sendWhatsAppMessage for sending messages via WhatsApp.
const sendWhatsAppMessage = async (number, text) => {
  try {
    const response = await fetch('https://graph.facebook.com/v20.0/<number>/messages', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer 6KenZCLnAZCWdoljX9...JBpO66wLXZC2SveU',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        messaging_product: 'whatsapp',
        to: number,
        type: "text",
        text: { body: text }
      })
    })
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error('Error sending message:', error)
  }
}
  1. In the orderPlacedNotification function, curate the data from the webhook payload, generate the text and call sendWhatsAppMessage function.
async function orderPlacedNotification (event_name, request_body, company_id, application_id) {
  const order = request_body.payload.order
  const order_id = order.order_id
  const product_name = order.shipments[0].bags[0].item.name

  // Avoid sending message for anonymous users
  if (order.user.is_anonymous_user) {
    console.log('Anonymous user: no notification sent for order: ', order_id)
    return false
  }

  const country_phone_code = order.user.meta.country_phone_code
  const mobile = order.user.mobile
  const first_name = order.user.first_name

  const url = `https://<YOUR-DOMAIN>.fynd.io/order-tracking/${order_id}`

  const phone_number = country_phone_code + mobile
  const text = confirmationText(first_name, product_name, order_id, url)

  sendWhatsAppMessage(phone_number, text)
}

6. Get the URL Domain Using SDK​

  • Add all of these above the url variable, you can change the URL as given below:
    1. Get the platformClient from the fdkExtension we received from the setupFdk function.
    2. Get the domains from the client using .application().configuration.getDomains() function.
    3. You can get the domain name from the response as resp.domains[0].name
async function orderPlacedNotification (event_name, ...) {
  ...

  const platformClient = await fdkExtension.getPlatformClient(company_id)
  const resp = await platformClient.application(application_id).configuration.getDomains({
        companyId: company_id,
        applicationId: application_id,
    })
  const url = `https://${resp.domains[0]?.name}/order-tracking/${order_id}`

  ...
}

7. Store the Access Token​

  1. Create a .env file in the root folder.
  2. Enter the token inside the file.
    For example, WHATSAPP_COMMERCE_MESSENGER_TOKEN="EAAOHpV ... hmIlUB".
  3. Initialize the env configuration by adding require('dotenv').config() to server.js file after the imports.
  4. Use process.env.WHATSAPP_COMMERCE_MESSENGER_TOKEN instead of hardcoding the token.
await fetch('https://graph.facebook.com/v20.0/<number>/messages', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.WHATSAPP_COMMERCE_MESSENGER_TOKEN}`,
    ...
  }
})

8. Testing the Extension​

  1. Run fdk ext preview in your terminal.
  2. Go to the URL shown in the terminal.
  3. Click Accept and Continue.
  4. Click the the eye icon next to your sales channel. You will be navigated to the storefront website.
  5. Login to the storefront website.
  6. Buy a product and choose cash on delivery. You will receive a order notification in your WhatsApp account.
note

Please ensure that you follow the testing standards provided in our Testing Checklist.

Deployment​

We recommend you use Serverless deployment as it's ideal for scalable, cost-effective applications. It removes the need for infrastructure management, allowing automatic scaling and pay-per-use billing, so you can focus solely on code and functionality.

note

Please ensure that you follow the deployment standards provided in our Deployment Checklist.


Submission & Review​

Go through the steps provided here to submit your extension to the Fynd Extension Marketplace. Once you submit, we will review your extension and approve it or share feedback.

note

Please go through our Review Checklist to understand what we evaluate in your extension.

Connect with Us

For a customized solution that fits your needs, feel free to reach out to our Team.


Was this section helpful?