Sending Virtual Gifts - JavaScript

Virtual gifting is a powerful monetization and engagement feature that allows viewers to support hosts or speakers during a livestream by sending them digital tokens or "gifts." These gifts can be visually animated and even linked to leaderboards or reward systems.

This guide explains how to implement a secure and real-time virtual gifting experience using your backend server in combination with VideoSDK PubSub.

How It Works

1. User Action: A viewer taps on a gift button to send a virtual gift to the host.

2. Server Verification:

   • A request is made to your business backend to process the gift.
   • The server authenticates the user, checks their wallet balance, deducts the gift value, and returns a success response.

3. Event Broadcast: Upon success, the client publishes a PubSub message to inform everyone in the live stream (host + other viewers) that a gift has been sent. Clients can then visually show an animation or notification.

Backend Responsibility

Your backend plays a central role in verifying, validating, and processing gift transactions. It should:

• Authenticate the request (token/session)
• Verify if the user has sufficient balance
• Deduct the gift cost
• Store the transaction in a database (optional but recommended)
• Respond with success or failure

Frontend Implementation

• Sending a Gift (Client to Backend + PubSub)

import axios from "axios";

const sendGift = async (giftType) => {
  try {
    const response = await axios.post("https://your-api.com/send-gift", {
      senderId: "<Sender ID>",
      hostId : "<HOST ID>",
      giftType,
    });

    if (response.data.success) {
      // Notify everyone in the live stream
      liveStream?.pubSub.publish("GIFT", {
        giftType,
        from: senderId,
        to: hostId,
      });
    } else {
      alert("Gift could not be sent: " + response.data.message);
    }
  } catch (error) {
    console.error("Error while sending gift:", error);
  }
};

// Create buttons dynamically (example for browser environment)
const roseButton = document.createElement("button");
roseButton.innerText = "🌹 Send Rose";
roseButton.onclick = () => sendGift("rose");

const diamondButton = document.createElement("button");
diamondButton.innerText = "💎 Send Diamond";
diamondButton.onclick = () => sendGift("diamond");

// Append buttons to the DOM
document.body.appendChild(roseButton);
document.body.appendChild(diamondButton);

• Displaying the Gift (All Clients)

const gifts = [];

const giftContainer = document.createElement("div");
giftContainer.className = "gift-container";
document.body.appendChild(giftContainer);

const handleGiftMessage = ({ message }) => {
  const gift = {
    id: Date.now(),
    from: message.from,
    to: message.to,
    type: message.giftType,
  };

  gifts.push(gift);

  const toast = document.createElement("div");
  toast.className = "gift-toast";
  toast.innerText = `🎁 ${gift.from} sent a ${gift.type} to ${gift.to}`;
  giftContainer.appendChild(toast);

  // Optionally auto-remove the toast after a few seconds
  setTimeout(() => {
    giftContainer.removeChild(toast);
  }, 5000);
};

liveStream?.pubSub.subscribe("GIFT", handleGiftMessage);

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• pubsub