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.
Follow these steps to create a 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 the bot name, bot language, and 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
Add the below dependency in your pubspec.yaml file:
dependencies:
other dependencies
kommunicate_flutter: ^1.1.6
Install the package as
flutter pub get
Import kommunicate_flutter in your .dart file to use the methods from Kommunicate:
import '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:
platform :ios, '12.0' use_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.
Top comments (0)