Creating your First App

This guide walk you through how to build a new JavaScript app that will enable in-app user-to-user chat between platforms.

Create a new App

  1. Go to Magnet Studio.
  2. Click the + (add) icon in the navigation bar sandbox_new_app
  3. Enter a name for your app. Click Save to create your new app.Home-new
  4. In your index.html file, add a script tag reference to the Magnet Max JavaScript SDK.
    <script type="text/javascript" src=""></script>
  5. Initialize the SDK by providing the OAuth Client Id and Oauth Secret from the Settings page in the Max.init function.

    Max.init({ clientId: '<your client id>', clientSecret: '<your client secret>' });

  6. Make sure the SDK is initialized before adding any application logic:

    // On Max initialized Max.onReady(function() { // your application logic });

  7. Register yourself as a Magnet Message User.

    var user = { userName: 'jane.doe', firstName: 'Jane', lastName: 'Doe', password: 'magnet' }; Max.User.register(user).success(function(newUser) { // registration completed }).error(function(err) { // registration err console.log(JSON.stringigy(err)); });

  8. Login with the user created in the previous step.

    var username = 'jane.doe'; var password = 'magnet'; Max.User.login(username, password).success(function() { // start listening for messages Max.start(); }).error(function(err) { // login error });

  9. Get the current user after logging in with the code below.

    //getCurrentUser() will return null if not currently logged in var user = Max.getCurrentUser();

  10. Get Users. To get a User by searching for their username, use the code below.

    var usernames = ['jack.doe', 'jane.doe']; Max.User.getUsersByUserNames(usernames).success(function(users) { // do something with users }).error(function(err) { // handle error });

  11. Find Users. For example, to find all users whose display-name starts with a J, use the code below.

    var query = {userName: 'J*'}; var limit = 10; var offset = 0;, limit, offset).success(function(users) { // do something with users }).error(function(err) { // handle error });

  12. Create a chat channel.

    Max.Channel.create({ name: 'myNewPrivateChannel', summary: 'my new private channel', isPublic: false, publishPermission: 'subscribers' }).success(function(newChannel) { // do something with new channel }).error(function(err) { // handle error });
    NOTE: In most cases the chat channel should be private. Only the channel owner can invite people into the chat.

  13. Send the message.

    var msg = new Max.Message({ myCustomKey: 'message to channel' }); myChannel.publish(msg).success(function() { // message has been published! }).error(function(err) { // handle error });

  14. Add a listener to receive the message and chat invitation.

    var listener = new Max.EventListener('myListener', { message: function(receivedMessage) { // message has been received alert('received message: ' + receivedMessage.messageContent); }, invite: function(myInvite) { // invitation has been received }, inviteResponse: function(inviteResponse) { // invitation response has been received } }); Max.registerListener(listener); //be sure to make the corresponding call to Max.unregisterListener('myListener') to prevent leaking the listener

  15. Invite more users into the chat using the same invitation process used in Private Discussion Group.

  16. Get the chat history for the last 24 hours.

    var startDate = new Date(); startDate = startDate.setDate(startDate.getDate() - 1); var endDate = new Date(); var limit = 10; var offset = 0; var ascending = true; myChannel.getMessages(startDate, endDate, limit, offset, ascending).success(function(messages) { // do something with messages }).error(function(err) { // handle error });

  17. Get all chat recipients.

    myChannel.getAllSubscribers().success(function(users) { // do something with users }).error(function(err) { // handle error });

Next Steps

See how to send Rich Message in your app.