channel_talk_flutter

Flutter wrapper for Channel Talk Android and iOS projects.(Unofficial)

*******************************************************************************************************
ANDROID
Please should change the bottom part when change version from v2.x.x to above of v3.0.0.

In AndroidManifest.xml file,
AS-IS

    <service
        android:name="ai.deepnatural.channel_talk.PushInterceptService"
        ...

TO-BE

    <service
        android:name="com.kuku.channel_talk_flutter.PushInterceptService"
        ...

*******************************************************************************************************

⚡ Usage

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.

iOS

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)
        ...
    }
...

Android

Push notifications in combination with FCM

This plugin works in combination with the firebase_messaging plugin to receive Push Notifications. To set this up:

    <service
        android:name="com.kuku.channel_talk_flutter.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.

Web

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,
    );
...
}

🔧 Supported API

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.
email 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.
email 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
email 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
openWorkflow Opens a user chat and starts the specified workflow. workflowId String? The ID of workflow to start with. An error page will be shown if such workflow does not exist. 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
hidePopup Hides the Channel popup on the global screen. Mobile

🤗 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.

Make sure your request is meaningful and you have tested the app locally before submitting a pull request.

🙋‍♂️ Support

💙 If you like this project, give it a ⭐ and share it with friends!

buymeacoffee-violet-badge

Libraries

channel_talk_flutter
channel_talk_flutter_method_channel
channel_talk_flutter_platform_interface
channel_talk_flutter_web
web/channel_io_service