Qiscus Omnichannel Widget

Website is an important part of a business presence. Therefore, it is very important to make it easy for customers to interact with your business through Live Chat. Qiscus provides an Omnichannel Widget feature where you can have more touch points by adding various channels as live chat options.

In addition to snippets to embed on a website, you can embed the widget in your Android app or even the iOS app. For more information on how to embed this widget in Android, please hop on to the Android Customization section, and for iOS, you can refer to iOS Customization.

Important notes:

• To use Qiscus Omnichannel Widget, you must have a website.
• You can add up to 6 channels. However, you can contact our team if you need to add more channels.
• Channels added to Omnichannel Widget are not tightly related to the existing channel in Qiscus Omnichannel Chat.

Follow these steps to use Qiscus Omnichannel Widget:

1. Go to the Integration page in the left sidebar menu,

2. Select Qiscus Omnichannel Widget,

3. Click Add Qiscus Omnichannel Widget,

4. Fill in the channel name and then click Next,

5. You can add channel auto responder in the next step, or you can skip this and select Set up later,

6. In the Widget Builder section, scroll down and select Enable Channels,

7. Click Add Channel button,

8. A pop up to add Channel Widget will appear. Fill in the channel name and the channel link. In this example, we will add WhatsApp channel,

The example of channel and URL you can add to Qiscus Omnichannel Widget:

9. Upload Channel Badge Icon, and then click Add,

10. Click Save button,

11. You will see the added channel on the tab Channels,

12. You can add another channel by click Add Channel button,

13. Copy and paste the provided code script into your website.

Qiscus Omnichannel Widget Settings

You can disable, edit or delete channels that have been added to the Qiscus Omnichannel Widget.

To disable a channel, you can click the kebab button (three vertical dots) next to a channel and disable the status toggle.

To edit a channel, you can follow these steps:

1. Click the kebab button (three vertical dots) next to a channel and select Edit Channel,

2. An Edit Channel Widget will appear. Edit the information and then click Save.

To delete a channel, you can click the kebab button (three vertical dots) next to a channel and select Delete Channel.

Make sure the toggle on your Qiscus Omnichannel Widget channel is enabled to ensure that your widget channel is active and usable.

If you want to deactivate this channel, you only need to disable the toggle on the selected channel. This will cause the channel to become inactive and prevent the channel from sending or receiving messages anymore.

Android in-app Widget

Requirements

• Android Studio v4.1.3 or latest
• Min SDK 16
• Java 8
• Kotlin v1.3.50

Installation

Add this URL reference in your project build.gradle

allprojects {

   repositories {

      google()

      jcenter()

      maven {

          url "https://artifactory.qiscus.com/artifactory/qiscus-library-open-source"

      }

   }

}

Then add this to your app build.gradle

dependencies {

    ...

    implementation 'com.qiscus.multichannel:multichannel-widget:2.1.2'

}

How To Use

1. Initialization

In order to use QiscusMultichannelWidget, you need to initialize it with your AppID (YOUR_APP_ID). Get more information to get AppID from here

class SampleApp : Application() {

​

    lateinit var qiscusMultichannelWidget: QiscusMultichannelWidget

​

    override fun onCreate() {

        super.onCreate()

​

        val qiscusCore = QiscusCore()

        qiscusMultichannelWidget = QiscusMultichannelWidget.setup(this, qiscusCore, "YOUR_APP_ID", "LOCALPREFKEY")

​

        ...

    }

}

LOCALPREFKEY : local data identifier After the initialization, you can access all the widget's functions.

2. Set The User

Set UserId before start the chat, this is mandatory.

qiscusMultichannelWidget.setUser(id: "UserId", displayName: "Cus Tom R", avatarUrl: "https://customer.avatar-url.com (https://customer.avatar-url.com/)")

If you want to set user properties, you can set them using this function, for example:

val userProperties = mapOf("city" to "jogja", "job" to "developer")

qiscusMultichannelWidget.setUser("user_id", "display_name", "avatar_url", userProperties)

3. Get Login Status

You can check whether the user has already logged in.

qiscusMultichannelWidget.isLoggedIn()

4. Start Chat

Use this function to start a chat.

