5 Flares 5 Flares ×
The following guest post is from Ayo Omojola and the team at Hipmob. Learn more about how to use their Appcelerator module (now available for iOS as well as Android) and provide live support or peer-to-peer chat for your users directly in your app.

We launched Hipmob a year ago to solve our own problems. At the time, we were running Wanderplayer and Flypad, two mobile gaming apps that turned your iPhone into a game controller for browser/desktop games, played over wifi.

After building Hipmob we talked to some of our developer friends who wanted something similar, so we decided to turn it into a full fledged service. About 3 months in, we released a Titanium module that brought Hipmob to Appcelerator developers building Android app. Since releasing our Android Titanium module, the single most requested feature was one for iOS. Last week (almost a full year after launching) we’ve released one.

It’s super easy to get started – if you want to see the Android module in production, look up CheckInTonight’s Android app – it’s been in the Google Play store for a few weeks and it’s one of our favorites.

Simply put, Hipmob makes it really easy to provide customer support to your mobile users. If you’re running an ecommerce business via mobile (ie your customers buy physical items or services) or you’re running services software (Saas or Productivity apps), you’ll need something like Hipmob to retain your customers and make them more loyal.

To get you started, here are links to the appropriate references

 

For folks who want to jump ahead to the code, you can get the source for a fully functional Titanium app with live chat integrated from Github at https://github.com/Hipmob/hipmob-titanium-test. For everyone else, we walk through the steps to getting live chat into your app below.

Getting started is easy: you’ll need to download the Hipmob module from the Appcelerator market place.

Once that’s downloaded you’ll have to add the module to your project: you can add it directly to your project directory or add it to your Library folder.

Once it is added to your project, edit your tiapp.xml file to activate the module for the 2 supported platforms (iOS and Android):

In the page you want to show the Hipmob chat view, you can then create the module. In this example, we perform a conditional check and make sure we’re only creating the module if we are on a supported platform (iOS or Android).

Once the module is created, we can call the createHipmobChatView function. We’ll need to pass it a Hipmob app id (application identifier): this is obtained from Hipmob’s management console at https://manage.hipmob.com/, and you can sign up for a free account to get your app id. The app id allows you to easily differentiate between multiple apps: if you have 10 apps you can create 10 different app ids and then you’ll be able to easily tell which app a chat comes from.

Once you add the view to the page, you’ll have a chat view. The chat view will automatically initiate a connection the Hipmob communication network, and then any messages sent by the user will be directed to your sales or support operators. Replies will be sent back to the user. No additional code required.

You’ll notice from the code above that we can set the position on the chat view: this lets it fit into any existing page layout we’d like. In our example, we’ve chosen to fill the entire page with the chat view: you can adjust the size however you’d like.

Once the chat view is shown, there are a number of events that are generated by the chat view and can be listened to by app. These include the hipmob.EVENT_CONNECTED and hipmob.EVENT_DISCONNECTED events (which are fired by the chat view when the chat is successfully connected to or when the chat view disconnects from the Hipmob communication network), the hipmob.EVENT_OPERATOR_ONLINE and hipmob.EVENT_OPERATOR_OFFLINE events (which are fired whenever an application either has an operator available to chat or when all operators go away or become unavailable) and the hipmob.EVENT_URL_RECEIVED event (which is fired when the operator pushes a URL to the chat view: this can be used to show the user of the app specific pages, as shown below).

As a last bonus: on Android, screen size changes based on the keyboard appearing or disappearing are handled automatically. On iOS, we need to provide a little help to prevent the keyboard from covering the screen. To do this the Hipmob chat view offers the EVENT_KEYBOARD_SHOW and EVENT_KEYBOARD_HIDE events that are triggered whenever the keyboard appears or disappears. These events send a data object with height, width and duration properties that are taken from the platform keyboard show/hide notifications, and can be used to adjust the size of the chat view to ensure that it is not covered by the keyboard.

At Hipmob, we’re super responsive to our developer community, and we’re always looking for feedback that helps us improve the product. If you have ideas for support or communication products you’d like to see, or you have questions or anything else about Hipmob, please just drop us a line at ayo@hipmob.com.