Onymos Raises $12M Series A: Learn why

onymos-logo
chat icon

Quickstart Guide: Chat Component

Chat Component

Select a framework to get started.

Get started

Using Ionic or Cordova? Get the Chat component working in your app in four easy steps.

  1. Download the component
  2. Add it to your environment
  3. Using Chat
  4. Troubleshoot

1. Download the Onymos Chat component

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!

2. Add it to your environment

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.

3. Using Chat

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. To generate your Onymos license credentials, create an Onymos Cloud Account.

NOTE: Your Onymos Auth Token will work with any number of apps and components. Onymos has a developer—and project—friendly pricing model. You can use any or all of our components in an app at no cost until it is installed on 100 or more devices. This is ideal for iterating your MVP (see detailed pricing here).

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.

4. Troubleshooting

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.

Dig into our API documentation

Developer support

Got questions? Our support team is here to help.

Think differently about app development

Download our free white paper today to learn how Onymos Features can maximize the value of your developer resources — and shave days or weeks off your development timeline.

Get your free white paper