qiscusMultichannelWidget.initiateChat()

     .setRoomTitle("Custom Title")

     .setRoomSubtitle(

                QiscusMultichannelWidgetConfig.RoomSubtitle.EDITABLE,

                "Custom subtitle"

            )

    .startChat(Context)

Customization

We provide several functions to customize the User Interface.

1. Config

Use this method to configure the widget properties.

Channel Id is an identity for each widget channel. If you have a specific widget channel that you want to integrate into the mobile in-app widget, you can add your channel_id when you do initiateChat . You can get your list of channel id for the widget from:

• Go to the Integration menu on the left bar
• Look for Qiscus Widget
• Select Qiscus Widget channel that you want to integrate
• Spot the channel_id in array data

Example to custom the config:

val channelId : Int = 23

    qiscusMultichannelWidget

        .initiateChat()

        .setChannelId(channelId)

        .startChat(context)

        .setRoomTitle("your_room_title")

2. Color

Use this method to customize the widget color according to your application.

Push Notification

Follow these steps to set push notifications on your application

1. Setup Firebase to Your Android App

If you already have setup Firebase in your Android app, you can skip this step and go to next step which is Generate FCM Server key. Otherwise, you can setup Firebase to your Android app by following these steps.

2. Get FCM Server Key in Firebase Console

You can get FCM Server Key by following these steps:

• Go to Firebase Console
• Click your projects to see the overview your
• On the top of left panel, click the gear icon on Project Overview menu. From the drop-down menu, click Project Settings.

• Click the Cloud Messaging tab under Settings. On the Project Credentials, find and copy your Server Key.

3. Setup FCM Server Key in The Qiscus Omnichannel Chat Dashboard

You can set FCM Secret Key by following these steps:

• Go to Qiscus Omnichannel Chat page to register your email
• Log in to Qiscus Omnichannel Chat with your email and password
• Go to Setting menu on the left bar
• Look for Notification
• Click Android's Customer Widget Push Notification

• In the Android (FCM Server Key) section, click +Add FCM Server Key to add your FCM Server Key,
• Paste FCM Server Key value and click Save change

4. Register Your FCM Token to Qiscus Omnichannel Widget

First you need to enable FCM for your app by calling configuration, for example:

val config = QiscusMultichannelWidgetConfig()

    .setEnableNotification(true) // default is true

    .setNotificationListener(object : MultichannelNotificationListener {

            override fun handleMultichannelListener(context: Context?, qiscusComment: QMessage?) {

                // show your notification here

            }

     })

    .setNotificationIcon(R.drawable.ic_notification)

Set configuration before calling QiscusMultichannelWidget.setup() , for example:

// input the configuration 

QiscusMultichannelWidget.setup(application, qiscusCore, "YOUR_APP_ID", config, color, "LOCALPREFKEY")

To enable FCM in ChatConfig, you need to register FCM token to notify Qiscus Omnichannel Widget, for example:

class FirebaseServices : FirebaseMessagingService() {

​

    override fun onNewToken(newToken: String) {

        super.onNewToken(newToken)

        QiscusMultichannelWidget.instance.registerDeviceToken(

            qiscusCore, newToken

        )

    }

}

You need to make sure every time open the app, the FCM token always needs to be registered in Qiscus Omnichannel Widget. To retrieve the current FCM token, you can see below code:

FirebaseInstanceId.getInstance().instanceId

            .addOnCompleteListener(OnCompleteListener { task ->

                if (!task.isSuccessful) {

                    Log.e("Qiscus", "getCurrentDeviceToken Failed : " + task.exception)

                    return@OnCompleteListener

                }

                if (task.result != null) {

                    val currentToken = task.result!!.token

                    QiscusMultichannelWidget.instance.registerDeviceToken(

                        qiscusCore, currentToken

                    )

                }

            })

Add the service.FirebaseServices in Manifest, for example:

<service android:name="com.qiscus.multichannel.sample.widget.service.FirebaseServices">

   <intent-filter>

       <action android:name="com.google.firebase.MESSAGING_EVENT" />

   </intent-filter>

</service>

5. Handle Incoming Message From Push Notification

After registering your FCM token, you will get data from FCM Qiscus Omnichannel Widget, you can handle by using isMultichannelMessage() function, for example:

class FirebaseServices : FirebaseMessagingService() {

​

    override fun onMessageReceived(remoteMessage: RemoteMessage) {

        super.onMessageReceived(remoteMessage)

​

        if (QiscusMultichannelWidget.instance.isMultichannelMessage(

                remoteMessage, allQiscusCore

            )

        ) {

            return

        }

    }

}

Troubleshoot

If you facing error like this

`More than one file was found with OS independent path 'META-INF/rxjava.properties'`

Add this to your app build.gradle

`android {

    .....

    .....

​

    packagingOptions {

        exclude 'META-INF/rxjava.properties'

    }

} `

How to Run the Example

1. Get your APPID

• Go to Qiscus Omnichannel Chat page to register your email
• Log in to Qiscus Omnichannel Chat with your email and password
• Go to Setting menu on the left bar
• Look for App Information
• You can find APPID in the App Info

2. Activate Qiscus Widget Integration

• Go to Integration menu on the left bar
• Look for Qiscus Widget
• Slide the toggle to activate the Qiscus widget

3. Set YOUR_APP_ ID in the Example

• Open SampleApp.kt
• Replace the appId with YOUR_APP_ID (step 1)

qiscusMultichannelWidget = QiscusMultichannelWidget.setup(application, qiscusCore, "YOUR_APP_ID", "LOCALPREFKEY")

4. Start Chat

The example is ready to use. You can start to chat with your agent from the Qiscus Omnichannel Chat dashboard.

iOS in-app Widget

Requirements

• iOS 10.0+
• minimum XCode 11.4 (Support XCode 14)
• Swift 5

Dependency

• Alamofire
• AlamofireImage
• SwiftyJSON
• QiscusCoreAPI
• SDWebImage

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate QiscusMultichannelWidget into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'QiscusMultichannelWidget', '~> 2.2.1'

How To Use

1. Initialization

In order to use QiscusMultichannelWidget(), you need to initialize it with your AppID (YOUR_APP_ID). Get more information to get AppID from Qiscus Omnichannel Chat page

let qiscusWidget = QiscusMultichannelWidget(appID: YOUR_APP_ID)

After the initialization, you can access all the widget's functions.

2. Set The User

Set UserId before start the chat, this is mandatory.

qiscusWidget.setUser(id: "UserId", displayName: "Cus Tom R", avatarUrl: "https://customer.avatar-url.com (https://customer.avatar-url.com/)")

If you want to set user properties, you can set them by using this function, for example:

let userProp = [["key":"job","value":"development"],["key":"Location","value":"Yogyakarta"]]

​

qiscusWidget.setUser(id: "UserId", displayName: "Cus Tom R", avatarUrl: "https://customer.avatar-url.com (https://customer.avatar-url.com/)", userProperties : userProp)

3. Get Login Status

User this function to check whether the user has already logged in.

qiscusWidget.isLoggedIn()

4. Start Chat

Use this function to start a chat.

qiscusWidget.initiateChat()

    .setRoomTitle(title: "TITLE".localized())

    .setRoomSubTitle(enableSubtitle: RoomSubtitle.enable, subTitle: "SUBTITLE".localized())

    .startChat { (chatViewController) in

        viewController.navigationController?.setViewControllers([viewController, chatViewController], animated: true)

}

5. Clear User

Use this function to clear the logged-in users.

qiscusWidget.clearUser()

6. Hide System Message

Configure system message visibility by calling setShowSystemMessage(isShowing: Bool) .

qiscusWidget.initiateChat()

            ...

            .setShowSystemMessage(isShowing: false)

            ...

            .startChat { (chatViewController) in

                 viewController.navigationController?.setViewControllers([viewController, chatViewController], animated: true)

            }

Customization

We provide several functions to customize the User Interface.

1. Config

Use this method to configure the widget properties.

Channel Id is an identity for each widget channel. If you have a specific widget channel that you want to integrate into the mobile in-app widget, you can add your channel_id when you do initiateChat. You can get your list of channel id for the widget from:

• Go to the Integration menu on the left bar
• Look for Qiscus Widget
• Select Qiscus Widget channel that you want to integrate
• Spot the channel_id in array data

Example to custom in config:

qiscusWidget.initiateChat()

    .setChannelId(channelId: 99)

    .setRoomTitle(title: "TITLE".localized())

    .setRoomSubTitle(enableSubtitle: RoomSubtitle.enable, subTitle: "SUBTITLE".localized())

    .startChat { (chatViewController) in

        viewController.navigationController?.setViewControllers([viewController, chatViewController], animated: true)

}

2. Color

Use this method to customize the widget color according to your application.

Push Notification

Follow these steps to set push notifications on your application

1. Create the Certificate Signing Request (CSR)

• Open Keychain Access on your Mac (Applications -> Utilities -> Keychain Access)
• Select Request a Certificate From a Certificate Authority

• Fill User Email Address, Common Name (Example: John Doe Dev Key), and select the Saved to disk on Request is group

2. Create the Push Notification SSL certificate in Apple Developer site

• Log in to the Apple Developer Member Center
• Go to the Certificates, Identifiers & Profiles menu
• Select Certificates , then click the Plus (+) button

• Select Apple Push Notification service SSL (Sandbox & Production) and click continue.

• Select AppID then click continue
• Upload the CSR file (step 1) to complete this process
• Download an SSL certificate
• Double-click the file and register it to your login Keychain

3. Upload the p12 file to Qiscus dashboard

• Click the Certificates category from the left menu, under the Keychain Access
• Select the Push SSL certificate that you registered before
• Right-click the certificate

• Select export to save the file to your disk

• Go to Qiscus Help page to submit your request

• Full fill the requirements below:

  • Email, Subject, and Description
  • Select Multichannel CS Chat in Product Associated
  • Select Multichannel Customer Service Chat in Category of Query
  • Fill YOUR_APP_ID in Application ID

• Click Submit

4. Register the device token to Qiscus Omnichannel Widget.

• Create a class to hold the Widget. In this example, we will use a Singleton Object class called ChatManager that will wrap the QiscusMultichannelWidget functionalities. In this step, we will highlight the deviceToken registration and notification tap handling.

final  class  ChatManager {

​

    static let shared: ChatManager = ChatManager()

​

    lazy  var  qiscusWidget: QiscusMultichannelWidget = {

        return QiscusMultichannelWidget(appID: "YOUR_APP_ID")

    }()

    ...

    func register(deviceToken: Data?) {

​

        if let deviceToken = deviceToken {

            var tokenString: String = ""

            for i in 0..<deviceToken.count {

                tokenString += String(format: "%02.2hhx", deviceToken[i] as CVarArg)

            }

            self.qiscusWidget.register(deviceToken: tokenString, isDevelopment: false, onSuccess: { (response) in

                print("Multichannel widget success to register device token")

            }) { (error) in

                print("Multichannel widget failed to register device token")

            }

        }

​

    }

​

    func userTapNotification(userInfo : [AnyHashable : Any]) {

​

        self.qiscusWidget.tapNotification(userInfo: userInfo)

    }

​

    ...

}

• In your app's AppDelegate , store your device token as a variable.

import  UserNotifications

​

@UIApplicationMain

class  AppDelegate:  UIResponder,  UIApplicationDelegate {

​

    func  application(_  application:  UIApplication, didFinishLaunchingWithOptions  launchOptions [UIApplication.LaunchOptionsKey:  Any]?) ->  Bool {

        // MARK : Setup Push Notification

        if  #available(iOS 10.0,  *) {

            // For iOS 10 display notification (sent via APNS)

            UNUserNotificationCenter.current().delegate  =  self

            let  authOptions:  UNAuthorizationOptions  = [.alert, .badge, .sound]

            UNUserNotificationCenter.current().requestAuthorization(

                options:  authOptions,

                completionHandler: {_,  _  in })

        } else {

            let  settings:  UIUserNotificationSettings  =

            UIUserNotificationSettings(types: [.alert, .badge, .sound],  categories:  nil)

            application.registerUserNotificationSettings(settings)

        }

        // MARK : register the app for remote notifications

        application.registerForRemoteNotifications()

​

        return  true

    }

    func  application(_  application:  UIApplication,  didRegisterForRemoteNotificationsWithDeviceToken  deviceToken:  Data) {

​

        ChatManager.shared.register(deviceToken:  deviceToken)

    }

