How to integrate YourGPT Chatbot widget in a flutter application

Integrate AI-powered chatbot functionality into your Flutter applications with the YourGPT Flutter SDK. This comprehensive guide walks you through installation, configuration, and implementation of the YourGPT chatbot widget in your Flutter mobile apps.

What is YourGPT Flutter SDK?

The YourGPT Flutter SDK is a lightweight, easy-to-integrate package that brings intelligent AI chatbot capabilities to your Flutter applications. Whether you're building customer support features, interactive assistants, or conversational interfaces, this SDK provides a seamless integration experience for both Android and iOS platforms.

Prerequisites

Before you begin, ensure you have:

• Flutter SDK installed on your development machine

• A YourGPT account with a widget UID (sign up here)

• Basic knowledge of Flutter development

• Android Studio or Xcode for platform-specific configurations

Installation Steps

Add this to your package's pubspec.yaml file:

dependencies:
  yourgpt_flutter_sdk: ^1.0.0
  webview_flutter: ^4.4.2

Then run:

flutter pub get

Permissions

Android:

Add internet permission to android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

iOS:

No permissions needed.

Steps

To use a Chatbot widget in your flutter application, follow the below steps-:

1: Update your Main.dart file

The recommended way to display the YourGPT chat is in a bottom sheet. This provides a native mobile experience with swipe-to-dismiss functionality.

import 'package:yourgpt_flutter_sdk/yourgpt_flutter_sdk.dart';

// Show chatbot in a bottom sheet (recommended)
YourGPTChatScreen.showAsBottomSheet(
  context: context,
  widgetUid: 'your-widget-uid', // Required: Your YourGPT widget UID
);

Wrap the above code inside a function and call that function on any event like press button

Alternative: Full Screen Usage

You can also use the widget in full-screen mode if needed:

import 'package:yourgpt_flutter_sdk/yourgpt_flutter_sdk.dart';

// Full-screen navigation (alternative approach)
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => Scaffold(
      body: SafeArea(
        child: YourGPTChatScreen(
          widgetUid: 'your-widget-uid',
        ),
      ),
    ),
  ),
);

Configuration

The YourGPTChatScreen only requires your widget UID:

YourGPTChatScreen.showAsBottomSheet(widgetUid: "your-widget-uid")

Demo Screenshots

Here's how the YourGPT chatbot looks in action:

Github Link

https://github.com/YourGPT/yourgpt-widget-sdk-flutter