Reactions

Use Reactions based API, if you need your content to be reacted by your application users based on your custom reactions. For example,

  1. User reaction on a video moment for a video stream being played
  2. User reaction on blog post comments
  3. User reaction on chat room messages

Basic Reaction workflow

A basic reaction workflow involves:

  1. Creating a reaction pack through producer suite.
  2. Creating reaction space using reaction pack Ids along with unique identifier of your content entity (termed as target group Id) which forms a collection of items, for example:
    a. In a video application, target group Id could be a "Video Id" which has a collection of video moments.
    b. In a blog post application, target group Id could be a "Blog post Id" which has a collection of blog post comments.
    c. In a chat application, target group Id could be a "Chat room Id" which has a collection of chat messages
  3. Add or remove reactions on a given item using:
    a. Item unique identifier (termed as target Id)
    b. Reaction space id
    c. Reaction Id of reaction icon which is part of reaction pack created in step 1 where the id of this reaction pack was also used to create a reaction space.

📘

API introduced since:

Web SDK: 2.29.0

Android SDK: 2.54

iOS SDK: 2.51

Components of Reaction based API

  1. Reaction Pack API
  2. Reaction Space API
  3. User Reaction API

1. Reaction Pack API

Reaction pack resource lets you create and manage your custom reaction icons through producer suite. Once reaction pack is created, you may get list of reaction packs and reaction pack details.

List of Reaction Pack

This could be used to get list of reaction pack created through producer suite.

LiveLike.getReactionPacks().then(({results}) => console.log(results))
engagementSDK.reaction().getReactionPacks(LiveLikePagination.FIRST,object : LiveLikeCallback<List<ReactionPack>>(){
	override fun onResponse(result: List<ReactionPack>?, error: String?) {
    
  }
})
sdk.reaction.getReactionPacks(page: .first) { result in
	switch result {
    case .success(let reactionPacks):
    	//Success Block
    case .failure(let error):
    	//Failure Block
	}
}

Reaction Pack Details

This could be used to get reaction pack details using reaction pack Id.

