Flutter is Google’s new open-source technology for creating native Android and iOS apps with a single codebase. Since it has ready-made and custom widgets, it’s easy to build the UI.

There are 2 phases to create flutter chatbot

Step 1: Setup an account in Kommunicate

Login to your Kommunicate dashboard and navigate to the Bot Integration section.

If you do not have an account, you can create one here for free.

Locate the Kompose section and click on Integrate Bot.

Now, set up your bot by providing bot name, bot language, human handoff setting, and finish the bot setup.

You can check your newly created bot in the below section:

  • Dashboard →Bot Integration → Manage Bots:

Step 2: Create welcome messages & answers for your flutter chatbot

Go to the ‘Kompose – Bot Builder’ section and select the bot you created.

First set the welcome message for your chatbot. The welcome message is the first message that the chatbot sends to the user who initiates a chat.

  • Click the “Welcome Message” section, in the “Enter Welcome message – Bot’s Message” box provide the message your chatbot should be shown to the users when they open the chat and then save the welcome intent.

Once the welcome message creation is completed, the next step is to create answers for your chatbot.

The answers section is where you’ve to add all the user’s messages and the chatbot responses.

  • Go to the “Answer” section, click +Add then give an ‘Intent name’

In the Configure user’s message section – you need to mention the phrases that you expect from the users that will trigger. 

 Configure bot’s reply section – you need to mention the responses (Text or as Rich messages) the chatbot will deliver to the users for the particular user’s message. You can add any number of answers and follow-up responses for the chatbot.

You can also refer to this blog for Kompose chatbot integration with Kommunicate.

Step 3: How to activate the chatbots

Once you create a bot then you can set it as a default bot in the conversation routing rules section as shown below.

  • Click on ⚙️Settings >> Conversation rules >> Routing rules for bots >> Then click on bot like below and select your bot

Now, this bot will reply in all the conversations.

Step 4: Install Kompose Chatbot into Flutter App

Kommunicate Flutter SDK allows you to add customizable live chat to your applications. It supports many hybrid platforms that are currently in the market. It provides a fast and expressive way to build native apps on both IOS and Android.

Prerequisites

Apps using Kommunicate can target Xcode 11 or later and AndroidX is required.

Add Flutter SDK to your app
  1. Add the below dependency in your pubspec.yaml file:
dependencies:
# other dependencies
kommunicate_flutter: ^1.1.6
Install the package as

flutter pub get

  1. Import kommunicate_flutter in your .dart file to use the methods from Kommunicate:
1import 'package:kommunicate_flutter/kommunicate_flutter.dart';

For iOS, navigate to your App/iOS directory from the terminal and run the below command:1pod install

Note: Kommunicate iOS requires min iOS platform version 10 and uses dynamic frameworks. Make sure you have the below settings at the top of your iOS/Podfile:

1platform :ios, '10.0' 2use_frameworks!
Get your Application ID

You can get the Application ID from the install section Kommunicate Dashboard.

  • Go to ⚙️Settings >> INSTALL >> Install >> Your App ID:

Launch conversation

Kommunicate provides build conversation function to create and launch conversation directly saving you the extra steps of authentication, creation, initialization, and launch. You can customize the process by building the conversation object according to your requirements.

To launch the conversation you need to create a conversation object. This object is passed to the build conversation function and based on the parameters of the object the conversation is created/launched.

Below is an example to launch a conversation.

dynamic conversationObject = {
'appId': '',// The APP_ID obtained from kommunicate dashboard.
};
KommunicateFlutterPlugin.buildConversation(conversationObject) .then((clientConversationId) { print("Conversation builder success : " + clientConversationId.toString()); }).catchError((error) { print("Conversation builder error : " + error.toString()); });

That’s all! Run the Flutter app and chat with the chatbot. 

You can easily integrate the Kompose chatbot into Flutter apps in a few simple steps.

In case you need more information, you can check out the Kommunicate documentation.

Kommunicate Sample application: Download the sample app from here which includes ready-to-use Kommunicate Flutter SDK.

Go ahead and explore the Flutter integration with the Kompose chatbot.

Suggested Read:  Integrate Dialogflow with Your Flutter App

Suggested Read: Connect Chatbots with Webhooks


Kommunicate is a modern customer messaging suite to add live chat and chatbot to your websites and social media pages. You can signup for free here and start delighting your customers right away.


Author

Avinash is a passionate marketer with a proven track record of quickly understanding a marketing campaign's mission, vision, and objective and then communicating this to potential customers. He has an in-depth knowledge of all digital channels. Whenever he is not marketing, you can find him reading books, swimming or cooking.

Write A Comment