​

    func  application(_  application:  UIApplication,  didReceiveRemoteNotification  userInfo: [AnyHashable  :  Any]) {

        ChatManager.shared.userTapNotification(userInfo: userInfo)

    } 

}

​

// [START ios_10_message_handling]

@available(iOS  10,  *)

extension  AppDelegate  :  UNUserNotificationCenterDelegate {

    // Receive displayed notifications for iOS 10 devices.

    func  userNotificationCenter(_  center:  UNUserNotificationCenter, willPresent  notification:  UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) ->  Void) {

​

        completionHandler([.alert, .sound])

    }

​

    func  userNotificationCenter(_  center:  UNUserNotificationCenter, didReceive  response:  UNNotificationResponse, withCompletionHandler  completionHandler: @escaping () ->  Void) {

        let  userInfo  =  response.notification.request.content.userInfo

        ChatManager.shared.userTapNotification(userInfo:  userInfo)

        completionHandler()

    }

}

// [END ios_10_message_handling]

5. Test the push notification from third party

Use the Easy APNs Provider tools

How to Run the Example

1. Get your APPID

• Go to Qiscus Omnichannel Chat page to register your email
• Log in to Qiscus Omnichannel Chat with your email and password
• Go to Setting menu on the left bar
• Look for App Information
• You can find APPID in the App Info

2. Activate Qiscus Widget Integration

• Go to Integration menu on the left bar
• Look for Qiscus Widget
• Slide the toggle to activate the Qiscus widget

3. Run pod install

After cloning the example, you need to run this code to install all Cocoapods dependencies needed by the Example

pod install

4. Set YOUR_APP_ID in the Example

• Open Example/ChatManager.swift
• Replace the appId at line 21 with YOUR_APP_ID (step 1)

lazy  var  qiscusWidget: QiscusMultichannelWidget = {

    return  QiscusMultichannelWidget(appID: "YOUR_APP_ID")

}()

5. Start Chat

The Example is ready to use. You can start to chat with your agent from the Qiscus Multichannel Chat dashboard.

React Native in-app

Requirements

• ReactNative: ^0.63.4

Dependency

• @react-native-async-storage/async-storage: ^1.15.9
• react-native-document-picker: ^7.1.0

Installation

# Qiscus Multichannel main package

yarn add @qiscus-community/react-native-multichannel-widget@2.0.1-beta.0

​

# Dependencies required for qiscus multichannel

yarn add @react-native-async-storage/async-storage react-native-document-picker

How To Use

1. Initialization

In order to use MultichannelWidgetProvider, you need to initialize it with your AppID (YOUR_APP_ID). Get more information to get AppID from Qiscus Omnichannel Chat page

// Wrap your outer most component with `MultichannelWidgetProvider`

// for example

import { MultichannelWidgetProvider } from '@qiscus-community/react-native-multichannel-widget';

​

<MultichannelWidgetProvider appId={YOUR_APP_ID}>

  <App />

</MultichannelWidgetProvider>;

After the initialization, you can access all the widget's functions.

2. Set The User

Set UserId before start the chat, this is mandatory.

import { useMultichannelWidget } from '@qiscus-community/react-native-multichannel-widget';

​

// ... inside your component

const widget = useMultichannelWidget();

widget.setUser({

  userId: 'unique-user-id',

  displayName: 'Display Name for this user',

  avatarUrl: 'https://via.placeholder.com/200',

});

​

// if you want to set user properties

widget.setUser({

  userId: 'unique-user-id',

  displayName: 'Display Name for this user',

  avatarUrl: 'https://via.placeholder.com/200',

  userProperties: {

    extra_property_key: 'extra property value',

  },

});

3. Get Login Status

Use this function to check whether the user has already logged in.

import { useCurrentUser } from '@qiscus-community/react-native-multichannel-widget';

​

// ... inside your component

const user = useCurrentUser();

​

// check user value null or not

const isLoggedIn = useMemo(() => user == null, [user]);

4. Start Chat

Use this function to start a chat.

widget

  .initiateChat()

  .then(() => console.log('success initiating chat'))

  .catch((e: unknown) => console.error('error while initiating chat'));

5. Clear User

Use this function to clear the logged-in users.

widget.clearUser();

6. Hide System Event

Use this function to configure system message visibility

