Sign up! We’ll send you a link to your component, set up your Onymos Cloud Account, and generate your Onymos license credentials. In the meantime, you can get familiar with our API Documentation and developer resources, or join a whole community of developers building apps with Onymos on Reddit!

Add your components to a folder in your app’s root (e.g., onymos_components).

Add the Onymos Initialize component to your environment.

$ ionic cordova plugin add onymos_components/onymos-component-initialize

Then we can add the Onymos Chat component.

$ ionic cordova plugin add onymos_components/onymos-component-chat

Then update the widget inside your config.xml with the Onymos Widget ID you receive after you create an Onymos Cloud Account.

Want to chat? We’ve got you covered. Use the Onymos Chat component and we’ll handle sending and receiving messages (with encryption), manage the data, and do all the maintenance. You just have to make it look nice.

Before we use Chat, let’s make sure we have everything we need to configure your onymosConnectObject. The onymosConnectObject requires the appropriate Onymos license credentials: your Customer ID (also called an Onymos ID) and your Onymos Auth Token. You’ll need these credentials to use this (or any) component in your app.

Next, let’s go inside your Ionic app’s app.component.ts file and initialize Chat.

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
    
    declare var OnymosInitialize: any;
    declare var OnymosChat: any;
    
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss'],
    })
    export class AppComponent {
      constructor(
        private platform: Platform
      ) {
            this.initializeApp();
        }
      
     initializeApp(){
        this.platform.ready().then(() => {
    
          const OnymosConnectObject={
            customerId : 'Your customerId goes here', 
            onymosAuthToken : 'Your onymosAuthToken goes here',  
            envType: 'PRD'
            }
    
          OnymosInitialize.initialize(
            OnymosConnectObject,
          
            function onymosInitializeSuccess(status){
              console.log("Onymos initialized Successfully.", status)
            },
    
            function onymosInitializeFailure(error){
              console.log("Onymos failed to initialize.", error)
            })
        })
      }
    }
    

Great! If we configured your onymosConnectObject correctly, onymosInitializeSuccess() should print its message to the console. Now we’re ready to use Chat.

Let’s start by implementing the listenForList() method in the app.component.ts file. It will retrieve all of a user’s chats and “listen” for when they create or join a new one, then retrieve it too.

listenForList() {
  OnymosChat.listenForList(
    userId,
    function getListSuccess (chatSummary) {
      chatSummary = {
                      messageId: 'A unique Chat Id.',
                      sender: 'The sender object.',
                      recipients: 'An array of recipient objects.',
                      messageContent: 'The last message content.',
                      messageCreated: 'The last message creation time.',
                      options: 'The last message optional data.'
                     }
     },

     function getListFailure (error) {
       console.log(error)
     },

     options)
}

Our getListSuccess() callback function will return a chatSummary object for each of a user’s chats.

UserId is the id of the logged-in user. If we’re also using the Onymos Access component, we can use @AUTHID@ as that value, which automatically captures the id for us. Inside of our options object, you can choose to set the listenForChanges property to true or false. When it’s true, getListSuccess() will also retrieve chats when a new message is sent.

We have all of a user’s chats… now we need all of the individual messages! We can add the next function to the app.component.ts file.

listenForMessages() {
  OnymosChat.listenForMessages(
    senderObj,
    arrayOfRecipientsObjects,

    function getMessageSuccess(messageObj) {
      messageObj = {
                      sender: 'The sender object.',
                      recipients: 'An array of recipient objects.',
                      messageContent: 'The message content.',
                      messageCreated: 'The message creation time.',
                      options: 'The message optional data.'
                    }
     },

     function getMessageFailure(error) {
       console.log(error)
     },

     options)
}

The listenForMessages() method works similarly to listenForList(), and the getMessageSuccess() callback will return a messageObj for each message in a chat.

Your senderObj an object with logged-in user’s userId and userName.

{
  userId: @AUTHID@,
  userName: 'example'
}

While your arrayOfRecipientsObjects is an array of similar objects, identifying what users received the chat messages.

[
  {
  userId: '12-678-234CD',
  userName: 'example1'
  },
  {
  userId: '13-456-879AB',
  userName: 'example2'
  }
]

You can also configure the numberOfRecords property in the options object to define the number of messages returned.

{
  numberOfRecords: 50,
}

You’re just getting started! Your users have to be able to send messages too. Add the sendMessage() method to your app next.

How do I squash this bug? Is Ionic supposed to do that? Why is this iOS build failing?

Let’s figure it out—join the Onymos community on Reddit! More of a loner? You can email us directly at customersuccess@onymos.com.