This helps in integrating our chat to your existing app which can create tickets and enquries in real-time.

Below are some screenshots that showcase the configuration set up for Ticketing:

Auto reply messages set up for sending the welcome message, closing message and when assignment of users exceeds the maximum limit.

We can also schedule the working hours for the chat assignment as below:

Offline ticket assignment helps in choosing a queue to map the tickets which are created during non-working hours.

Email alert option helps in getting an email when a chat is created.

Once the above details are filled, you can save the configuration and then proceed with the scripts to update in the mobile app.

For integration please follow the steps below:

Step 1 : Download the SDK

Click on download button to download the android SDK. DOWNLOAD

Once downloaded you will find the below Android SDK along with the installation guide in the zip folder.

Minimum supported SDK version:

Kapchat Android SDK requires minimum API level to be 15.

Steps for Kapchat Android SDK Integration:

Step 1 :

Import KapchatSDK.aar to your project

• From File menu, select Project Structure and click on Add Module (+ button on top left corner). File -> Project Structure -> Add Module
• Select Import .jar/.aar Package.
• Locate KapchatSDK.aar and click Finish

Step 2 :

Add the following dependencies to your build.gradle file inside the dependencies section.

Implementation 'com.android.support:appcompat-v7:26.1.0'
Implementation 'com.android.support:recyclerview-v7:26.1.0'
Implementation 'com.google.code.gson:gson:2.8.0'
Implementation  project (':kapchatSDK')

Make sure that all the dependencies are added.

Step 3 :

Add the following provider to your manifest.xml

   <provider
         android:name="android.support.v4.content.FileProvider" android:authorities="${applicationId}.provider"
         android:exported="false"
         android:grantUriPermissions="true">
         <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/providerpath" />
   </provider>

Step 4 :

To initialise Kapchat

• Use KapchatHelper.startChatScreen(Context);
  
  Kapchat uniquely identifies each registered app with a combination of 3 tokens:


• Customer Code – A unique code to identify the customer currently logged in the App
• Support Key – A unique key for your app. This key will be used by the SDK and is specific to your app
• Encryption Key – A secret key that will also be shared to you when integrating the SDK. This key should not be exposed and is specific to the SDK integrated with your app

Example Code

   import com.adjetter.kapchatsdk.KapchatHelper;
   import com.adjetter.kapchatsdk.interfaces.CallBackResponse;
   ...
   ...
   KapchatHelper.initialise(MainActivity.this, "12345", "12345abcdef", "abcdefghijklmnop ", new CallBackResponse() {
   @Override
   public void intialiseResponse(String responseStatus) {
   // Success response status if all the parameters are valid
   }
   });
   ...

Step 5 :

To start Kapchat chat screen:

• Use KapchatHelper.startChatScreen(Context);
  
  To start Kapchat chat screen with template:


• Use KapchatHelper.startChatScreenWithTemplate(Context,KapchatTemplateMessage);

Example Code

import com.adjetter.kapchatsdk.KapchatHelper;
...
...
KapchatHelper.startChatScreen(MainActivity.this);
KapchatTemplateMessage templateMessage = new KapchatTemplateMessage();
templateMessage.setMessage("Hi! I have a query for order #1234");
KapchatHelper.startChatScreen(MainActivity.this,templateMessage );
...

Signing out of Kapchat

To sign out of Kapchat:

• Use KapchatHelper.logoutKapchat(Context);

Example Code

   import com.adjetter.kapchatsdk.KapchatHelper;
   ...
   ...
   KapchatHelper.logoutKapchat(MainActivity.this);
   ...

Kapchat UI Customisation

To make the Kapchat android SDK look like your app, please follow the steps given below:

• Define your custom Kapchat theme in your styles.xml and inherit it from KapchatTheme.
• Create a style named KapchatTheme.Base and set its parent to your custom Kapchat theme.

For Example

You can give the mlook and feel of your app to Kapchat SDK by customizing very few attributes as follows:

                            <style name="MyCustomKapchatTheme" parent="KapchatTheme">
                            <item name="colorAccent">@color/colorAccent</item>
                            <item name="colorPrimary">@color/bbcolorprimay</item>
                            <item name="colorPrimaryDark">@color/bbcolorprimarydark</item>
                            </style>
                            <style name="KapchatTheme.Base" parent="MyCustomKapchatTheme"></style>
                         

You can customize Android's styleable attributes along with Kapchat styleable attributes.

You can find the list of styleable attributes below:

Kapchat styleable attributes