widget.setHideUIEvent();

Customization

We provide several functions to customize the User Interface.

1. Config

Use this method to configure the widget properties.

Channel Id is an identity for each widget channel. If you have a specific widget channel that you want to integrate into the mobile in-app widget, you can add your channel_id when you do initiateChat . You can get your list of channel id for the widget from:

• Go to the Integration menu on the left bar
• Look for Qiscus Widget
• Select Qiscus Widget channel that you want to integrate
• Spot the channel_id in array data

Example to custom the config:

widget.setChannelId(channel_id);

2. Color

Use this method to customize the widget color according to your application.

Push Notification

In order to activate your push notification, you could ask us to set it up by creating a ticket at Qiscus Support and providing your FCM or iOS certificate within the ticket.

How To Run The Example

1. Get your APPID

• Go to Qiscus Omnichannel Chat page to register your email
• Log in to Qiscus Omnichannel Chat with your email and password
• Go to ‘Setting’ menu on the left bar
• Select ‘App Information’ menu
• You can find APPID in the App Info

2. Activate Qiscus Widget Integration

• Go to ‘Integration’ menu on the left bar
• Select ‘Qiscus Widget’
• Slide the toggle to activate the Qiscus widget

3. Run npm install

yarn

4. Set YOUR__APP__ID in the Example

• Open example/src/App.tsx
• Replace the APP_ID at line 12 with your appId

<MultichannelWidgetProvider appId={APP_ID}>

  <App />

</MultichannelWidgetProvider>

5. Start Chat

The example is ready to use. You can start to chat with your agent from the Qiscus Omnichannel Chat dashboard.

Flutter in-app

Requirements

• Dart SDK version >=2.16.0 <3.0.0
• Flutter SDK version >=1.17.0

Installation

flutter pub add qiscus_multichannel_widget

How to Use

1. Initialization

In order to use QMultichannelWidget, you need to initialize it with your AppId (YOUR_APP_ID). Get more information to get AppId from Qiscus Omnichannel Chat Page.

// Wrap your outer most flutter widget with `QMultichannelProvider`

// for example

​

import 'package:qiscus_multichannel_widget/qiscus_multichannel_widget.dart';

​

QMultichannelProvider(

  appId: YOUR_APP_ID,

  builder: (context) {

    return MaterialApp(

      home: Home(),

    );

  },

);

After the initialization, you can access all the widget’s functions.

2. Set The User

Set userId before start the chat, this is mandatory.

QMultichannelConsumer(

  builder: (context, QMultichannel ref) {

     return ElevatedButton(

       onPressed: () {

         var username = usernameController.text;

         var displayName = displayNameController.text;

​

         ref.setUser(userId: username, displayName: displayName);

       },

       child: const Text('Login'),

     );

  },

);

3. Get Login Status

Use this getter to check whether the user has logged in or not.

QMultichannelConsumer(

    builder: (_, QMultichannel ref) {

     var isLoggedIn = ref.account.hasValue;

     // Check whether user already logged in or not

     return Container();

    },

);

4. Start Chat

Use this function to start a chat

QMultichannelConsumer(

   builder: (_, QMultichannel ref) {

     // Use `initiateChat()` here

     ref.initiateChat();

     return Container();

   },

);

5. Clear User

Use this function to clear the loged-in users.

QMultichannelConsumer(

  builder: (_, QMultichannel ref) {

     // Use `clearUser()` here

     ref.clearUser();

     return Container();

  },

);

6. Hide system message

Configure system message visibility by providing parameter when initiating multichannel widget

QMultichannelProvider(

  appId: YOUR_APP_ID,

  // Whether to hide system message or not

  hideSystemUI: true,

  builder: (context) {

    return MaterialApp(

      home: Home(),

    );

  },

);

Customization

We provide several functions to customize the User Interface.

1. Config

Use this method to configure the widget properties.

Channel Id is an identity for each widget channel. If you have a specific widget channel that you want to integrate into the mobile in-app widget, you can add your channel_id when you do initiateChat . You can get your list of channel id for the widget from:

• Go to the Integration menu on the left bar
• Look for Qiscus Widget
• Select Qiscus Widget channel that you want to integrate
• Spot the channel_id in array data

