Pepper Talk is a messaging platform built primarily for mobiles. It provides native interfaces for iOS, Android and Web applications via SDK's to enable peer to peer chat for apps. Being mobile ready it has built in support for notifications, delivery indicators, media sharing and others out of the box. The SDK's expose a simple interface to get chat up and running with minimal effort from you the developer. We provide a full fledged chat interface which fits seamlessly into your apps, with customization options. SDK also exposes interfaces to send custom data between users. Callbacks are provided to have tight integration with your app, for incoming messages and unread message counts.
Pepper Talk Web SDK uses jQuery for some operations and to trigger [events] when some activity happens. It opens up the chat window in an IFRAME and uses cross document messaging via the postMessage call. It also uses WebSockets to communicate with the chat server. Please ensure that the browser supports these required features.
To include the SDK add the following line anytime after the jQuery library has been initialized. This adds the PepperTalk object to the window object.
<script src="https://hostedpepper.getpeppertalk.com/websdk/js/pepperkitstub.min.js"></script>To get started sign up for Pepper Talk at the Pepper Talk Console. You can create a new app for yourself matching the app you are developing. Create or use an existing client id and secret pair for use with the platform of your choice. The JS SDK for web embeds the id and secret in a server component to generate an SSO to the Pepper Talk backend. Detailed explanation of how to generate the SSO token is described later. The JS SDK has an onAuthRequired endpoint which should be provided. The implementation is expected to generate the SSO token and pass back the credentials along with the user id who is logging into the chat.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
onAuthRequired = function(callback) {
// fetch authData via an XHR call
// authData = {
// grant_type: 'sso'
// client_id: pepperKitClientId
// timestamp: timestamp
// user_id: <<userid>>
// sso_token: sso_token
// display_name: <<users full name>>
// profile_photo: <<users profile picture>>
// }
return callback(null, authData);
}
We recommend that the SSO token be generated on the server side. Your implementation should ideally fetch the auth credentials from an XHR call for the signed in user of the app. The SSO token is generated as follows
1
shasum(pepperKitClientId + ":" + pepperKitSecret + ":" + timestamp + ":" + userid)
The user_id that you pass in the authData will be the identifier for the user on Pepper Talk. You will send and receive messages from this id. Use an identifier which you can easily map to the user on your app. It can be a guid, email, id or whatever you choose. Remember that it should be something that your app can easily discover. For example on a classifieds listing app the userid of the person posting a listing is ideal since all users can easily discover this from the listing and users can use this to start a chat with the person.
Here's how the sample app does the PepperTalk initialization.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
app.run(($rootScope, $state, $stateParams, loginService) ->
$rootScope.$on('login_success', ->
PepperTalk.onAuthRequired = (callback) ->
loginService.getPepperTalkSSO(callback)
return
PepperTalk.init()
$(PepperTalk).on('incoming_message', (event, data) ->
$rootScope.$evalAsync(->
$rootScope.$broadcast('incoming_message', data)
)
return
)
return
)
)
Pepper Talk exposes a topic for having multiple threads of conversations with the same user. A topic id can be any string that you choose. For example a listing app could use the id of the listing as the topic id. This would help the app to organize the chats among the same set of participants with a logical entity in the app. A description is also supported to give a descriptive value for the topic id.
Here's how a chat is initated in the sample app
1
2
3
@chat = (user) ->
return PepperTalk.showParticipantsForTopic('NoTopic', 'No Topic') if loginService.userName is user
return PepperTalk.chatWithParticipant(user, 'NoTopic', 'No Topic')
We use two of the Pepper Talk calls here. If the current logged in user is the same as the one with whom the users is trying to iniate a chat we bring up the list of people with whom the user is already having a chat session. Else we start off a chat session with the passed in user with a dummy topic id and topic title.
Initializes the SDK. Please ensure that you have the onAuthRequired method provided. During the initialization cycle authorization would be requested, so ideally call the init only after you have a logged in user or trigger the login during the auth call.
Opens up the chat window with the requested participant. Parameters
Opens up the lists of participants for a particular topic. Parameters
Opens up the list of topics for a particular participant. Parameters
Sends any data, with some restrictions, to the requested participant, under the topic. The data should be JSON serializable, and be under 2Kb in size after serialization. Parameters
Returns the current message count statistics. Parameters
{
count: # total number of messages
unread: # total number of unread messages
}Returns a summary of the messages grouped either by participants or topics. Parameters
callback - required (function(err, object))the callback function to be invoked when the data is fetched. Its a standard 2 arg function and the object is of the form
{
user_id : { # keyed on user_id or group_id
topics : {
topic_id : { # keyed on topic_id
count : # total messages in this topic for this user
unread : # total unread messages within those messages
last_message_timestamp: # unix timestamp in millis for the last message in them
topic_title : # description of the topic
topic_id : # id of the topic
}
}
user_name : # user name
user_id : # id of the user
}
}{
topic_id : { # keyed on topic_id
users : {
user_id : { # keyed on user_id or group_id
count : # total messages in this topic for this user
unread : # total unread messages within those messages
last_message_timestamp: # unix timestamp in millis for the last message in them
user_name : # user name
user_id : # id of the user
}
}
topic_title : # description of the topic
topic_id : # id of the topic
}
}Returns the unread count in a particular topic. Parameters
{
count: # count of unread messages
}Returns the unread count for a particular participant. Parameters
{
count: # count of unread messages
}Update the profile information for the currently logged in user. Parameters
Create a new group. Parameters
Create a new public group. Parameters same as createGroup
Create a new open group. Parameters same as createGroup
Update the profile of a group. Any member of the group can update the group profile. Parameters
Add users to a group. This can be called only by the admin of the group. Parameters
Remove users from a group. This can be called only by the admin of the group, or by a member of the group to remove self. Parameters
Remove a group. This can be called only by the admin of the group. Parameters
This function is called during initial connection or a reconnect in case of a network loss. Please invoke the callback function with the credentials as described
{
grant_type: 'sso'
client_id: # your client id
timestamp: # unix timestamp in millis
user_id: # user id for the user logging in
sso_token: # sso token as described previously
display_name: # Full name for the user
profile_photo: # Profile photo for the user
}The following jQuery events are triggered on the PepperTalk object
Triggered when a new chat message comes in.
1
2
3
4
5
6
7
8
metadata: {
participant: participant
from: from
to: to
topic_id: topic_id
topic_title: topic_title
unread: count
}
Triggered when a new custom data message comes in.
1
2
3
4
5
6
7
8
9
10
metadata: {
participant: participant
uuid: uuid
timestamp: timestamp
from: from
to: to
topic_id: topic_id
topic_title: topic_title
},
data: data
Triggered when a click on the topic id is detected. Treat this as a request to display the topic details.
1
topic_id
Triggered when a click on the users profile pic on name is detected. Treat this as a request to display the user profile.
1
user_id