How to Customize the Kommunicate Flutter Plugin

To do this, you need to have a Kommunicate account.

If you don’t have one yet, sign up for free using the link given in the description and try it out.

If you would like to have a customized demo about our integrations, generative AI-powered chatbot, or any other use case, you can book a free demo using the link in the description.

To set up customization in Flutter, we need to complete some initial steps for Android and iOS.

First, we’ll start with Android.

Go to the Flutter section on the documentation page, click Customization, and then click Android.

Here, you’ll see that there is one file we need to download and paste into the specified directory.

We’ll first paste this file into the directory.

Here, we have the sample app. Let’s check the sample app first.

As you can see, there are a couple of buttons here. We are going to remove these buttons and add a refresh button.

There is also a Logout option. We’ll change that to Rate Conversation.

Now, click the back button and log out.

Next, we’ll complete the setup.

Go to Android, then App, then Src, then Main.

Inside Main, we need to create one directory called Assets.

If the Assets directory is already available, you don’t need to create it. But if it is not available, you need to create it.

Inside Assets, create one file called appLogicSettings.json.

After creating the file, go back to the documentation and click Download the Settings.

From here, you’ll get the code. Copy the code and paste it into the appLogicSettings.json file.

Once you paste the code, you can start customization directly through the Android customization panel.

In Android customization, we’ll look at the customization options available for attachments.

Go to the attachment option inside the appLogicSettings.json file.

Here, we are going to remove all the buttons from the bottom by setting them to false.

Once everything is set to false, save the file.

We are also going to add a refresh button.

Look for the refresh option. Here, the refresh option is set to false. We’ll change it to true.

There is also a Rate Conversation menu option. The Rate Conversation menu option is already set to true inside appLogicSettings.json, so we’ll leave it as true.

After making these customizations, save the file.

Now, I’m going to run the same project from Android Studio.

Here, you can see that we now have the refresh button. We also have the Rate Conversation option, and the bottom attachment options have been removed.

The color has also changed for the send button.

You can customize the send button as well by checking the send button customization section in the Android customization documentation. Then, you can update it inside the appLogicSettings.json file.

Now, let’s set up customization for iOS.

To do this, we need to open the iOS project inside Xcode.

To open the project in Xcode, go to the iOS folder, right-click, and click Open in Xcode.

If this option is not present, click Reveal in Finder, open the iOS folder, and click Runner.xcworkspace.

Inside Xcode, click Runner.

Here, we need to create a KommunicateWrapper.swift file.

To create this file, copy the name KommunicateWrapper.

In Runner, right-click and click New File from Template.

Select Swift File, click Next, enter the name KommunicateWrapper, and click Create.

You’ll get an option to create a bridging header. Click Create Bridging Header.

After creating this, you may see that some changes have happened inside the build settings.

We’ll check whether the customizations are working properly.

Here, Generate Swift Asset Symbol Extension is set to Yes. We need to change it to No.

Since Runner Bridging Header is not required here, we’ll set it to No.

Next, check the Swift language version. We need to use Swift 5.

After completing this setup, go back to KommunicateWrapper.

Now, return to the documentation and click KommunicateWrapper.

Copy the code from the documentation and paste it here.

After pasting the code, you can see that some customizations are already added.

This is where you need to add your customizations.

For now, we’ll remove the existing customizations and add the ones we need.

First, let’s complete the setup.

Copy the import Runner line and go to AppDelegate.m.

Paste it there.

Then, paste the required piece of code inside the file.

If AppDelegate super shows some errors, check the build settings again.

Make sure Generate Swift Extension Symbols is set correctly.

Now, click Product and clear all issues.

Once this is done, try to build the application.

Currently, there is no customization added. We’ll add the customization after making the build.

Click Login as Visitor.

Then click Open Conversation and start a new conversation.

Now, we’ll customize the UI.

We’ll try to remove all the attachment options. We’ll also remove the FAQ button from both the conversation view screen and the conversation list screen.

To do this, go to KommunicateWrapper.

Inside this file, you can see useCustomization, which is invoked inside didFinishLaunchingWithOptions in AppDelegate.

This is used for applying custom configuration.

Now, go to the iOS customization section in the documentation.

Here, you’ll see many customization options available.

We want to remove some options, so we’ll use the required configuration.

We don’t need the FAQ buttons, so we’ll remove the FAQ button from both screens.

Now, let’s run the application again with the new configuration.

Click Open Conversations.

Here, we already created one conversation.

As you can see, the attachment options have been removed, and the FAQ button has also been removed.

The customizations we added are now applied.

You can follow the other customization options if required for your application and update them from the useCustomization section.

‍