LiveLike.getReactionPackDetail({
    reactionPackId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
}).then(reactionPack => console.log(reactionPack))
engagementSDK.reaction().getReactionPackDetails( <reaction-pack-id>,object: LiveLikeCallback<ReactionPack>(){
   override fun onResponse(result: ReactionPack?, error: String?) { 	   
   }
)
sdk.reaction.getReactionPackInfo(reactionPackID: packID) { result in
	switch result {
		case .success(let reactionPack):
    	//Success block
    case .failure(let error):
    	//Failure Block
	}
}

2. Reaction Space API

Reaction space is a resource which lets you add or remove reactions for a given target. It maps your content unique identifier i.e target group Id with reaction pack Id and also helps in achieving a complete isolation of user reactions across different content. This also gives you an opportunity to get all user reactions based on target group Id without needing the reference of reaction space Id.

Note: Reaction Space Id would still always be required to add or remove user reactions

Let try to understand this with an example:

Given a reaction use case for a blog post application, where a user could create a blog post, another users could comment on blog posts as well as react on those comments. For this you can create a corresponding Reaction space for each blog post where the blog post Id would be your target group Id and individual comment Id would be your target Id.

Create a Reaction Space

For creating a reaction space, you would need reaction pack Ids where each pack id is a collection of reactions to be used by your users and a target group Id which is a unique identifier of your content referencing collection of items.

LiveLike.createReactionSpace({
    targetGroupId: "target-group-1",
    reactionPackIds: ["aa7e03fc-01f0-4a98-a2e0-3fed689632d7", "0fddc166-b8c3-4ce9-990e-848bde12188b"]
}).then(reactionSpace => console.log(reactionSpace))
engagementSDK.reaction().createReactionSpace(<name>,<target-group-id>,<list of reaction-pack-ids>,object: LiveLikeCallback<ReactionSpace>(){
   override fun onResponse(result: ReactionSpace?, error: String?) { 	   
   }
)
sdk.reaction.createReactionSpace(name: reactionSpaceName, targetGroupID: targetGroupID, reactionPackIDs: [reactionPackIDs]) { result in
	switch result {
		case .success(let reactionSpace):
    	//Success block
    case .failure(let error):
    	//Failure Block
	}
}

Update a Reaction Space

You can update name and reaction pack Ids of an existing reaction space

Note: To update a target group Id, simply create a new reaction space

LiveLike.updateReactionSpace({
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
    reactionPackIds: ["aa7e03fc-01f0-4a98-a2e0-3fed689632d7", "0fddc166-b8c3-4ce9-990e-848bde12188b"]
}).then(reactionSpace => console.log(reactionSpace))
engagementSDK.reaction().createReactionSpace(<reaction-space-id>,<target-group-id>,<list of reaction-pack-ids>,object: LiveLikeCallback<ReactionSpace>(){
   override fun onResponse(result: ReactionSpace?, error: String?) { 	   
   }
)
sdk.reaction.updateReactionSpace(reactionSpaceID: spaceID, reactionPackIDs: [reactionPackID]) { result in
	switch result {
		case .success(let reactionPackIDList):
    	//Success block
    case .failure(let error):
    	//Failure Block
  }
}

Delete a Reaction Space

LiveLike.deleteReactionSpace({
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
})
engagementSDK.reaction().deleteReactionSpace(<reaction-space-id>, object: LiveLikeCallback<Unit>(){
   override fun onResponse(result: Unit?, error: String?) { 	   
   }
)
sdk.reaction.deleteReactionSpace(reactionSpaceID: spaceID) { result in
	switch result {
		case .success(let success):
			//Success block
    case .failure(let error):
    	//Failure Block
	}
}

List of Reaction Space

This could be used to get list of reaction spaces in an application

LiveLike.getReactionSpaces().then(({results}) => console.log(results))
engagementSDK.reaction().getReactionSpaces(<reaction-space-id>,<target-group-id>,LiveLikePagination.FIRST,object: LiveLikeCallback<List<ReactionSpace>>(){
   override fun onResponse(result: List<ReactionSpace>?, error: String?) { 	   
   }
)
sdk.reaction.getReactionSpaces(reactionSpaceID: spaceID, targetGroupID: nil, page: .first, completion: { result in
	switch result {
		case .success(let reactionSpaces):
    	//Success block
    case .failure(let error):
    	//Failure Block
  }
})

Get Reaction Space Detail using reaction space Id

LiveLike.getReactionSpaceDetail({
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
}).then(reactionSpace => console.log(reactionSpace))
engagementSDK.reaction().getReactionSpaceDetails(<reaction-space-id>,object: LiveLikeCallback<ReactionSpace>(){
   override fun onResponse(result: ReactionSpace?, error: String?) { 	   
   }
)
sdk.reaction.getReactionSpaceInfo(reactionSpaceID: spaceID) { result in
	switch result {
		case .success(let reactionSpace):
    	//Success block
    case .failure(let error):
    	//Failure Block
  }
}

Get Reaction Space Detail using target group Id

This could be preferred way which helps you avoid storing reaction space id for a given target group Id in your system.

LiveLike.getReactionSpaceDetail({
    targetGroupId: "target-group-1",
}).then(reactionSpace => console.log(reactionSpace))
engagementSDK.reaction().getReactionSpaces(<reaction-space-id>,<target-group-id>,LiveLikePagination.FIRST,object: LiveLikeCallback<List<ReactionSpace>>(){
   override fun onResponse(result: List<ReactionSpace>?, error: String?) { 	   
   }
)
sdk.reaction.getReactionSpaces(reactionSpaceID: nil, targetGroupID: targetGroupID, page: .first, completion: { result in
	switch result {
		case .success(let reactionSpaces):
    	//Success block
    case .failure(let error):
    	//Failure Block
	}
})

Real time Reaction Space events

For real time updates of user reactions, use reaction space events

Add User Reaction event

function onAddUserReaction(userReaction){
    console.log(userReaction);
}
LiveLike.addReactionSpaceEventListener({
    event: LiveLike.ReactionSpaceEvent.ADD_REACTION,
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7"
},
onAddUserReaction
)

// To remove a added listener function
LiveLike.removeReactionSpaceEventListener({
    event: LiveLike.ReactionSpaceEvent.ADD_REACTION,
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7"
},
onAddUserReaction // earlier added listener function
)
reactionSession.subscribeToUserReactionDelegate(<key>,object : UserReactionDelegate {
                    override fun onReactionAdded(reaction: UserReaction) {
                        
                    }

                    override fun onReactionRemoved(reaction: UserReaction) {
                       
                    }
                })

Remove User Reaction event

function onRemoveUserReaction(userReaction){
    console.log(userReaction);
}
LiveLike.addReactionSpaceEventListener({
    event: LiveLike.ReactionSpaceEvent.REMOVE_REACTION,
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7"
},
onRemoveUserReaction
)

// To remove a added listener function
LiveLike.removeReactionSpaceEventListener({
    event: LiveLike.ReactionSpaceEvent.REMOVE_REACTION,
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7"
},
onRemoveUserReaction // earlier added listener function
)
reactionSession.subscribeToUserReactionDelegate(<key>,object : UserReactionDelegate {
                    override fun onReactionAdded(reaction: UserReaction) {
                        
                    }

                    override fun onReactionRemoved(reaction: UserReaction) {
                       
                    }
                })

Reaction Space Update event

This event is triggered whenever a reaction space is updated with its name or reaction pack ids. You may need to use this event to update your reaction list based on updated reaction pack Ids.

function onUpdateReactionSpace(eventDetail){
    console.log(eventDetail);
}
LiveLike.addReactionSpaceEventListener({
    event: LiveLike.ReactionSpaceEvent.UPDATE_REACTION_SPACE,
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7"
},
onUpdateReactionSpace
)

// To remove a added listener function
LiveLike.removeReactionSpaceEventListener({
    event: LiveLike.ReactionSpaceEvent.UPDATE_REACTION_SPACE,
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7"
},
onUpdateReactionSpace // earlier added listener function
)
reactionSession.subscribeToReactionSpaceDelegate(<key>, object: ReactionSpaceDelegate {
		ovveride fun onReactionSpaceUpdated(reactionSpace: ReactionSpace){
    
    }
})

📘

Real Time Events (iOS)

For iOS SDK, please conform to the respective Delegates

Real Time User Reaction events

For real time updates of user reactions, please conform to ReactionSessionDelegate

Realtime notifications for addition and removal of user reactions.

func reactionSession(_ reactionSession: ReactionSession, didAddReaction reaction: UserReaction)

func reactionSession(_ reactionSession: ReactionSession, didRemoveReaction reaction: UserReaction)

Real Time Reaction Space events

For real time updates of reactions, please conform to ReactionClientDelegate

This event is triggered whenever a reaction space is updated with its name or reaction pack ids. You may need to use this event to update your reaction list based on updated reaction pack Ids.

func reactionClient(_ reactionClient: ReactionClient, didUpdateReactionSpace newReactionSpace: ReactionSpace)

3. User Reaction API

📘

Note:

Reaction Session is an interface to interact with the reactions space exposed by Android and IOS SDK.

Create Reaction Session

val reactionSession = engagementSDK.createReactionSession(<reaction-space-id>,<target-group-id>,errorDelegate)
reactionSession = self.sdk.reaction.createReactionSession(reactionSpace: reactionSpace)

Add User Reaction

This API requires:

  1. reaction space Id
  2. reaction Id of a reaction from a reaction pack
  3. target Id which is unique identifier of the subjected entity being reacted upon
LiveLike.addUserReaction({
    targetId: "target-1",
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
    reactionId: "0fddc166-b8c3-4ce9-990e-848bde12188b"
}).then(reaction => console.log(reaction))
reactionSession.addUserReaction(<target-id>,<reaction-id>,<custom-data>,object:LiveLikeCallback<UserReaction>(){
	override fun onResponse(result: UserReaction?, error: String?) {
    
  }
})
reactionSession.addUserReaction(targetID: targetID, reactionID: reactionID, customData: nil) { result in
	switch result {
		case .success(let userReaction):
    	//Success Block
		case .failure(let error):
    	// Failure Block
	}
}

List of User Reaction using target Id

LiveLike.getUserReactions({
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
    targetId: "0fddc166-b8c3-4ce9-990e-848bde12188b"
}).then(paginatedReactions => console.log(paginatedReactions))
reactionSession.getUserReactions(LiveLikePagination.FIRST,<target-id>,object:LiveLikeCallback<List<UserReaction>>(){
	override fun onResponse(result: List<UserReaction>?, error: String?) {
    
  }
})
reactionSession.getUserReactions(
  page: .first, 
  reactionSpaceID: spaceID, 
  options: GetUserReactionsRequestOptions(reactionID: nil, 
                                          targetID: targetID, 
                                          reactionByID: nil)
) { result in
   switch result {
		case .success(let userReaction):
    	//Success Block
		case .failure(let error):
    	// Failure Block
	}
}

List of User Reaction using reaction Id

LiveLike.getUserReactions({
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
    reactionId: "2gddc166-b8c3-4ce9-990e-52352fskj29"
}).then(paginatedReactions => console.log(paginatedReactions))
reactionSession.getUserReactions(LiveLikePagination.FIRST,<reaction-id>,object:LiveLikeCallback<List<UserReaction>>(){
	override fun onResponse(result: List<UserReaction>?, error: String?) {
    
  }
})
reactionSession.getUserReactions(
  page: .first, 
  reactionSpaceID: spaceID, 
  options: GetUserReactionsRequestOptions(reactionID: reactionID, 
                                          targetID: nil, 
                                          reactionByID: nil)
) { result in
   switch result {
		case .success(let userReaction):
    	//Success Block
		case .failure(let error):
    	// Failure Block
	}
}

List of target reaction with count

This API could be used in case you just need reaction with total count for a given target Id.
You can get total reaction count for a list of target Id where currently total target Ids is limited to 20 for a single API request.

LiveLike.getUserReactionsCount({
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
    targetIds: ["0fddc166-b8c3-4ce9-990e-848bde12188b"],
}).then(reaction => console.log(reaction))
reactionSession.getUserReactionsCount(<list-of-target-ids>,LiveLikePagination.FIRST,object:LiveLikeCallback<List<TargetUserReactionCount>>(){
	override fun onResponse(result: List<TargetUserReactionCount>?, error: String?) {
    
  }
})
reactionSession.getUserReactionsCount(
  reactionSpaceID: spaceID, 
  targetID: [targetID], 
  page: .first
) { result in
	switch result {
		case .success(let reactionCount):
    	//Success Block
    case .failure(let error):
    	//Failure Block
	}
}

Remove User Reaction

Remove a user reaction using user reaction Id which is Id of the user reaction object created when a user adds a reaction.

LiveLike.removeUserReaction({
    reactionSpaceId: "aa7e03fc-01f0-4a98-a2e0-3fed689632d7",
    userReactionId: "0fddc166-b8c3-4ce9-990e-848bde12188b"
})
reactionSession.removeUserReaction(<user-reaction-id>,object:LiveLikeCallback<Unit>(){
	override fun onResponse(result: Unit?, error: String?) {
    
  }
})
reactionSession.removeUserReaction(userReactionID: reactionID) { result in
	switch result {
		case .success:
    	//Success Block
		case .failure(let error):
			//Failure block
	}
}