Flutter wrapper for Channel Talk Android and iOS projects.(Unofficial)
import 'package:channel_talk_flutter/channel_talk_flutter.dart';
void main() async {
await ChannelTalk.boot(
pluginKey: 'pluginKey', // Required
memberId: 'memberId',
memberHash: 'memberHash',
email: 'email',
name: 'name',
mobileNumber: 'mobileNumber',
avatarUrl: 'avatarUrl',
unsubscribeEmail: false,
unsubscribeTexting: false,
trackDefaultEvent: false,
hidePopup: false,
language: Language.korean,
appearance: Appearance.dark,
);
ChannelTalk.setListener((event, arguments) {
switch(event){
case ChannelTalkEvent.onShowMessenger:
print('ON_SHOW_MESSENGER');
break;
case ChannelTalkEvent.onHideMessenger:
print('ON_HIDE_MESSENGER');
break;
case ChannelTalkEvent.onChatCreated:
print('ON_CHAT_CREATED:\nchatId: $arguments');
break;
case ChannelTalkEvent.onBadgeChanged:
print('ON_BADGE_CHANGED:\n$arguments');
break;
case ChannelTalkEvent.onFollowUpChanged:
print('ON_FOLLOW_UP_CHANGED\ndata: $arguments');
break;
case ChannelTalkEvent.onUrlClicked:
print('ON_URL_CLICKED\nurl: $arguments');
break;
case ChannelTalkEvent.onPopupDataReceived:
print('ON_POPUP_DATA_RECEIVED\nevent: $arguments}');
break;
case ChannelTalkEvent.onPushNotificationClicked:
print('ON_PUSH_NOTIFICATION_CLICKED\nevent: $arguments}');
default:
break;
}
});
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FlatButton(
child: Text('Open Channel Talk'),
onPressed: () async {
await ChannelTalk.showMessenger();
},
);
}
}
See Channel Talk Android and iOS package documentation for more information.
Update info.plist.
<key>NSCameraUsageDescription</key>
<string>Accessing to camera in order to provide better user experience</string>
<key>NSMicrophoneUsageDescription</key>
<string>Accessing to microphone to record voice for video</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Accessing to photo library in order to save photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Accessing to photo library in order to provide better user experience</string>Add pod installation to ios/Podfile.
(Because there is no latest ChannelIOSDK pod in Cocopod, can not add dependecy to plugin podspec properly.)
target 'Runner' do
use_frameworks!
use_modular_headers!
# Add below line
pod 'ChannelIOSDK', podspec: 'https://mobile-static.channel.io/ios/11.7.3/xcframework.podspec'
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end
Add ChannelTalk initializing code to [project]/ios/Runner/AppDelegate.swift
import ChannelIOFront
...
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
...
ChannelIO.initialize(application)
...
}
...
This plugin works in combination with the firebase_messaging plugin to receive Push Notifications. To set this up:
- First, implement
firebase_messagingand check if it works: https://pub.dev/packages/firebase_messaging#android-integration - Then, add the Firebase server key to Channel Talk, as described here: https://developers.channel.io/docs/android-push-notification
- Add the following to your
AndroidManifest.xmlfile, so incoming messages are handled by Channel Talk:
<service
android:name="ai.deepnatural.channel_talk.PushInterceptService"
android:enabled="true"
android:exported="true">
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
just above the closing </application> tag.
Insert the following script within the tag of your HTML file(web/index.html):
<script>
(function(){var w=window;if(w.ChannelIO){return w.console.error("ChannelIO script included twice.");}var ch=function(){ch.c(arguments);};ch.q=[];ch.c=function(args){ch.q.push(args);};w.ChannelIO=ch;function l(){if(w.ChannelIOInitialized){return;}w.ChannelIOInitialized=true;var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src="https://cdn.channel.io/plugin/ch-plugin-web.js";var x=document.getElementsByTagName("script")[0];if(x.parentNode){x.parentNode.insertBefore(s,x);}}if(document.readyState==="complete"){l();}else{w.addEventListener("DOMContentLoaded",l);w.addEventListener("load",l);}})();
</script>In case of Web platform, would better use bootForWeb API but we can also use boot API.
import 'package:channel_talk_flutter/channel_talk_flutter.dart';
void main() async {
await ChannelTalk.bootForWeb(
pluginKey: 'pluginKey', // Required
memberId: 'memberId',
memberHash: 'memberHash',
email: 'email',
name: 'name',
mobileNumber: '0101231234',
avatarUrl: 'avatarUrl',
customLauncherSelector: 'customLauncherSelector',
hideChannelButtonOnBoot: false,
zIndex: 10000000,
trackDefaultEvent: false,
trackUtmSource: false,
unsubscribeEmail: false,
unsubscribeTexting: false,
hidePopup: false,
appearance: Appearance.light,
language: Language.japanese,
);
...
}| API | API Description | Parameter | Type | Parameter Description | Support platforms |
|---|---|---|---|---|---|
| setListener | Set the delegate allows the reception of event callbacks from the SDK. | delegate* | ChannelTalkDelegate | Support onShowMessenger/onHideMessenger/onChatCreated/onBadgeChanged/onFollowUpChanged/onUrlClicked/onPopupDataReceived | Mobile |
| removeListener | Remove the delegate allows the reception of event callbacks from the SDK.q | Mobile | |||
| boot | Load the information necessary to use the SDK. | pluginKey* | String | Plugin key of Channel. | Mobile, Web |
| memberId | String? | An identifier to distinguish each member user. | |||
| memberHash | String? | A HMAC-SHA256 value of memberId. | |||
| String? | An email of a user. | ||||
| name | String? | A name of a user. | |||
| mobileNumber | String? | A mobile number of a user. | |||
| avatarUrl | String? | An avatar URL of a user. | |||
| language | Language? | A user’s language. It is valid when creating a new user. The language of the user that already exists will not change. | |||
| unsubscribeEmail | bool? | Sets whether to receive marketing messages via email. | |||
| unsubscribeTexting | bool? | Sets whether to receive marketing messages via texting (SMS, LMS) | |||
| trackDefaultEvent | bool? | Sets whether to track the default event, such as PageView. | |||
| hidePopup | bool? | Sets whether to hide popups such as marketing popup and in-app notifications. | |||
| appearance | Appearance? | Sets the appearance of SDK. | |||
| bootForWeb | Load the information necessary to use the SDK. | pluginKey* | String | Plugin key of Channel. | Web |
| memberId | String? | An identifier to distinguish each member user. | |||
| memberHash | String? | A HMAC-SHA256 value of memberId. | |||
| String? | An email of a user. | ||||
| name | String? | A name of a user. | |||
| mobileNumber | String? | A mobile number of a user. | |||
| avatarUrl | String? | An avatar URL of a user. | |||
| language | Language? | A user’s language. It is valid when creating a new user. The language of the user that already exists will not change. | |||
| unsubscribeEmail | bool? | Sets whether to receive marketing messages via email. | |||
| unsubscribeTexting | bool? | Sets whether to receive marketing messages via texting (SMS, LMS) | |||
| trackDefaultEvent | bool? | Sets whether to track the default event, such as PageView. | |||
| hidePopup | bool? | Sets whether to hide popups such as marketing popup and in-app notifications. | |||
| appearance | Appearance? | Sets the appearance of SDK. | |||
| customLauncherSelector | String? | The CSS Selector to select a custom launcher. Use this option to customize the default chat button. | |||
| hideChannelButtonOnBoot | bool? | Determines whether to hide the default chat button on boot. The default value is false. | |||
| zIndex | int? | Sets the z-index for SDK elements, such as the chat button, messenger, and marketing pop-ups. The default value is 10000000. | |||
| trackUtmSource | bool? | Determines whether to track the UTM source and referrer. The default value is true. | |||
| sleep | Disables all features except for receiving system push notifications and using the Track. | Mobile | |||
| shutdown | Disconnects the SDK from the channel. | Mobile, Web | |||
| showChannelButton | Displays the Channel button on the global screen. | Mobile, Web | |||
| hideChannelButton | Hides the Channel button on the global screen. | Mobile, Web | |||
| showMessenger | Displays the messenger. | Mobile, Web | |||
| hideMessenger | Hides the messenger. | Mobile, Web | |||
| openChat | Opens User chat. | chatId | String? | This is the chat ID. If the chatId is invalid or nil, a new user chat is opened. | Mobile, Web |
| message | String? | This is the pre-filled message in the message input field when opening a new chat. It is valid when chatId is nil. | |||
| track | Tracks the user's events. | eventName* | String | This is the name of the event to track, with a maximum length of 30 characters. | Mobile, Web |
| properties | Map? | This is additional information about the event. | |||
| updateUser | TraModifies user information. | name | String? | A name of a user. | Mobile, Web |
| String? | An email of a user. | ||||
| mobileNumber | String? | A mobile number of a user. | |||
| avatarUrl | String? | An avatar URL of a user. | |||
| language | Language? | A user’s language. It is valid when creating a new user. The language of the user that already exists will not change. | |||
| unsubscribeEmail | bool? | Sets whether to receive marketing messages via email. | |||
| unsubscribeTexting | bool? | Sets whether to receive marketing messages via texting (SMS, LMS) | |||
| tags | List[String]? | A tag list of the user. | |||
| customAttributes | Map < String, dynamic >? | A user's CustomAttributes | |||
| initPushToken | Informs ChannelTalk about updates to the device token. | deviceToken* | String | This is additional information about the event. | Mobile |
| isChannelPushNotification | It checks if the push data should be processed by the SDK. | content* | Map | This is the `userInfo object received through push notifications. | Mobile |
| receivePushNotification | Notifies Channel Talk that the user has received a push notification. | content* | Map | This is the `userInfo object received through push notifications. | Mobile |
| storePushNotification | Stores push information on the device. | content* | Map | This is the `userInfo object received through push notifications. | Mobile |
| hasStoredPushNotification | Check for any saved push notifications from the Channel. | Mobile | |||
| openStoredPushNotification | Opens a user chat using the stored push information on the device through �storePushNotification. | Mobile | |||
| isBooted | Verify that the SDK is in a Boot state. | Mobile | |||
| setDebugMode | Sets the debug mode. | flag* | String | debug mode | Mobile |
| setPage | Sets the name of the screen when the track is called. | page* | String | This is the screen name when track is called. | Mobile, Web |
| resetPage | Resets the name of the screen when track is called. | Mobile, Web | |||
| addTags | Adds tags to the user. | tags* | List[String] | • The maximum number of tags that can be added is 10. • Tags are stored in lowercase. • Any tags that have already been added will be ignored. • nil, empty strings, or lists containing them are not allowed. |
Mobile, Web |
| removeTags | Removes tags from the user, ignoring any tags that do not exist. | tags* | List[String] | These are the tags to be removed. Null, empty strings, or lists containing them are not allowed. | Mobile, Web |
| openSupportBot | Opens User chat to run a specific Support bot. | supportBotId* | String? | This is the support bot's ID. If supportBotId is invalid or nil, the chat room is closed. | Mobile, Web |
| message | String? | This message will be displayed in the input field after completing the support bot operation. | |||
| setAppearance | Configures the SDK's theme. | appearance* | Appearance | If specified as .light or .dark, it locks the theme to the respective mode. If specified as .system, it follows the device's system theme. | Mobile, Web |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent