New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@drivekyte/react-native-kustomer

Package Overview
Dependencies
Maintainers
6
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@drivekyte/react-native-kustomer

Kustomer V2 SDK for React Native

3.1.0
latest
npm
Version published
Maintainers
6
Created
Source

react-native-kustomer

Kustomer SDK for React Native

Getting started

$ yarn add @drivekyte/react-native-kustomer

Set Kotlin version to 1.7.0

Using React Native >= 0.60

Linking the package manually is not required anymore with Autolinking.

Using React Native < 0.60

$ react-native link @drivekyte/react-native-kustomer

Install native Kustomer libraries

Android

Gradle

Include the library in your android/app/build.gradle:

gradle implementation 'com.kustomer.kustomersdk:kustomersdk:0.3.7'

Maven
<dependency>
  <groupId>com.kustomer.kustomersdk</groupId>
  <artifactId>kustomersdk</artifactId>
  <version>0.3.7</version>
  <type>pom</type>
</dependency>

iOS

CocoaPods

The preferred installation method is with CocoaPods. Add the following to your Podfile:

pod 'Kustomer', :git => 'https://github.com/kustomer/customer-ios.git', :tag => '0.3.9'
Carthage

For Carthage, add the following to your Cartfile:

github "kustomer/customer-ios" ~> 0.3.9

Configure

Android

Add the following three activities to your AndroidManifest.xml:

<activity android:name="com.kustomer.kustomersdk.Activities.KUSSessionsActivity" android:configChanges="orientation|screenSize|keyboardHidden" android:theme="@style/CustomKustomerTheme" />
<activity android:name="com.kustomer.kustomersdk.Activities.KUSChatActivity" android:configChanges="orientation|screenSize|keyboardHidden" android:theme="@style/CustomKustomerTheme" />
<activity android:name="com.kustomer.kustomersdk.Activities.KUSKnowledgeBaseActivity" android:configChanges="orientation|screenSize|keyboardHidden" android:theme="@style/CustomKustomerTheme" />

Initialize Kustomer in your MainApplication onCreate function:

import com.kustomer.kustomersdk.Kustomer;

public class MainApplication extends Application implements ReactApplication {
  @Override
  public void onCreate() {
    Kustomer.init(this, API_KEY);
  }
}

To customize Kustomer's theme, add a new style in styles.xml overwriting the values you want to replace:

<style name="MySupportTheme" parent="CustomKustomerTheme">
  <item name="colorPrimary">@color/kusToolbarBackgroundColor</item>
  <item name="colorPrimaryDark">@color/kusStatusBarColor</item>
  <item name="colorAccent">@color/kusColorAccent</item>
  <item name="kus_back_image">@drawable/ic_arrow_back_black_24dp</item>
  <item name="kus_dismiss_image">@drawable/ic_close_black_24dp</item>
  <item name="kus_new_session_button_image">@drawable/ic_edit_white_20dp</item>
</style>

To edit Kustomer's UI colors, add the desired color to be replaced in colors.xml:

<!-- CHAT HISTORY SCREEN -->
<color name="kusToolbarBackgroundColor">#000000</color>
<color name="kusStatusBarColor">#000000</color>
<color name="kusToolbarTintColor">#DD2C00</color>
<color name="kusSessionListBackground">#909090</color>
<color name="kusSessionItemBackground">#909090</color>
<color name="kusSessionItemSelectedBackground">#55FFFFFF</color>
<color name="kusSessionTitleColor">#FFFFFF</color>
<color name="kusSessionDateColor">#FFFFFF</color>
<color name="kusSessionSubtitleColor">#FFFFFF</color>
<color name="kusSessionUnreadColor">#FFFFFF</color>
<color name="kusSessionUnreadBackground">#3F51B5</color>
<color name="kusSessionPlaceholderBackground">#909090</color>
<color name="kusSessionPlaceholderLineColor">#55FFFFFF</color>
<color name="kusNewSessionButtonColor">#DD2C00</color>
<color name="kusNewSessionTextColor">#FFFFFF</color>

