channel_talk_flutter

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

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.6.0/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:

First, implement firebase_messaging and 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.xml file, 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.

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
openChat	Opens User chat.	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.	Mobile, Web
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
track	Tracks the user's events.	properties	Map?	This is additional information about the event.	Mobile, Web
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.
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
openSupportBot	Opens User chat to run a specific Support bot.	message	String?	This message will be displayed in the input field after completing the support bot operation.	Mobile, Web
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

channel_talk_flutter

Usage

iOS

Android

Push notifications in combination with FCM

Web

Supported API

Libraries

channel_talk_flutter package