Example to custom the config:

QMultichannelProvider(

  appId: 'YOUR_APP_ID',

  baseUrl: 'your base url here',

  avatar: QAvatarConfig.enabled(),

  channelId: 'your channel id from multichannel dashboard',

  hideEventUI: false,

  subtitle: QSubtitleConfig.editable('custom subtitle here'),

  title: 'custom title here',

  theme: QAppTheme(

    baseColor: Color.fromARGB(255, 249, 249, 249),

    navigationColor: Color.fromARGB(255, 85, 178, 154),

    navigationTitleColor: Color.fromARGB(255, 255, 255, 255),

    systemEventTextColor: Color.fromARGB(255, 255, 255, 255),

    rightBubbleColor: Color.fromARGB(255, 85, 178, 154),

    rightBubbleTextColor: Color.fromARGB(255, 255, 255, 255),

    leftBubbleColor: Color.fromARGB(255, 244, 244, 244),

    leftBubbleTextColor: Color.fromARGB(255, 102, 102, 102),

    timeLabelTextColor: Color.fromARGB(255, 123, 123, 123),

    timeBackgroundColor: Color.fromARGB(0, 0, 0, 0),

    emptyTextColor: Color.fromARGB(255, 153, 153, 153),

    emptyBackgroundColor: Color.fromARGB(255, 249, 249, 249),

    sendContainerColor: Color.fromARGB(255, 255, 255, 255),

    sendContainerBackgroundColor: Color.fromARGB(255, 250, 250, 250),

    fieldChatBorderColor: Color.fromARGB(255, 227, 227, 227),

    fieldChatTextColor: Color.fromARGB(255, 51, 51, 51),

  ),

  builder: (context) {

    return MaterialApp(

      home: _buildNavigator(),

    );

  },

);

2. Color

Use this method to customize the widget color according to your application.

Push Notification

You can follow these steps to set push notifications using Flutter:

1. Register Your FCM Token to Qiscus Omnichannel dashboard,
2. Install/setup Firebase messaging on flutter project by following this guide,
3. Register device token using setDeviceId(your_device_token) method from Qiscus Omnichannel widget for flutter before calling initiateChat()

QMultichannelConsumer(

    builder: (_, QMultichannel ref) {

        // Provide your device token here

        ref.setDeviceId(your_device_id);

        ref.initiateChat();

    },

);

How to run the example

1. Get your APPID

• Go to Qiscus Omnichannel Chat page to register your email
• Log in to Qiscus Omnichannel Chat with yout email and password
• Go to ‘Setting’ menu on the left bar
• Look for ‘App Information’
• You can find APPID in the App Info

2. Activate Qiscus Widget Integration

• Go to ‘Integration’ menu on the left bar
• Look for ‘Qiscus Widget’
• Slide the toggle to activate the Qiscus widget

3. Run flutter pub get

After cloning the example, you need to run this code to install all C_ocoapods_ dependencies needed by the Example

flutter pub get

4. Set YOUR_APP_ID in the Example

Open example/lib/main.dart . Replace the YOUR_APP_ID at line 19 with your appId.

QMultichannelProvider(

  appId: 'YOUR_APP_ID',

  builder: (context) {

  return MaterialApp(

    home: _buildNavigator(),

  );

});

5. Start Chat

The Example is ready to use. You can start to chat with your agent from the Qiscus Omnichannel Chat dashboard.

Security in Qiscus widget

Maintaining the security of sensitive information exchanged between businesses and customers is of utmost importance. The Enhance Conversation Security feature from Qiscus aims to increase the security of conversations that initiate from the Widget channel.

Enabling this feature triggers the automatic creation of a new chat room whenever a customer uses a different device or browser to send messages to your Widget channel. As a result, customers using distinct devices or browsers will be unable to access the conversation history. However, you must understand that enabling this feature could potentially lead to an increase in your total count of Monthly Active Users (MAU).

You can enable this feature via the Settings menu on each Widget channel.

Once you enabled this feature, there will be a Secure icon on the Chat & Customer Info page.

When you add a new Qiscus Widget channel, you are required to agree to the Terms of Conditions that have been provided and the Enhance Conversation Security feature will be automatically enabled. But you can disable this feature afterwards via the Settings menu.