<!-- CHAT SCREEN -->
<color name="kusToolbarNameColor">#FFFFFF</color>
<color name="kusToolbarGreetingColor">#FFFFFF</color>
<color name="kusToolbarSeparatorColor">#BDBDBD</color>
<color name="kusToolbarUnreadTextColor">#FFFFFF</color>
<color name="kusToolbarUnreadBackground">#aacc0000</color>
<color name="kusEmailInputBackground">#FFFFFF</color>
<color name="kusEmailInputBorderColor">#DD2C00</color>
<color name="kusEmailInputPromptColor">#FFFFFF</color>
<color name="kusChatListBackground">#909090</color>
<color name="kusChatItemBackground">#909090</color>
<color name="kusChatTimestampTextColor">#FFFFFF</color>
<color name="kusCompanyBubbleColor">#000000</color>
<color name="kusCompanyTextColor">#FFFFFF</color>
<color name="kusUserBubbleColor">#DD2C00</color>
<color name="kusUserTextColor">#000000</color>
<color name="kusSendButtonColor">#DD2C00</color>
<color name="kusInputBarTintColor">#DD2C00</color>
<color name="kusInputBarHintColor">#EEEEEE</color>
<color name="kusInputBarTextColor">#FFFFFF</color>
<color name="kusInputBarBackground">#000000</color>
<color name="kusInputBarSeparatorColor">#BDBDBD</color>
<color name="kusInputBarAttachmentIconColor">#FFFFFF</color>
<color name="kusOptionPickerSeparatorColor">#BDBDBD</color>
<color name="kusOptionPickerButtonBorderColor">#2962FF</color>
<color name="kusOptionPickerButtonTextColor">#2962FF</color>
<color name="kusOptionPickerButtonBackground">#F5F5F5</color>

<!-- SATISFACTION FORM -->
<color name="kusCSatRatingPromptTextColor">#FFFFFF</color>
<color name="kusCSatQuestionsTextColor">#FFFFFF</color>
<color name="kusCSatRatingLabelsTextColor">#FFFFFF</color>
<color name="kusCSatFeedbackTextColor">#FFFFFF</color>
<color name="kusCSatEditTextColor">#DD2C00</color>
<color name="kusCSatCommentBorderColor">#FFFFFF</color>
<color name="kusCSatCommentInputTextColor">#FFFFFF</color>
<color name="kusCSatSubmitButtonColor">#DD2C00</color>
<color name="kusCSatSubmitTextColor">#000000</color>

iOS

Initialize Kustomer in your AppDelegate.m didFinishLaunchingWithOptions function:

#import <Kustomer/Kustomer.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [Kustomer initializeWithAPIKey:@"API_KEY"];
  return YES;
}

Usage

Import the library to use its methods:

import KustomerSDK from '@drivekyte/react-native-kustomer';

Methods

identify(token: String): void

Identify current user with a token, in order to recover its previous data, such as conversations and profile

KustomerSDK.identify(token);
describeCustomer(customerData: customerData): void

Add data to the customer profile. You can use some pre-defined fields, or create custom ones from the dashboard.

KustomerSDK.describeCustomer(data);
resetTracking: void

Unlink the current identified user

KustomerSDK.resetTracking();
presentSupport: void

Show Kustomer's chat support UI

KustomerSDK.presentSupport();
openConversationsCount: Promise

Get how many open conversations the user has

await KustomerSDK.openConversationsCount();
presentKnowledgeBase: void

Show Kustomer's Knowledge Base (FAQ) website in a browser modal

KustomerSDK.presentKnowledgeBase();
setCurrentPageName(screen: String): void
KustomerSDK.setCurrentPageName(screen);
customLayout(layout: layout): void (iOS ONLY)

Customize Kustomer's UI using your own style. For Android, check the Configure section above.

KustomerSDK.customLayout(layout);

Types

customerData

The fields email and phone are mandatory. custom can contain any number of custom fields, which can be created from the Kustomer dashboard.

type customerData {
  email: String,
  phone: String,
  custom: {String}
}
layout

All values are String that contain a HEX color (#FFFFFF), except for keyboardAppearance, which should be either set to light or dark. Use the fields for which you want to replace the color, the default color will be used if the field is missing.

type layout {
    NavigationBar: {
        background: String,
        tint: String,
        name: String,
        greeting: String
    },
    SessionsTable: {
        background: String
    },
    ChatSessionTableCell: {
        background: String,
        selectedBackground: String,
        title: String,
        date: String,
        subtitle: String
    },
    ChatPlaceholderTableCell: {
        background: String,
        line: String
    },
    NewSessionButton: {
        color: String
    },
    ChatTable: {
        background: String
    },
    ChatMessageTableCell: {
        background: String,
        companyText: String,
        companyBubble: String,
        userBubble: String
    },
    TypingIndicator: {
        color: String
    },
    InputBar: {
        sendButton: String,
        tint: String,
        placeholder: String,
        text: String,
        background: String,
        keyboardAppearance: 'light' | 'dark'
    },
    Rating: {
        lowScaleLabel: String,
        highScaleLabel: String
    },
    FeedbackTableCell: {
        feedbackText: String,
        editText: String
    },
    SatisfactionFormTableCell: {
        submitButtonBackground: String,
        submitButtonText: String,
        commentQuestion: String,
        commentBoxBorder: String,
        satisfactionQuestion: String,
        commentBoxText: String,
        introductionQuestion: String
    },
    Email: {
        background: String,
        border: String,
        prompt: String
    },
    EndChat: {
        background: String,
        text: String,
        border: String
    }
}

Keywords

react-native

FAQs

Package last updated on 22 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts