Configuration

Configuration

Configuring Ebbot Flutter UI is done by passing a EbbotConfiguration instance to the the EbbotFlutterUi widget.

The Ebbot Flutter UI widget has the following configuration options:

  • change the underlying theme in flyer-chat

  • passing user specific attributes

  • setting the cloud environment the App is running against

  • adding a callback handler for certain events

  • controlling certain parts of the application through an api controller

Styling and theming

As Ebbot Flutter UI is using the flyer-chat component under the hood, styling it is done by configure a theme and passing it in the configuration builder like so:

var config = EbbotConfigurationBuilder()
    .theme(const DarkChatTheme())
    .build();

Consult the flyer-chat themeing guide for more in depth information on how to style the chat widget.

Passing custom user specific attributes

To feed the bot with more context about the user, you can pass user attributes in the configuration file, the allowed type is Map<String, dynamic>:

var userAttributes = {
      'name': 'John Doe',
      'email': 'john@doe.com',
      'age': 30,
      'height': 180.0,
      'isPremium': true,
      'lastLogin': DateTime.now().millisecondsSinceEpoch
    };
var config = EbbotConfigurationBuilder()
      .userAttributes(userAttributes)
      .build();

Configuring the cloud environment

Configuring the cloud environment is done by passing a configuration property to the environment builder function.

Available configuration options are:

Enter pressed behaviour

To configure what should happen when enter on the keyboard has been pressed, you can pass the following options:

var ebbotBehaviourInput = EbbotBehaviourInputBuilder()
      .enterPressed(EbbotBehaviourInputEnterPressed.sendMessage)
      .build();

Adding a callback handler

Sometimes, it is useful to know what is happening in the widget and when it is happening. To address this, you can pass a callback object when configuring the app:


// Callback functions


Future<void> onLoadError(EbbotLoadError error) async {
  print(
      "CALLBACK: onLoadError: ${error.type}, ${error.stackTrace} caused by ${error.cause}");
}

Future<void> onLoad() async {
  print("CALLBACK: onLoad");
}

Future<void> onRestartConversation() async {
  print("CALLBACK: onRestartConversation");
}

Future<void> onEndConversation() async {
  print("CALLBACK: onEndConversation");
}

Future<void> onMessage(String message) async {
  print("CALLBACK: onMessage: $message");
}

Future<void> onBotMessage(String message) async {
  print("CALLBACK: onBotMessage: $message");
}

Future<void> onUserMessage(String message) async {
  print("CALLBACK: onUserMessage: $message");
}

Future<void> onStartConversation(String message) async {
  print("CALLBACK: onStartConversation");
}

// Callback configuration object

 var callback = EbbotCallbackBuilder()
      .onLoadError(onLoadError)
      .onLoad(onLoad)
      .onRestartConversation(onRestartConversation)
      .onEndConversation(onEndConversation)
      .onMessage(onMessage)
      .onBotMessage(onBotMessage)
      .onUserMessage(onUserMessage)
      .onStartConversation(onStartConversation)
      .build();

Callback function descriptions

API Controller

In order to communciate with the widget, you can pass an instance of an API controller:

var apiController = EbbotApiController();
var configuration = EbbotConfigurationBuilder()
      .apiController(apiController)
      .build();

[!IMPORTANT] The API controller can only be called once the widget has been fully loaded, which is known when onLoad callback has been invoked or by calling the isInitialized method.

Configuring logging

var logConfiguration = EbbotLogConfigurationBuilder().logLevel(Level.info).enabled(true).build();

Putting everything together

The following is a full fledged example with all configurable options passed to the widget:


Future<void> onLoadError(EbbotLoadError error) async {
  print(
      "CALLBACK: onLoadError: ${error.type}, ${error.stackTrace} caused by ${error.cause}");
}

Future<void> onLoad() async {
  print("CALLBACK: onLoad");
}

Future<void> onRestartConversation() async {
  print("CALLBACK: onRestartConversation");
}

Future<void> onEndConversation() async {
  print("CALLBACK: onEndConversation");
}

Future<void> onMessage(String message) async {
  print("CALLBACK: onMessage: $message");
}

Future<void> onBotMessage(String message) async {
  print("CALLBACK: onBotMessage: $message");
}

Future<void> onUserMessage(String message) async {
  print("CALLBACK: onUserMessage: $message");
}

Future<void> onStartConversation(String message) async {
  print("CALLBACK: onStartConversation");
}

var userAttributes = {
    'name': 'John Doe',
    'email': 'john@doe.com',
    'age': 30,
    'height': 180.0,
    'isPremium': true,
    'lastLogin': DateTime.now().millisecondsSinceEpoch
  };

  var userConfiguration =
      EbbotUserConfigurationBuilder().userAttributes(userAttributes).build();

  var callback = EbbotCallbackBuilder()
      .onLoadError(onLoadError)
      .onLoad(onLoad)
      .onRestartConversation(onRestartConversation)
      .onEndConversation(onEndConversation)
      .onMessage(onMessage)
      .onBotMessage(onBotMessage)
      .onUserMessage(onUserMessage)
      .onStartConversation(onStartConversation)
      .build();

  var ebbotBehaviourInput = EbbotBehaviourInputBuilder()
      .enterPressed(EbbotBehaviourInputEnterPressed.sendMessage)
      .build();
  var behaviour = EbbotBehaviourBuilder().input(ebbotBehaviourInput).build();

  var logConfiguration = EbbotLogConfigurationBuilder().logLevel(EbbotLogLevel.info).enabled(true).build();

  var configuration = EbbotConfigurationBuilder()
      .apiController(apiController)
      .environment(Environment.ovhEUProduction)
      .userConfiguration(userConfiguration)
      .behaviour(behaviour)
      .theme(const DarkChatTheme())
      .callback(callback)
      .logConfiguration(logConfiguration)
      .build();


  class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
            home: Scaffold(
                appBar: AppBar(
                title: Text('Ebbot Chat Example'),
                ),
                body: EbbotFlutterUi(
                  botId: 'your-bot-id')
                  configuration: configuration,
            ),
            );
        }
    }
PreviousGetting Started

Last updated