Ionic SDK (Deprecated)

With Huggy Mobile SDK you can integrate the Huggy Chat into your Ionic app for Android and iOS platforms. The chat interface will be the same as configured on your Huggy Panel.

With this SDK you will only need to add a couple of lines to get your chat working on mobile.

One example of who use the package can be find on Example

Getting Started

Installing the Ionic plugin

To install the plugin on Ionic/Cordova project run the following command:

ionic cordova plugin add @huggyhq/huggychat
1

Cordova

To install in some cordova project:

cordova plugin add @huggyhq/huggychat
1

Using in your project

This plugin map the Huggy SDK calls of Android and iOS to make easy to use then on Ionic/Cordova applications through Javascript calls.

The plugin are responsible for initialize the screen who contains the Huggy Chat by mapping the Huggy SDK calls of Android and iOS to make easy to use they on Ionic/Cordova applications through Javascript call.

The following functions are available to use:

NamePlatformDescription
openHuggyChatAndroid/iOSOpen native screen who contains the Huggy Chat
handleNotificationAndroidSet the context of application and enable the SDK to receive notifications
notifyAndroidPush a new notification to the user
notifyAppInForegroundAndroidEnable the SDK to show notifications when the app is opened
openHuggyChat

Android/iOS

Open native screen who contains the Huggy Chat


handleNotification

Android

Set the context of application and enable the SDK to receive notifications


notify

Android

Push a new notification to the user


notifyAppInForeground

Android

Enable the SDK to show notifications when the app is opened



Importing the plugin

To import the plugin just globally declare the cordova variable:

declare cordova var;
1

Launch the Huggy Chat Screen

When you desire to call the Huggy Chat you must call the following function

cordova.plugins.huggychat.openHuggyChat(SDK_ID, this.success, this.failure);
1

API Functions - Only Android

To use the Huggy Chat methods who are available at Huggy Chat Documentation.

Due the new created activity to render the Huggy Chat all API calls will be executed when the Huggy Chat has been loaded, or when the chat is created if the method is setData.

To call methods who accept primitive parameters, one or more, they need to be pass as an unique array of string.

cordova.plugins.huggychat.execute("setPhone", ["+1", "75999999999"]);
1

or to methods who receive only one JSON Object parameter you need to pass the object it self:

const data = {
  customer: {
    name: "John Doe",
    mobile: "+557536230001",
    email: "seuemail@email.com",
    custom_fields: {
      passaporte: "0000000"
    }
  }
};

cordova.plugins.huggychat.execute("setData", data);
1
2
3
4
5
6
7
8
9
10
11
12

Nota: The setData method will be called only after the user sent the first message, what means the attendance was initiated and chat successfully created.

Subscribing for notifications - Only Android

To be able to receive notifications of new Agent messages you have to call the notification handle

cordova.plugins.huggychat.handleNotification(this.success, this.failure);
1

Also, you're will need to set default values to customize the icon of notifications.

Add this lines inside the application tag to set the notifications icon:

<meta-data android:name="io.huggy.chatsdk.notification_icon" android:resource="@mipmap/your_icon_notification" />
1

To merge this line with the default manifest of Android app, go to your config.xml and add theses line

<config-file parent="/manifest/application" target="AndroidManifest.xml" xmlns:android="http://schemas.android.com/apk/res/android">
    <meta-data android:name="io.huggy.chatsdk.notification_icon" android:resource="@mipmap/ic_launcher" />
</config-file>
1
2
3

Setting Action Bar colors - Only Android

You can set the color of action bar by setting two preferences on your config.xml, one color to define the background color and other to define the title color.

You must set the following preferences:

<preference name="huggychatActionBarBackgroundColor" value="#064dff" />
<preference name="huggychatActionBarTextColor" value="#ffffff" />
1
2