For Example

You can give the mlook and feel of your app to Kapchat SDK by customizing very few attributes as follows:

                              <style name="MyCustomKapchatTheme" parent="KapchatTheme">
                              <item name="android:textColorSecondary">@color/black</item>
                              <item name="kc_toolbartitlecolor">@color/black</item>
                              <item name="kc_toolbartitlesize">@dimen/titlesize</item>
                              <item name="kc_attach_gallery_icon">@drawable/gallery_icon</item>
                              <item name="kc_attach_camera_icon">@drawable/kapchatcapture</item>
                              <item name="kc_activity_background">@color/white</item>
                              <item name="kc_chatlist_bottomlayout_divider">@color/secondarytext</item>


                              <item name="kc_typemessage_et_hint_color">@color/border</item>
                              <item name="kc_typemessage_et_text_color">@color/black</item>
                              <item name="kc_message_send_button">@drawable/sendbbicon</item>
                              <item name="kc_message_send_btn_padding_left"> @dimen/message_send_btn_paddingleft</item>
                              <item name="kc_message_send_btn_padding_right"> @dimen/message_send_btn_paddingright </item>
                              <item name="kc_message_send_btn_margin_left">@dimen/message_send_btn_marginleft</item>
                              <item name="kc_message_send_btn_margin_right"> @dimen/message_send_btn_marginright</item>
                              <item name="kc_user_chat_background">@drawable/user_background</item>
                              <item name="kc_user_chat_textcolor">@color/black</item>
                              <item name="kc_user_chat_time_textcolor">@color/border</item>
                              <item name="kc_agent_chat_background">@drawable/agent_background</item>
                              <item name="kc_agent_chat_textcolor">@color/black</item>
                              <item name="kc_agent_chat_time_textcolor">@color/border</item>
                              <item name="kc_date_layout">@drawable/agent_background</item>
                              <item name="kc_date_textcolor">@color/bbcolorprimay</item>
                              <item name="kc_attachment_download_icon">@drawable/kapchatdownloadicon</item>
                              <item name="kc_attachment_retry_background">@color/colorAccent</item>
                              <item name="kc_attachment_retry_textcolor">@color/kapchatwhite</item>
                              <item name="kc_attachment_delete_icon">@drawable/delete</item>
                              <item name="kc_message_status_send_icon">@drawable/done</item>
                              <item name="kc_message_status_offline_icon">@drawable/offlinemsg</item>
                              <item name="kc_message_status_cancel_icon">@drawable/cancel</item>

                              </style>
                              <style name="KapchatTheme.Base" parent="MyCustomKapchatTheme"></style>
                         

*Make sure you have created style KapchatTheme.Base and its parent as your custom Kapchat theme.

Start using Kapchat SDK

Kapchat SDK is now integrated in your app and it will be ready to provide customer support service via chat.

Step 2 : Initialization

You will need to pass the three parameters from your main app:

• Customercode - The customer code of the customer using the app.
• Partner support key: 7ed069019aea4625d57f955fbe507024891ff4e50946990630

This is your partner support key.

Encryption key: qFctsh8hQor448qM

This is your encryption key which will be used by the SDK.

You can then start the chat by calling the initialization code with the above parameters as follows:

                              KapchatHelper.initialise(MainActivity.this, "123456" /*replace with actual customer code*/, "7ed069019aea4625d57f955fbe507024891ff4e50946990630", "qFctsh8hQor448qM", new CallBackResponse() {
                                 @Override
                                 public void intialiseResponse(Boolean responseStatus) {
                                    // Success response status if all the parameters are valid
                                 }
                              });
                         

To start Kapchat chat screen:

                              Use KapchatHelper.startChatScreen(Context);
                              ...
                              import com.adjetter.kapchatsdk.KapchatHelper;
                              ...
                         

To start Chat Activity in Kapchat:

KapchatHelper.startChatScreen(MainActivity.this);

Chat integration using customer login with iOS:

For integrating our chat to your existing app, please follow the steps below:

Step 1 : Download the SDK

Click on download button to download the iOS SDK. DOWNLOAD
You will find the iOS SDK along with installation guide in the zip folder.

Please go through the installation guide for a detailed explanation on using the SDK.

Step 1 :

Add the framework & bundle to the application project.

Step 2 :

• Go to Project settings
• Go to your apps main target -> General -> Embedded libraries
• Click on + Button and add Framework & Bundle

Step 3 :

Add the following pods:

• XMPPFramework
• FMDBMigrationManager
• AWS Framework

