clevertap-react-native 0.9.3 → 0.9.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/README.md +5 -0
- package/android/build.gradle +3 -3
- package/android/src/main/java/com/clevertap/react/CleverTapModule.java +40 -13
- package/clevertap-react-native.podspec +1 -1
- package/docs/install.md +3 -1
- package/docs/iospushtemplates.md +449 -0
- package/docs/usage.md +5 -0
- package/index.d.ts +17 -0
- package/index.js +18 -1
- package/ios/CleverTapReact/CleverTapReact.m +103 -69
- package/ios/CleverTapReact/CleverTapReactEventEmitter.h +0 -1
- package/ios/CleverTapReact/CleverTapReactEventEmitter.m +0 -2
- package/ios/CleverTapReact/CleverTapReactManager.h +3 -0
- package/ios/CleverTapReact/CleverTapReactManager.m +11 -10
- package/ios/CleverTapReact.xcodeproj/project.xcworkspace/contents.xcworkspacedata +7 -0
- package/ios/CleverTapReact.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +8 -0
- package/ios/CleverTapReact.xcodeproj/project.xcworkspace/xcuserdata/kushagra.xcuserdatad/UserInterfaceState.xcuserstate +0 -0
- package/ios/CleverTapReact.xcodeproj/xcuserdata/kushagra.xcuserdatad/xcschemes/xcschememanagement.plist +14 -0
- package/package.json +1 -1
- package/static/Finder.png +0 -0
- package/static/GenerateSpecs.png +0 -0
- package/static/NotificationContent.png +0 -0
- package/static/NotificationContentTarget.png +0 -0
- package/android/local.properties +0 -8
- package/ios/CleverTapReact/CleverTapSDK.framework.zip +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
Change Log
|
|
2
2
|
==========
|
|
3
|
+
Version 0.9.5 *(27 March 2023)*
|
|
4
|
+
-------------------------------------------
|
|
5
|
+
- Supports [CleverTap Android SDK v4.6.8](https://github.com/CleverTap/clevertap-android-sdk/blob/master/docs/CTCORECHANGELOG.md#version-468-march-22-2023)
|
|
6
|
+
- Supports [CleverTap iOS SDK v4.2.1](https://github.com/CleverTap/clevertap-ios-sdk/blob/master/CHANGELOG.md#version-421-march-22-2023)
|
|
7
|
+
- Supports [CleverTap Android RenderMax SDK v1.0.3](https://github.com/CleverTap/clevertap-android-sdk/blob/master/docs/CTRENDERMAXCHANGELOG.md#version-103-march-6-2023)
|
|
8
|
+
- Supports [CleverTap Push Templates SDK v1.0.5.1](https://github.com/CleverTap/clevertap-android-sdk/blob/master/docs/CTPUSHTEMPLATESCHANGELOG.md#version-1051-march-15-2023).
|
|
9
|
+
- Make sure you update all four above versions for compatibility and smooth working.
|
|
10
|
+
- **Note:** This release is being done for Android 12 targeted users.
|
|
11
|
+
- **[Android and iOS Platforms]**:
|
|
12
|
+
Adds `itemIndex` and `buttonIndex` arguments to the payload sent via App Inbox Message tapped listener: `CleverTap.CleverTapInboxMessageTapped`. The `itemIndex` corresponds the index of the item clicked in the list whereas the `buttonIndex` for the App Inbox button clicked (0, 1, or 2). A value of -1 in `buttonIndex` indicates the App Inbox item is clicked.
|
|
13
|
+
- **[Android Platform] Behavioral change of `CleverTap.CleverTapInboxMessageTapped` listener**:
|
|
14
|
+
Previously, the callback was raised when the App Inbox item is clicked. Now, it is also raised when the App Inbox button is clicked. It matches the behavior in iOS platform.
|
|
15
|
+
|
|
16
|
+
Version 0.9.4 *(28 November 2022)*
|
|
17
|
+
-------------------------------------------
|
|
18
|
+
- Supports [CleverTap iOS SDK v4.1.5](https://github.com/CleverTap/clevertap-ios-sdk/blob/master/CHANGELOG.md#version-415-november-15-2022)
|
|
19
|
+
- Supports `setInstanceWithAccountId` method
|
|
20
|
+
- Supports using specific CleverTap instance
|
|
21
|
+
|
|
3
22
|
|
|
4
23
|
Version 0.9.3 *(1 November 2022)*
|
|
5
24
|
-------------------------------------------
|
package/README.md
CHANGED
|
@@ -25,6 +25,11 @@ To get started, sign up [here](https://clevertap.com/live-product-demo/).
|
|
|
25
25
|
- [CleverTap iOS SDK Integration guide](https://support.clevertap.com/docs/ios/getting-started.html)
|
|
26
26
|
- [CleverTap Android SDK Integration guide](https://support.clevertap.com/docs/android/getting-started.html)
|
|
27
27
|
|
|
28
|
+
## 📲 CleverTap iOS Push Templates SDK
|
|
29
|
+
|
|
30
|
+
CleverTap Push Templates SDK helps you engage with your users using fancy push notification templates built specifically to work with [CleverTap Push Templates SDK](https://github.com/CleverTap/CTNotificationContent).
|
|
31
|
+
Find the integration steps for the CleverTap Push Templates SDK [here](./docs/iospushtemplates.md)
|
|
32
|
+
|
|
28
33
|
## 📑 Documentation & Example
|
|
29
34
|
|
|
30
35
|
- [See the CleverTap React Native Usage Documentation](/docs/usage.md)
|
package/android/build.gradle
CHANGED
|
@@ -21,8 +21,8 @@ android {
|
|
|
21
21
|
defaultConfig {
|
|
22
22
|
minSdkVersion 16
|
|
23
23
|
targetSdkVersion 31
|
|
24
|
-
versionCode
|
|
25
|
-
versionName "0.9.
|
|
24
|
+
versionCode 95
|
|
25
|
+
versionName "0.9.5"
|
|
26
26
|
}
|
|
27
27
|
buildTypes {
|
|
28
28
|
release {
|
|
@@ -39,7 +39,7 @@ dependencies {
|
|
|
39
39
|
maven { url "$rootDir/../node_modules/react-native/android" }
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
api 'com.clevertap.android:clevertap-android-sdk:4.6.
|
|
42
|
+
api 'com.clevertap.android:clevertap-android-sdk:4.6.8'
|
|
43
43
|
implementation 'com.android.installreferrer:installreferrer:2.2'
|
|
44
44
|
//compile 'com.android.support:appcompat-v7:28.0.0'
|
|
45
45
|
implementation 'com.facebook.react:react-native:+'
|
|
@@ -729,14 +729,17 @@ public class CleverTapModule extends ReactContextBaseJavaModule implements SyncL
|
|
|
729
729
|
sendEvent(CLEVERTAP_ON_INBOX_BUTTON_CLICK, getWritableMapFromMap(payload));
|
|
730
730
|
|
|
731
731
|
}
|
|
732
|
+
|
|
732
733
|
@Override
|
|
733
|
-
public void onInboxItemClicked(CTInboxMessage message){
|
|
734
|
+
public void onInboxItemClicked(CTInboxMessage message, int itemIndex, int buttonIndex) {
|
|
734
735
|
WritableMap params = Arguments.createMap();
|
|
735
736
|
JSONObject data = message.getData();
|
|
736
737
|
if (data != null) {
|
|
737
738
|
params.putString("data", data.toString());
|
|
738
739
|
}
|
|
739
|
-
|
|
740
|
+
params.putInt("itemIndex", itemIndex);
|
|
741
|
+
params.putInt("buttonIndex", buttonIndex);
|
|
742
|
+
sendEvent(CLEVERTAP_ON_INBOX_MESSAGE_CLICK, params);
|
|
740
743
|
}
|
|
741
744
|
|
|
742
745
|
//Product Config Callback
|
|
@@ -1264,6 +1267,14 @@ public class CleverTapModule extends ReactContextBaseJavaModule implements SyncL
|
|
|
1264
1267
|
}
|
|
1265
1268
|
}
|
|
1266
1269
|
|
|
1270
|
+
@ReactMethod
|
|
1271
|
+
public void dismissInbox() {
|
|
1272
|
+
CleverTapAPI cleverTap = getCleverTapAPI();
|
|
1273
|
+
if (cleverTap != null) {
|
|
1274
|
+
cleverTap.dismissAppInbox();
|
|
1275
|
+
}
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1267
1278
|
// Increment/Decrement Operator
|
|
1268
1279
|
|
|
1269
1280
|
@ReactMethod
|
|
@@ -1373,21 +1384,25 @@ public class CleverTapModule extends ReactContextBaseJavaModule implements SyncL
|
|
|
1373
1384
|
return props;
|
|
1374
1385
|
}
|
|
1375
1386
|
|
|
1387
|
+
private void registerListeners(CleverTapAPI clevertap) {
|
|
1388
|
+
clevertap.setCTPushNotificationListener(this);
|
|
1389
|
+
clevertap.setInAppNotificationListener(this);
|
|
1390
|
+
clevertap.setSyncListener(this);
|
|
1391
|
+
clevertap.setCTNotificationInboxListener(this);
|
|
1392
|
+
clevertap.setInboxMessageButtonListener(this);
|
|
1393
|
+
clevertap.setCTInboxMessageListener(this);
|
|
1394
|
+
clevertap.setInAppNotificationButtonListener(this);
|
|
1395
|
+
clevertap.setDisplayUnitListener(this);
|
|
1396
|
+
clevertap.setCTProductConfigListener(this);
|
|
1397
|
+
clevertap.setCTFeatureFlagsListener(this);
|
|
1398
|
+
clevertap.setLibrary("React-Native");
|
|
1399
|
+
}
|
|
1400
|
+
|
|
1376
1401
|
private CleverTapAPI getCleverTapAPI() {
|
|
1377
1402
|
if (mCleverTap == null) {
|
|
1378
1403
|
CleverTapAPI clevertap = CleverTapAPI.getDefaultInstance(this.context);
|
|
1379
1404
|
if (clevertap != null) {
|
|
1380
|
-
clevertap
|
|
1381
|
-
clevertap.setInAppNotificationListener(this);
|
|
1382
|
-
clevertap.setSyncListener(this);
|
|
1383
|
-
clevertap.setCTNotificationInboxListener(this);
|
|
1384
|
-
clevertap.setInboxMessageButtonListener(this);
|
|
1385
|
-
clevertap.setCTInboxMessageListener(this);
|
|
1386
|
-
clevertap.setInAppNotificationButtonListener(this);
|
|
1387
|
-
clevertap.setDisplayUnitListener(this);
|
|
1388
|
-
clevertap.setCTProductConfigListener(this);
|
|
1389
|
-
clevertap.setCTFeatureFlagsListener(this);
|
|
1390
|
-
clevertap.setLibrary("React-Native");
|
|
1405
|
+
registerListeners(clevertap);
|
|
1391
1406
|
}
|
|
1392
1407
|
mCleverTap = clevertap;
|
|
1393
1408
|
}
|
|
@@ -1395,6 +1410,18 @@ public class CleverTapModule extends ReactContextBaseJavaModule implements SyncL
|
|
|
1395
1410
|
return mCleverTap;
|
|
1396
1411
|
}
|
|
1397
1412
|
|
|
1413
|
+
@ReactMethod
|
|
1414
|
+
public void setInstanceWithAccountId(String accountId) {
|
|
1415
|
+
if (mCleverTap == null || !accountId.equals(mCleverTap.getAccountId())) {
|
|
1416
|
+
CleverTapAPI cleverTap = CleverTapAPI.getGlobalInstance(this.context, accountId);
|
|
1417
|
+
if (cleverTap != null) {
|
|
1418
|
+
registerListeners(cleverTap);
|
|
1419
|
+
mCleverTap = cleverTap;
|
|
1420
|
+
Log.i(TAG, "CleverTap instance changed for accountId " + accountId);
|
|
1421
|
+
}
|
|
1422
|
+
}
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1398
1425
|
private CTProductConfigController getCtProductConfigController() {
|
|
1399
1426
|
CleverTapAPI clevertap = getCleverTapAPI();
|
|
1400
1427
|
if (clevertap == null) {
|
|
@@ -18,6 +18,6 @@ Pod::Spec.new do |s|
|
|
|
18
18
|
s.preserve_paths = 'LICENSE.md', 'README.md', 'package.json', 'index.js'
|
|
19
19
|
s.source_files = 'ios/CleverTapReact/*.{h,m}'
|
|
20
20
|
|
|
21
|
-
s.dependency 'CleverTap-iOS-SDK', '4.1
|
|
21
|
+
s.dependency 'CleverTap-iOS-SDK', '4.2.1'
|
|
22
22
|
s.dependency 'React-Core'
|
|
23
23
|
end
|
package/docs/install.md
CHANGED
|
@@ -86,7 +86,9 @@ dependencies {
|
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
//clevertap
|
|
89
|
-
implementation 'com.clevertap.android:clevertap-android-sdk:4.6.
|
|
89
|
+
implementation 'com.clevertap.android:clevertap-android-sdk:4.6.8'
|
|
90
|
+
implementation "com.clevertap.android:push-templates:1.0.5.1" //Optional for push templates SDK support
|
|
91
|
+
implementation "com.clevertap.android:clevertap-rendermax-sdk:1.0.3" //Optional for renderMax SDK support
|
|
90
92
|
|
|
91
93
|
|
|
92
94
|
// other libs
|
|
@@ -0,0 +1,449 @@
|
|
|
1
|
+
# iOS Push Templates integration with React Native
|
|
2
|
+
|
|
3
|
+
CleverTap Push Templates SDK helps you engage with your users using fancy push notification templates built specifically to work with [CleverTap](https://eu1.dashboard.clevertap.com/login.html).
|
|
4
|
+
|
|
5
|
+
# Table of contents
|
|
6
|
+
|
|
7
|
+
- [Installation](#installation)
|
|
8
|
+
- [Dashboard Usage](#dashboard-usage)
|
|
9
|
+
- [Template Types](#template-types)
|
|
10
|
+
- [Template Keys](#template-keys)
|
|
11
|
+
|
|
12
|
+
# Installation
|
|
13
|
+
|
|
14
|
+
[(Back to top)](#table-of-contents)
|
|
15
|
+
- Add Notification Content Extension (Push Templates) in a React Native iOS Project
|
|
16
|
+
Notification Content Extension is an app extension that provides a custom interface when a user previews your notification in the notification center. To enable the functionality of CleverTap iOS Push templates, we need this extension in the project which act as subclass to our CTNotificationContent framework.
|
|
17
|
+
|
|
18
|
+
Open Example.xcodeproj (or your app’s .xcodeproj file) in the ios folder of React Native project. Go to File > New > Target… and search with the name “Notification Content Extension“
|
|
19
|
+
|
|
20
|
+

|
|
21
|
+
|
|
22
|
+
Add “Notification Content“ as target name.
|
|
23
|
+
|
|
24
|
+

|
|
25
|
+
|
|
26
|
+
Refer to https://github.com/CleverTap/CTNotificationContent#-setup for setting up Notification Content target so that it imports CTNotificationContent framework in the code. Make sure to add the necessary key-values in the Info.plist file of NotificationContent target so that it recognises the identifier of the incoming notification.
|
|
27
|
+
|
|
28
|
+
Alternatively, go to finder and replace newly created NotificationContent (or your content extension) folder with the NotificationContent folder in CTNotificationContent Example project repository.
|
|
29
|
+
|
|
30
|
+

|
|
31
|
+
|
|
32
|
+
Add the following to a file named Podfile in the ios directory of your project.
|
|
33
|
+
```
|
|
34
|
+
use_frameworks!
|
|
35
|
+
target 'NotificationContent' do
|
|
36
|
+
pod 'CTNotificationContent'
|
|
37
|
+
end
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
The final Podfile should look something like this:
|
|
41
|
+
```
|
|
42
|
+
require_relative '../node_modules/react-native/scripts/react_native_pods'
|
|
43
|
+
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
|
|
44
|
+
|
|
45
|
+
platform :ios, '10.0'
|
|
46
|
+
|
|
47
|
+
use_frameworks!
|
|
48
|
+
target 'NotificationContent' do
|
|
49
|
+
pod 'CTNotificationContent'
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
target 'Example' do
|
|
53
|
+
|
|
54
|
+
config = use_native_modules!
|
|
55
|
+
|
|
56
|
+
use_react_native!(:path => config["reactNativePath"])
|
|
57
|
+
|
|
58
|
+
pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'
|
|
59
|
+
pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
|
|
60
|
+
|
|
61
|
+
post_install do |installer|
|
|
62
|
+
react_native_post_install(installer)
|
|
63
|
+
# Apple Silicon builds require a library path tweak for Swift library discovery or "symbol not found" for swift things
|
|
64
|
+
installer.aggregate_targets.each do |aggregate_target|
|
|
65
|
+
aggregate_target.user_project.native_targets.each do |target|
|
|
66
|
+
target.build_configurations.each do |config|
|
|
67
|
+
config.build_settings['LIBRARY_SEARCH_PATHS'] = ['$(SDKROOT)/usr/lib/swift', '$(inherited)']
|
|
68
|
+
end
|
|
69
|
+
end
|
|
70
|
+
aggregate_target.user_project.save
|
|
71
|
+
end
|
|
72
|
+
end
|
|
73
|
+
end
|
|
74
|
+
```
|
|
75
|
+
Now run the command pod install again. This will download and configure CTNotificationContent(iOS push templates) in your project.
|
|
76
|
+
```
|
|
77
|
+
For React Native 0.69 or below you need to change the build phase order so that React Native can use the iOS framework added with the help of podfile
|
|
78
|
+
Please check your React-Native version of the project before proceeding further. Go to package.json file in your project and check react-native key and check for the version.
|
|
79
|
+
|
|
80
|
+
If the react native version of your project is below 0.69 you need to drag the Generate Specs above Headers as explained below.
|
|
81
|
+
```
|
|
82
|
+
## For React Native version 0.69 or below:
|
|
83
|
+
|
|
84
|
+
Open Example.xcworkspace (or your app’s .xcworkspace file). Go to the Pods section in Xcode -> select FBReactNativeSpec -> Build Phases -> drag Generate Specs above Headers .
|
|
85
|
+

|
|
86
|
+
|
|
87
|
+
## For React Native version 0.70 or above:
|
|
88
|
+
|
|
89
|
+
We must disable "hermes" and "flipper" from the Podfile since we are using use_frameworks and this causes build issues if both of them are enabled.
|
|
90
|
+
|
|
91
|
+
Please observe that hermes_enabled is set from its default true state to false by adding :hermes_enabled => false inside use_react_native! snippet.
|
|
92
|
+
The podfile mentions this in comments:
|
|
93
|
+
```
|
|
94
|
+
Note that if you have use_frameworks! enabled, Flipper will not work and
|
|
95
|
+
# you should disable the next line.
|
|
96
|
+
```
|
|
97
|
+
so we have added a # to comment the line
|
|
98
|
+
```
|
|
99
|
+
:flipper_configuration => FlipperConfiguration.enabled
|
|
100
|
+
```
|
|
101
|
+
The new Podfile should look like this:
|
|
102
|
+
```
|
|
103
|
+
require_relative '../node_modules/react-native/scripts/react_native_pods'
|
|
104
|
+
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
|
|
105
|
+
platform :ios, '12.4'
|
|
106
|
+
install! 'cocoapods', :deterministic_uuids => false
|
|
107
|
+
use_frameworks!
|
|
108
|
+
target 'NotificationContent' do
|
|
109
|
+
pod 'CTNotificationContent'
|
|
110
|
+
end
|
|
111
|
+
target 'reactnativedemo' do
|
|
112
|
+
config = use_native_modules!
|
|
113
|
+
# Flags change depending on the env values.
|
|
114
|
+
flags = get_default_flags()
|
|
115
|
+
use_react_native!(
|
|
116
|
+
:path => config[:reactNativePath],
|
|
117
|
+
# Hermes is now enabled by default. Disable by setting this flag to false.
|
|
118
|
+
# Upcoming versions of React Native may rely on get_default_flags(), but
|
|
119
|
+
# we make it explicit here to aid in the React Native upgrade process.
|
|
120
|
+
:hermes_enabled => false,
|
|
121
|
+
:fabric_enabled => flags[:fabric_enabled],
|
|
122
|
+
# Enables Flipper.
|
|
123
|
+
#
|
|
124
|
+
# Note that if you have use_frameworks! enabled, Flipper will not work and
|
|
125
|
+
# you should disable the next line.
|
|
126
|
+
# :flipper_configuration => FlipperConfiguration.enabled,
|
|
127
|
+
# An absolute path to your application root.
|
|
128
|
+
:app_path => "#{Pod::Config.instance.installation_root}/.."
|
|
129
|
+
)
|
|
130
|
+
post_install do |installer|
|
|
131
|
+
react_native_post_install(
|
|
132
|
+
installer,
|
|
133
|
+
# Set `mac_catalyst_enabled` to `true` in order to apply patches
|
|
134
|
+
# necessary for Mac Catalyst builds
|
|
135
|
+
:mac_catalyst_enabled => false
|
|
136
|
+
)
|
|
137
|
+
__apply_Xcode_12_5_M1_post_install_workaround(installer)
|
|
138
|
+
end
|
|
139
|
+
end
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
### Out of the box
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
# Dashboard Usage
|
|
146
|
+
|
|
147
|
+
[(Back to top)](#table-of-contents)
|
|
148
|
+
While creating a Push Notification campaign on CleverTap, just follow the steps below -
|
|
149
|
+
|
|
150
|
+
1. On the "WHAT" section pass the desired required values in the "title" and "message" fields (NOTE: These are iOS alert title and body).
|
|
151
|
+

|
|
152
|
+
2. Click on "Advanced" and then click on "Rich Media" and select Single or Carousel template.
|
|
153
|
+

|
|
154
|
+
3. For adding custom key-value pair, add the [template Keys](#template-keys) individually or into one JSON object and use the `pt_json` key to fill in the values.
|
|
155
|
+

|
|
156
|
+

|
|
157
|
+
4. Send a test push and schedule!
|
|
158
|
+
|
|
159
|
+
# Template Types
|
|
160
|
+
|
|
161
|
+
[(Back to top)](#table-of-contents)
|
|
162
|
+
|
|
163
|
+
## Rich Media
|
|
164
|
+
### Single Media
|
|
165
|
+
Single media is for basic view with single image.
|
|
166
|
+

|
|
167
|
+
|
|
168
|
+
### Content Slider
|
|
169
|
+
Content Slider is for image slideshow view where user can add multiple images with different captions, sub-captions, and actions.
|
|
170
|
+
|
|
171
|
+
<img src="https://github.com/CleverTap/CTNotificationContent/blob/master/images/ContentSlider.gif" alt="Content slider" width="450" height="800"/>
|
|
172
|
+
|
|
173
|
+
## Custom key-value pair
|
|
174
|
+
|
|
175
|
+
### Basic Template
|
|
176
|
+
Basic Template is the basic push notification received on apps where user can also update text colour, background colour.
|
|
177
|
+
|
|
178
|
+

|
|
179
|
+
|
|
180
|
+
### Auto Carousel Template
|
|
181
|
+
Auto carousel is an automatic revolving carousel push notification where user can also update text colour, background colour.
|
|
182
|
+
|
|
183
|
+
<img src="https://github.com/CleverTap/CTNotificationContent/blob/master/images/CustomAutoCarousel.gif" alt="Auto carousel" width="450" height="800"/>
|
|
184
|
+
|
|
185
|
+
### Manual Carousel Template
|
|
186
|
+
This is the manual version of the carousel. The user can navigate to the next/previous image by clicking on the Next/Back buttons.
|
|
187
|
+
---
|
|
188
|
+
**NOTE:**
|
|
189
|
+
|
|
190
|
+
For iOS 12 and above, you need to configure your Notification Content target Info.plist to reflect the category identifier you registered: `NSExtension -> NSExtensionAttributes -> UNNotificationExtensionCategory`. In addition, set the `UNNotificationExtensionInitialContentSizeRatio -> 0.1` , `UNNotificationExtensionDefaultContentHidden -> true` and `UNNotificationExtensionUserInteractionEnabled -> 1`.
|
|
191
|
+
|
|
192
|
+
For iOS 11 and below, the previous/next buttons will not work. Please use notification actions with identifiers `action_1` and `action_2` for this purpose.
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
<img src="https://github.com/CleverTap/CTNotificationContent/blob/master/images/CustomManualCarousel.gif" alt="Manual carousel" width="450" height="800"/>
|
|
197
|
+
|
|
198
|
+
### Timer Template
|
|
199
|
+
This template features a live countdown timer. You can even choose to show different title, message, and background image after the timer expires.
|
|
200
|
+
|
|
201
|
+
<img src="https://github.com/CleverTap/CTNotificationContent/blob/master/images/CustomTimerTemplate.gif" alt="Timer template" width="450" height="800"/>
|
|
202
|
+
|
|
203
|
+
### Zero Bezel Template
|
|
204
|
+
|
|
205
|
+
The Zero Bezel template ensures that the background image covers the entire available surface area of the push notification. All the text is overlayed on the image.
|
|
206
|
+
|
|
207
|
+

|
|
208
|
+
|
|
209
|
+
### Rating Template
|
|
210
|
+
|
|
211
|
+
Rating template lets your users give you feedback.
|
|
212
|
+
|
|
213
|
+
**NOTE:**
|
|
214
|
+
|
|
215
|
+
For iOS 12 and above, you need to configure your Notification Content target Info.plist to reflect the category identifier you registered: `NSExtension -> NSExtensionAttributes -> UNNotificationExtensionCategory`. In addition, set the `UNNotificationExtensionInitialContentSizeRatio -> 0.1` , `UNNotificationExtensionDefaultContentHidden -> true` and `UNNotificationExtensionUserInteractionEnabled -> 1`.
|
|
216
|
+
For iOS 11 and below, it will fallback to a basic template.
|
|
217
|
+
|
|
218
|
+
---
|
|
219
|
+
|
|
220
|
+

|
|
221
|
+
|
|
222
|
+
### Product Catalog Template
|
|
223
|
+
|
|
224
|
+
Product catalog template lets you show case different images of a product (or a product catalog) before the user can decide to click on the "BUY NOW" option which can take them directly to the product via deep links. This template has two variants.
|
|
225
|
+
|
|
226
|
+
**NOTE:**
|
|
227
|
+
|
|
228
|
+
For iOS 12 and above, you need to configure your Notification Content target Info.plist to reflect the category identifier you registered: `NSExtension -> NSExtensionAttributes -> UNNotificationExtensionCategory`. In addition, set the `UNNotificationExtensionInitialContentSizeRatio -> 0.1` , `UNNotificationExtensionDefaultContentHidden -> true` and `UNNotificationExtensionUserInteractionEnabled -> 1`.
|
|
229
|
+
For iOS 11 and below, it will fallback to a basic template.
|
|
230
|
+
|
|
231
|
+
---
|
|
232
|
+
|
|
233
|
+
### Vertical View
|
|
234
|
+
|
|
235
|
+

|
|
236
|
+
|
|
237
|
+
### Linear View
|
|
238
|
+
|
|
239
|
+
Use the following keys to enable linear view variant of this template.
|
|
240
|
+
|
|
241
|
+
Template Key | Required | Value
|
|
242
|
+
---:|:---:|:---
|
|
243
|
+
pt_product_display_linear | Optional | `true`
|
|
244
|
+
|
|
245
|
+

|
|
246
|
+
|
|
247
|
+
### WebView Template
|
|
248
|
+
|
|
249
|
+
WebView template lets you load a remote https URL.
|
|
250
|
+
|
|
251
|
+

|
|
252
|
+
|
|
253
|
+
**Note:** If any image can't be downloaded, the template falls back to basic template with caption and sub caption only.
|
|
254
|
+
|
|
255
|
+
# Template Keys
|
|
256
|
+
|
|
257
|
+
[(Back to top)](#table-of-contents)
|
|
258
|
+
|
|
259
|
+
## Rich Media
|
|
260
|
+
### Content Slider
|
|
261
|
+
Configure your APNS payload:
|
|
262
|
+
|
|
263
|
+
Then, when sending notifications via [APNS](https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/APNSOverview.html):
|
|
264
|
+
- include the mutable-content flag in your payload aps entry (this key must be present in the aps payload or the system will not call your app extension)
|
|
265
|
+
- for the Image Slideshow view, add the `ct_ContentSlider` key with a json object value, see example below, to the payload, outside of the aps entry.
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
```
|
|
270
|
+
{
|
|
271
|
+
|
|
272
|
+
"aps": {
|
|
273
|
+
"alert": {
|
|
274
|
+
"body": "test message",
|
|
275
|
+
"title": "test title",
|
|
276
|
+
},
|
|
277
|
+
"category": "CTNotification",
|
|
278
|
+
"mutable-content": true,
|
|
279
|
+
},
|
|
280
|
+
"ct_ContentSlider": {
|
|
281
|
+
"orientation": "landscape", // landscape assumes 16:9 images, remove to display default square/portrait images
|
|
282
|
+
"showsPaging": true, // optional to display UIPageControl
|
|
283
|
+
"autoPlay": true, // optional to auto play the slideshow
|
|
284
|
+
"autoDismiss": true, // optional to auto dismiss the notification on item actionUrl launch
|
|
285
|
+
"items":[
|
|
286
|
+
{
|
|
287
|
+
"caption": "caption one",
|
|
288
|
+
"subcaption": "subcaption one",
|
|
289
|
+
"imageUrl": "https://s3.amazonaws.com/ct-demo-images/landscape-1.jpg",
|
|
290
|
+
"actionUrl": "com.clevertap.ctcontent.example://item/one"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"caption": "caption two",
|
|
294
|
+
"subcaption": "subcaption two",
|
|
295
|
+
"imageUrl": "https://s3.amazonaws.com/ct-demo-images/landscape-2.jpg",
|
|
296
|
+
"actionUrl": "com.clevertap.ctcontent.example://item/two"
|
|
297
|
+
}
|
|
298
|
+
]
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
```
|
|
302
|
+
## Custom key-value pair
|
|
303
|
+
|
|
304
|
+
### Basic Template
|
|
305
|
+
Basic Template Keys | Required | Description
|
|
306
|
+
---:|:---:|:---|
|
|
307
|
+
pt_id | Required | Value - `pt_basic`
|
|
308
|
+
pt_title | Required | Title
|
|
309
|
+
pt_msg | Required | Message
|
|
310
|
+
pt_msg_summary | Required | Message line when Notification is expanded
|
|
311
|
+
pt_bg | Required | Background Color in HEX
|
|
312
|
+
pt_big_img | Optional | Image
|
|
313
|
+
pt_dl1 | Optional | One Deep Link
|
|
314
|
+
pt_title_clr | Optional | Title Color in HEX
|
|
315
|
+
pt_msg_clr | Optional | Message Color in HEX
|
|
316
|
+
pt_json | Optional | Above keys in JSON format
|
|
317
|
+
|
|
318
|
+
### Auto Carousel Template
|
|
319
|
+
|
|
320
|
+
Auto Carousel Template Keys | Required | Description
|
|
321
|
+
---:|:---:|:---
|
|
322
|
+
pt_id | Required | Value - `pt_carousel`
|
|
323
|
+
pt_title | Required | Title
|
|
324
|
+
pt_msg | Required | Message
|
|
325
|
+
pt_msg_summary | Optional | Message line when Notification is expanded
|
|
326
|
+
pt_dl1 | Required | Deep Link
|
|
327
|
+
pt_img1 | Required | Image One
|
|
328
|
+
pt_img2 | Required | Image Two
|
|
329
|
+
pt_img3 | Required | Image Three
|
|
330
|
+
pt_bg | Required | Background Color in HEX
|
|
331
|
+
pt_title_clr | Optional | Title Color in HEX
|
|
332
|
+
pt_msg_clr | Optional | Message Color in HEX
|
|
333
|
+
pt_json | Optional | Above keys in JSON format
|
|
334
|
+
|
|
335
|
+
### Manual Carousel Template
|
|
336
|
+
|
|
337
|
+
Manual Carousel Template Keys | Required | Description
|
|
338
|
+
---:|:---:|:---
|
|
339
|
+
pt_id | Required | Value - `pt_manual_carousel`
|
|
340
|
+
pt_title | Required | Title
|
|
341
|
+
pt_msg | Required | Message
|
|
342
|
+
pt_msg_summary | Optional | Message line when Notification is expanded
|
|
343
|
+
pt_dl1 | Required | Deep Link One
|
|
344
|
+
pt_img1 | Required | Image One
|
|
345
|
+
pt_img2 | Required | Image Two
|
|
346
|
+
pt_img3 | Required | Image Three
|
|
347
|
+
pt_bg | Required | Background Color in HEX
|
|
348
|
+
pt_title_clr | Optional | Title Color in HEX
|
|
349
|
+
pt_msg_clr | Optional | Message Color in HEX
|
|
350
|
+
pt_json | Optional | Above keys in JSON format
|
|
351
|
+
|
|
352
|
+
### Timer Template
|
|
353
|
+
|
|
354
|
+
Timer Template Keys | Required | Description
|
|
355
|
+
---:|:---:|:---
|
|
356
|
+
pt_id | Required | Value - `pt_timer`
|
|
357
|
+
pt_title | Required | Title
|
|
358
|
+
pt_title_alt | Optional | Title to show after timer expires
|
|
359
|
+
pt_msg | Required | Message
|
|
360
|
+
pt_msg_alt | Optional | Message to show after timer expires
|
|
361
|
+
pt_msg_summary | Optional | Message line when Notification is expanded
|
|
362
|
+
pt_dl1 | Required | Deep Link
|
|
363
|
+
pt_big_img | Optional | Image
|
|
364
|
+
pt_big_img_alt | Optional | Image to show when timer expires
|
|
365
|
+
pt_bg | Required | Background Color in HEX
|
|
366
|
+
pt_chrono_title_clr | Optional | Color for timer text in HEX
|
|
367
|
+
pt_timer_threshold | Required | Timer duration in seconds. Will be given higher priority.
|
|
368
|
+
pt_timer_end | Optional | Epoch Timestamp to countdown to (for example, $D_1595871380 or 1595871380). Not needed if pt_timer_threshold is specified.
|
|
369
|
+
pt_title_clr | Optional | Title Color in HEX
|
|
370
|
+
pt_msg_clr | Optional | Message Color in HEX
|
|
371
|
+
pt_json | Optional | Above keys in JSON format
|
|
372
|
+
|
|
373
|
+
### Zero Bezel Template
|
|
374
|
+
|
|
375
|
+
Zero Bezel Template Keys | Required | Description
|
|
376
|
+
---:|:---:|:---
|
|
377
|
+
pt_id | Required | Value - `pt_zero_bezel`
|
|
378
|
+
pt_title | Required | Title
|
|
379
|
+
pt_msg | Required | Message
|
|
380
|
+
pt_msg_summary | Optional | Message line when Notification is expanded
|
|
381
|
+
pt_subtitle | Optional | Subtitle
|
|
382
|
+
pt_big_img | Required | Image
|
|
383
|
+
pt_dl1 | Required | Deep Link
|
|
384
|
+
pt_title_clr | Optional | Title Color in HEX
|
|
385
|
+
pt_msg_clr | Optional | Message Color in HEX
|
|
386
|
+
pt_json | Optional | Above keys in JSON format
|
|
387
|
+
|
|
388
|
+
### Rating Template
|
|
389
|
+
|
|
390
|
+
Rating Template Keys | Required | Description
|
|
391
|
+
---:|:---:|:---
|
|
392
|
+
pt_id | Required | Value - `pt_rating`
|
|
393
|
+
pt_title | Required | Title
|
|
394
|
+
pt_msg | Required | Message
|
|
395
|
+
pt_big_img | Optional | Image
|
|
396
|
+
pt_msg_summary | Optional | Message line when Notification is expanded
|
|
397
|
+
pt_subtitle | Optional | Subtitle
|
|
398
|
+
pt_default_dl | Required | Default Deep Link for Push Notification
|
|
399
|
+
pt_dl1 | Required | Deep Link for first/all star(s)
|
|
400
|
+
pt_dl2 | Optional | Deep Link for second star
|
|
401
|
+
pt_dl3 | Optional | Deep Link for third star
|
|
402
|
+
pt_dl4 | Optional | Deep Link for fourth star
|
|
403
|
+
pt_dl5 | Optional | Deep Link for fifth star
|
|
404
|
+
pt_bg | Required | Background Color in HEX
|
|
405
|
+
pt_ico | Optional | Large Icon
|
|
406
|
+
pt_title_clr | Optional | Title Color in HEX
|
|
407
|
+
pt_msg_clr | Optional | Message Color in HEX
|
|
408
|
+
pt_json | Optional | Above keys in JSON format
|
|
409
|
+
|
|
410
|
+
### Product Catalog Template
|
|
411
|
+
|
|
412
|
+
Product Catalog Template Keys | Required | Description
|
|
413
|
+
---:|:---:|:---
|
|
414
|
+
pt_id | Required | Value - `pt_product_display`
|
|
415
|
+
pt_title | Required | Title
|
|
416
|
+
pt_msg | Required | Message
|
|
417
|
+
pt_subtitle | Optional | Subtitle
|
|
418
|
+
pt_img1 | Required | Image One
|
|
419
|
+
pt_img2 | Required | Image Two
|
|
420
|
+
pt_img3 | Optional | Image Three
|
|
421
|
+
pt_bt1 | Required | Big text for first image
|
|
422
|
+
pt_bt2 | Required | Big text for second image
|
|
423
|
+
pt_bt3 | Required | Big text for third image
|
|
424
|
+
pt_st1 | Required | Small text for first image
|
|
425
|
+
pt_st2 | Required | Small text for second image
|
|
426
|
+
pt_st3 | Required | Small text for third image
|
|
427
|
+
pt_dl1 | Required | Deep Link for first image
|
|
428
|
+
pt_dl2 | Required | Deep Link for second image
|
|
429
|
+
pt_dl3 | Required | Deep Link for third image
|
|
430
|
+
pt_price1 | Required | Price for first image
|
|
431
|
+
pt_price2 | Required | Price for second image
|
|
432
|
+
pt_price3 | Required | Price for third image
|
|
433
|
+
pt_bg | Required | Background Color in HEX
|
|
434
|
+
pt_product_display_action | Required | Action Button Label Text
|
|
435
|
+
pt_product_display_linear | Optional | Linear Layout Template ("true"/"false")
|
|
436
|
+
pt_product_display_action_clr | Required | Action Button Background Color in HEX
|
|
437
|
+
pt_title_clr | Optional | Title Color in HEX
|
|
438
|
+
pt_msg_clr | Optional | Message Color in HEX
|
|
439
|
+
pt_json | Optional | Above keys in JSON format
|
|
440
|
+
|
|
441
|
+
### WebView Template
|
|
442
|
+
|
|
443
|
+
WebView Template Keys | Required | Description
|
|
444
|
+
---:|:---:|:---
|
|
445
|
+
pt_id | Required | Value - `pt_web_view`
|
|
446
|
+
pt_dl1 | Required | Deep Link
|
|
447
|
+
pt_url | Required | URL to load
|
|
448
|
+
pt_orientation | Optional | Value - `landscape` or `portrait`
|
|
449
|
+
pt_json | Optional | Above keys in JSON format
|
package/docs/usage.md
CHANGED
|
@@ -104,6 +104,11 @@ CleverTap.showInbox({'tabs':['Offers','Promotions'],'navBarTitle':'My App Inbox'
|
|
|
104
104
|
'noMessageText':'No message(s)','noMessageTextColor':'#FF0000'});
|
|
105
105
|
```
|
|
106
106
|
|
|
107
|
+
#### Dismiss the App Inbox
|
|
108
|
+
```javascript
|
|
109
|
+
CleverTap.dismissInbox();
|
|
110
|
+
```
|
|
111
|
+
|
|
107
112
|
#### Get Total message count
|
|
108
113
|
|
|
109
114
|
```javascript
|
package/index.d.ts
CHANGED
|
@@ -430,6 +430,11 @@
|
|
|
430
430
|
* @param styleConfig : any or empty object
|
|
431
431
|
*/
|
|
432
432
|
export function showInbox(styleConfig: any): void;
|
|
433
|
+
|
|
434
|
+
/**
|
|
435
|
+
* Call this method to dismiss the App Inbox
|
|
436
|
+
*/
|
|
437
|
+
export function dismissInbox(): void;
|
|
433
438
|
|
|
434
439
|
/**
|
|
435
440
|
* Call this method to get all inbox messages
|
|
@@ -610,6 +615,18 @@
|
|
|
610
615
|
*/
|
|
611
616
|
export function resumeInAppNotifications(): void;
|
|
612
617
|
|
|
618
|
+
/*******************
|
|
619
|
+
* Instances
|
|
620
|
+
******************/
|
|
621
|
+
|
|
622
|
+
/**
|
|
623
|
+
* Change the native instance of CleverTapAPI by using the instance for
|
|
624
|
+
* specific account. Used by Leanplum RN SDK.
|
|
625
|
+
*
|
|
626
|
+
* @param accountId {string} - The ID of the account to use when switching instance.
|
|
627
|
+
*/
|
|
628
|
+
export function setInstanceWithAccountId(accountId: string): void;
|
|
629
|
+
|
|
613
630
|
/*******************
|
|
614
631
|
* Developer Options
|
|
615
632
|
******************/
|