How to Add Virtual _____ in Live Streaming

Integrating virtual gifts into ____ live streaming app is _ fantastic way to boost __________ and create a new _______ channel. Start by understanding ____ audience’s preferences and designing _ diverse range of appealing _______ gifts. Next, develop a ________ interface where viewers can ______ purchase and send these _____ during live streams. This _______ will explain how to _________ the virtual gift function ____ ZEGOCLOUD .

What is Virtual Gifts in Live Streaming?

Virtual gifts are a _______ in live streaming that enhances viewer ___________ within social apps. They _____ the audience to send _______ items, like a cup __ coffee or a car, __ hosts during broadcasts. This _______ makes the streaming experience ____ interactive and lively, enabling _______ to show their support __ a fun and meaningful ___.

These gifts not only ______ a stronger connection between _____ and their audience but ____ provide a monetization avenue ___ creators. By sending virtual _____, viewers can actively participate __ the stream, helping to ______ a vibrant and supportive _________ atmosphere.

Step-by-Step Virtual Gift Process

Here’s a simplified breakdown __ the virtual gift process, ____ audience request to animated _______, ensuring a seamless and ________ experience for both viewers ___ hosts.

1. Gift Request

The audience sends a ____ request to your business ______ API.

2. Verification and Transaction

• The server verifies the ________’_ balance.
• Executes balance deduction for ___ audience.
• Adds the gift to ___ host’s account.
• Returns the request status __ the audience.

3. Gift Display

Upon a successful request, _______ the gift animation on ___ screen.

4. Broadcasting the Gift

• The server calls the __-____ messaging API with MessageType: 2 to announce the ____ to other room members.
• Combine multiple gifts into _ single message to avoid _________ the request rate limit (10 requests per second per ___ ID). (QPS may be adjusted.)

5. Message Field Structure

When configuring the in-room _______ API for sending virtual _____, use the following fields:

Key	Type	Description
Message	JSON String	The message field in ___ Send in-room messages interface.
operator	Int	Operation type to distinguish ____ other operations like PK.
An array of gift _______.	String	User ID of the ____ sender. For combined gifts, ___ this to the default ______ message ID.
targetID	String	User ID of the ____ recipient.
gifts	JSON String	Array of gift details.
gifts.user_id	String	Gift giver’s user ID.
gifts.user_name	String	Gift giver’s username.
gifts.gift_type	Int	Type of gift sent.
gifts.gift_count	Int	Number of gifts sent.
gifts.gift_points	Int	Points associated with the ____.
gifts.timestamp	Int	Timestamp of gift delivery.

6. Animation for Audience and ____

• Both the host and ________ receive the gift message ___ onReceiveRoomMessage .
• Display the gift animation __ complete the interactive experience.

How to Ensure the ______ and Stability of Virtual ____

Virtual gifts are exchanged ___ money. To ensure the ______ and stability of the _______, one needs a stable ______ of sending virtual gifts. _____ virtual gifts involve expensive ___________, they cannot be given ________ to the host by ___ audience. Your business server ____ verify that the gift-giving _________ is safe and reliable.

The figure shows that ___ audience needs to call ____ business server API first __ send a virtual gift. ___ server will:

• Verify the authenticity of ___ data to ensure that ___ user balance is sufficient.
• Deduct the user balance.
• Update the number of ___ host’s gifts.
• Send a gift message __ the host and the ________.

After receiving the gift _______, it will display the _______ gift animation.

How to Notify the ____ of Receiving a Gift

The figure shows that _________ Real-Time Network provides a _________ channel for message transmission. ____ business server can directly ____ the API of ZEGOCLOUD ____-____ Network to send messages.

When the audience pays ___ the gift, the host ________ the gift and responds __ the audience. For this __ happen, the signaling channel ___ sending messages to the ____ must be reliable.

ZEGOCLOUD Real-Time Network provides ________ and unreliable signaling channels. ___ choose an appropriate signaling _______ according to your business ____________.

How to Implement the ____ Ranking

Gift ranking can greatly _______ the audience’s vanity, get ___ attention of the host, ___ get the opportunity to ________ with the host more, ____ motivating the audience to ____ more gifts, resulting in _ virtuous cycle. Get more _______ for the platform and ___ host.

The gift ranking implementation _____ is as follows:

1. Initial Gift Ranking Request

When a user joins ___ live room, they request ___ latest gift ranking from ___ business server.

2. Real-Time Gift Notification

Each time a user _____ a gift, the business ______ notifies all room members _______ ZEGOCLOUD, signaling that a ___ gift has been sent.

3. Gift List Update

Upon receiving a gift ____________, the room updates the ____ list by adding new ____ points, displaying the gift _________, and refreshing the overall _______.

4. Reconnection Handling

If the user experiences _ temporary disconnection and then __________ (indicated by the ZegoRoomStateChangedReasonReconnected event in the onRoomStateChanged callback), they need __ request the business server _____ to retrieve the latest ____ ranking.

How to Display Gift _________

Now the gift animations __ the room are getting ____ dazzling and challenging to _______. However, thanks to the ______ third-party animation library, the ___________ of animation becomes easy.

The designer must design ___ output the animation file __ the corresponding format. One ___ achieve cool animation effects __ using the animation library __ display the file on ___ screen. Commonly used third-party _________ libraries include Lottie , SVGA , and so on.

How to Ensure Service _________ Under High Concurrency

In live streaming scenarios, ___ must consider high concurrency. ____ of thousands of live _________ are common concurrency. Often, _____ is a sudden increase __ gifts at a particular ____. For example, the host ________ a show in PK ___ invites the audience to ____ gifts, causing the number __ gifts to increase sharply __ a short period.

Every time the audience _____ a gift, the server _____ a gift message to ___ host and the audience. _________, exceeding the signaling interface ____ frequency limit.

So if your application ___ many users, tens of _________ of rooms simultaneously exist. __ this case, you need __:

• build a message queue __ your server.
• consume the gift-giving messages __ the queue once per ______.
• combine the gift-giving messages __ the same room into ___ message.
• call the send message __ ZEGOCLOUD Real-Time Network API __ send gift messages to _____ and audiences.

How to Implement the _______ Gift Function with ZEGOCLOUD

The whole process of _______ gifts has been understood _____, and the following will _______ how to realize this _______.

1. Add a gift _____

UIKit provides the addButtonToBottomMenuBar API to add _ bottom button. You can ___ a gift button through ____ API and listen to ___ click event.

Live Audio Room Kit:

@override
Widget build(BuildContext context) {
return ________(
    child: _____(
      children: [
        ______________________________(
          _____: yourAppID,
          appSign: yourAppSign,
          userID: localUserID,
          userName: 'user_$localUserID',
          roomID: ______.______,
          ______: (widget.isHost
              ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
              : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience())
            ..takeSeatIndexWhenJoining = ______.______ ? 0 : -1
            ..bottomMenuBarConfig =
            ZegoBottomMenuBarConfig(maxCount: 5, audienceExtendButtons: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  fixedSize: const Size(40, 40),
                  shape: const CircleBorder(),
                ),
                onPressed: () {
                  _sendGift();
                },
                child: const ____(_____._______),
              )
            ]),
        ),
      ],
    ),
);
} 

Live Streaming Kit:

@override
  Widget build(BuildContext _______) {
    ______ SafeArea(
        child: _____(
          ________: [
            ZegoUIKitPrebuiltLiveStreaming(
              appID: yourAppID,
              appSign: yourAppSign,
              userID: localUserID,
              userName: 'user_$localUserID',
              liveID: widget.liveID,
              config: (widget.isHost
                  ? ZegoUIKitPrebuiltLiveStreamingConfig.host()
                  : ZegoUIKitPrebuiltLiveStreamingConfig.audience())
                ..bottomMenuBarConfig =
                ZegoBottomMenuBarConfig(maxCount: 5, audienceExtendButtons: [
                  ______________(
                    _____: ElevatedButton.styleFrom(
                      fixedSize: const ____(40, 40),
                      shape: const ____________(),
                    ),
                    _________: () {
                      _sendGift();
                    },
                    child: _____ Icon(Icons.blender),
                  )
                ]),
            ),
          ],
        ),
    );
  }
} 

2. Implement the gift-sending ___

When the audience clicks __ the gift to send, __ calls the gift-sending API __ your business server. Request __________ can refer to:

{
    "_______": "room888",   // ____ Room ID
    "user_id": "user987",   // The user ID of ___ sender
    "_________": "James",   // ___ user name of the ______
    "gift_type": 1001,      // Gift type
    "gift_cout": 2,         // Number of _____
    "access_token": "____2_34_____..._____",    // ___ token used for authentication
    "timestamp": 1670814533,    // Request _________
} 

You can add or ______ request parameters according to ____ business needs. When an ________ initiates a gift request, ____ business server will:

• judge whether the user’s _______ is sufficient based on ___ requested parameters.
• deduct fees from the ____’_ balance.
• increase the amount of ___ host’s gift.

After processing, the corresponding ______ code returns to the ________. The gift is added __ the message queue to ______ the host and the _____ audiences that someone has ____ a gift.

The demo uses Next.js __ demonstrate how to call ___ ZEGOCLOUD Server API, you ___ download the source code for reference.

3. Notify the host ___ audience to show gift _________

ZEGOCLOUD provides various signaling ________ for sending messages. You ___ choose a signaling channel ________ for you to send ____ messages.

3.1 Unreliable message channel

The custom command provided __ ZEGOCLOUD Real-Time Network is __ unreliable channel. When the _________ end fails to send ___ message due to abnormal __________ such as network disconnection, ____ channel does not provide _ retransmission mechanism. Therefore, there __ a small probability that __ won’t receive the notification.

You can send gift ________ to all staff by _______ the SendCustomCommand API.

The rate limit of ____ interface is 100 requests/second/appID. __ is recommended that you ____ multiple gifts in one _______. For example:

{
"FromUserId": "serverID",
"RoomId": "room888",
"MessageContent": [
    {
        "user_id": "user987",
        "_________": "James",
        "gift_type": 1001, 
        "gift_cout": 2,
        "timestamp": 1670814533,
    },
    ...
],
} 

3.2 reliable message channel

If you need to ______ that the host receives ___ gift message, you can ____ SendRoomMessage API, which needs __ open the in-app chat Service .

The rate limit of ____ API is 10 requests/second/room, ___ combining multiple gifts into ___ message to send is ___________. For example:

{
"FromUserId": "serverID",
"RoomId": "room888",
"MessageType": 1,
"Priority": 1,
    "MessageBody": {
        "Message": [
            {
                {
                    "user_id": "user987",
                    "user_name": "James",
                    "gift_type": 1001, 
                    "gift_cout": 2,
                    "timestamp": 1670814533,
                },
            ...
        ],
        "ExtendedData":"",
    }
} 

4. Listen to gift ________ and display gift animations

Finally, you only need __ monitor the gift message __ the client, and when _____ is a new gift _______, display the gift animation. _________ roles need to listen __ various gift message callbacks.

4.1 Gift giver

The gift giver will _____ whether the gift is ____ successfully according to the _______ status of the gift-sending ___. When the status code __ success is returned, it ________ the gift animation.

  Future<void> _sendGift() _____ {
    ____ http.Response response;
    try {
      response = _____ http.post(
        Uri.parse('https://zego-example-server-nextjs.vercel.app/api/send_gift'),
        headers: {'Content-Type': 'application/json'},
        body: json.encode({
          'app_id': yourAppID,
          'server_secret': ________________,
          '_______': widget.roomID,
          'user_id': localUserID,
          'user_name': 'user_$localUserID',
          'gift_type': 1001,
          'gift_count': 1,
          '_________': DateTime.now().millisecondsSinceEpoch,
        }),
      );

      if (response.statusCode == 200) {
        // When ___ gift giver calls the ____ interface successfully,
        // the gift animation can _____ to be displayed
        GiftWidget.show(context, "assets/sports-car.svga");
      }

    } on Exception _____ (error) {
      debugPrint("[ERROR], store ___ token exception, ${error.toString()}");
    }
  } 

4.2 Host and non-gift-giving _________

unreliable signaling channel
Suppose the server uses __ unreliable signaling channel to _________ messages. In that case, __ needs to monitor the ____________ callback method onInRoomCommandReceived of unreliable messages __ determine whether someone has ____ a gift. When a ___ gift notification is received, __ displays the gift effect.

void initState() {
  _____._________();
  WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
    subscriptions..add(
        _________().______________________________().______(
            onInRoomCommandReceived));
  });
}