Why do we need to add the pods?

Your code in this custom framework can import classes from other frameworks normally, but it is just a reference, classes from another framework will not be compiled at this time. So you must import the referenced framework on the new project as well.

POD Creation

1) Open the terminal application and create a pod file inside the project directory

2) And add the following lines inside the pod file.

# Uncomment the next line to define a global platform for your project
# platform :ios, ‘8.0’

target 'KapChat' do platform :ios, '8.0' use_frameworks!
pod 'XMPPFramework', '~> 3.7.0' pod 'FMDB'
source 'https://github.com/CocoaPods/Specs.git' use_frameworks!
pod 'AWSS3'
end
post_install do |installer_representation|
installer_representation.pods_project.targets.each do |target|
target.build_configurations.each do |config| config.build_settings['ONLY_ACTIVE_ARCH'] ='NO'
end

Install the pods to your project

Step 4

                              #import <KapChat/KapChat.h> Appdelegate.h
                              To initiate the setup to the server
                              [[XMPPSetup sharedInstance] initialSetup];
                           

Step 5

   import “ViewController.h”
   #import
   <KapChat/KapChat.h>

Write the following line to send a request to the server.

   [[ChatHandlerVC sharedInstance] sendChatRequestToserver: CustomerCode supportKey:supportKey encryptionKey:chatKey withCompletion:^(ChatMessageVC *vc, BOOL success) {
   [vc isChatHeaderShown:YES];
   }];

ChatKey[1]: A secret key that will be used for encrypting the customer code.

CustomerCode: is the code that is used to identify the customer in the Kapture CRM

SupportKey[1]: A unique key that will be used to access the server for the support service.

Here self.navigationController is used to navigate framework screens.

Step 6

• Go to Project settings
• Go to your apps main target -> Build Phases -> Link Binary with Libraries
• Click on + Button

Add the following frameworks to your project

1) CFNetwork.framework

2) Security.framework

3) libresolv.ltd

4) systemConfiguration.framework

Note: These frameworks are required for using the XMPPFramework

Step 7

Add this following lines to info.plist

1) To enable HTTP URL with App transport security enabled in iOS 9

   <key>NSAppTransportSecurity</key>
   <dict>
   <key>NSExceptionDomains</key>
   <dict>
   <key>testdomain.com</key>
   <dict>
   <key>NSIncludesSubdomains</key>
   <true/>
   <key>NSExceptionAllowsInsecureHTTPLoads</key>
   <true/>
   <key>NSExceptionRequiresForwardSecrecy</key>
   <true/>
   <key>NSExceptionMinimumTLSVersion</key>
   <string>TLSv1.2</string>
   <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
   <false/>
   <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
   <true/>
   <key>NSThirdPartyExceptionMinimumTLSVersion</key>
   <string>TLSv1.2</string>
   <key>NSRequiresCertificateTransparency</key>
   <false/>
   </dict>
   </dict>
   </dict>

2) Enable security access to camera in iOS 10

                                 Key    : Privacy - Camera Usage Description
                                 Value : $(PRODUCT_NAME) camera use
                           

3) Enable security access to Photo Library in iOS 10

      Key    : Privacy - Photo Library Usage Description Value : $(PRODUCT_NAME) photo use

[1] Appendix:

The chatKey (encryption key) and supportKey are confidential and can be accessed in the CRM

You can find these keys in the configuration page

Go to Chat -> Chat Configuration

Select Chat for tickets -> iOS SDK

Step 2: Initialization

You will need three parameters for initializing the app:

• Customercode - The customer code of the customer using the app.
• Partner support key:
  7ed069019aea4625d57f955fbe507024891ff4e50946990630
  This is your partner support key.
• Chat key:
  qFctsh8hQor448qM
  This is your encryption key which will be used by the SDK.

Step 3:

   Appdelegate.h
   #import <KapChat/KapChat.h>

   Initiate the chat using the following code:
   [[XMPPSetup sharedInstance] initialSetup];

Step 3:

   import "ViewController.h"
   #import <KapChat/KapChat.h>

Initialize the app using the following code:

   [[ChatHandlerVC sharedInstance] sendChatRequestToserver:@"123456" /*replace with actual customer code*/ supportKey:@"7ed069019aea4625d57f955fbe507024891ff4e50946990630" chatKey:@"qFctsh8hQor448qM" withCompletion:^(ChatMessageVC *vc, BOOL success) {
   [vc isChatHeaderShown:YES];
   }];