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
Cordova
To install in some cordova project:
cordova plugin add @huggyhq/huggychat
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:
Name | Platform | Description |
---|---|---|
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 |
Android/iOS
Open native screen who contains the Huggy Chat
Android
Set the context of application and enable the SDK to receive notifications
Android
Push a new notification to the user
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;
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);
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"]);
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);
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);
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" />
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>
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" />
2