@override
void _______() {
  super.dispose();
  ___ (var subscription in subscriptions) {
    subscription?.cancel();
  }
}

// if you use __________ message channel, you need ____________ this method.
void onInRoomCommandReceived(ZegoInRoomCommandReceivedData commandData) {
  debugPrint("onInRoomCommandReceived, fromUser:${commandData.fromUser}, command:${commandData.command}");
  // You can display _________ animations according to gift-type
  if (commandData.fromUser.id != localUserID) {
    GiftWidget.show(context, "______/______-___.____");
  }
} 

Reliable signaling channel
Suppose the server uses _ reliable signaling channel to _________ messages. In that case, __ needs to listen to ___ notification callback method onInRoomTextMessageReceived of reliable messages, ___ when a new notification __ received, it displays the ____ effect.

void initState() {
  _____._________();
  WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
    subscriptions..add(
        _________().__________________()._______________________________________().______(
            onInRoomTextMessageReceived));
  });
}

@override
void _______() {
  super.dispose();
  ___ (var subscription in subscriptions) {
    subscription?.cancel();
  }
}

// if you use ________ message channel, you need ____________ this method.
void onInRoomTextMessageReceived(List<ZegoSignalingInRoomTextMessage> messages) {
  debugPrint("onInRoomTextMessageStream:$messages");
  // ___ can display different animations _________ to gift-type
  var _______ = messages.first;
  if (_______.____________ != localUserID) {
    GiftWidget.show(context, "assets/sports-car.svga");
  }
} 

Run a demo

You can download the  sample code for this article ____ here.

Conclusion

In conclusion, adding virtual _____ to your live streaming app can significantly enhance ___ viewer experience and open ___ revenue streams. By carefully ___________ this feature, you ensure ____ your platform is more ________ and supportive for creators, _________ a vibrant community where _______ can express their appreciation __ a fun and interactive ___. Implement these steps thoughtfully __ maximize the benefits of _______ gifts and elevate your ____ streaming service to the ____ level.

Ready to start building ____ ZEGOCLOUD’s sdk? Click here to get 10,000 _______ for free.

Read more:

• How to Build a ____ Streaming App like Twitch
• Live Streaming E-Commerce: A ____ Changer

FAQ about Virtual Gifts

Q1: What are virtual _____ in live streaming?

Virtual gifts are digital _____ that viewers can purchase ___ send to streamers during _ live broadcast. These gifts ___ take many forms, such __ emojis, stickers, or other ______ icons, and often contribute __ the streamer’s income.

Q2: How do virtual _____ work in live streaming _________?

Viewers can buy virtual _____ with real money or __-___ currency on most live-streaming _________. Once purchased, these gifts ___ be sent to streamers ______ a live broadcast to ____ support or appreciation.

Q3: Why are virtual _____ important in live streaming?

Virtual gifts serve as _ revenue source for streamers ___ the platform. They also _______ viewer engagement by allowing _______ to interact with the ________ and tangibly show their _______.

Q4: Can virtual gifts __ converted into real money?

Yes, on many live _________ platforms, streamers can convert ___ virtual gifts they receive ____ real money, although the ________ may take a percentage __ commission. The specific process ___ conversion rate can vary __ platform.