In‑App Chat Widget (Flutter) — Quick Start

This guide shows how to embed the klink.cloud Web Chat Widget inside your iOS/Android Flutter app using webview_flutter.

Replace YOUR_SCID_HERE with the scId from klink.cloud → Settings → Message Integration → Web Chat Widget → Install Code.

1) Choose a widget URL (3 UI options)

Pick the design that fits your mobile app:

  • Show Header https://chat.klink.cloud/app/index.html?scId=YOUR_SCID_HERE&showHeader=true

  • Hide Header https://chat.klink.cloud/app/index.html?scId=YOUR_SCID_HERE&showHeader=false

  • Chat Bubble Widget https://chat.klink.cloud/app/index.html?scId=YOUR_SCID_HERE&view=widget

2) Add dependencies

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.8.0
  webview_flutter_android: ^3.16.0
  webview_flutter_wkwebview: ^3.13.0

Run:

flutter pub get

3) iOS & Android minimal setup

Android → android/app/src/main/AndroidManifest.xml

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

iOS → ios/Runner/Info.plist (only if your chat needs camera/mic)

<key>NSCameraUsageDescription</key>
<string>Camera access is required to share images via chat.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for voice messages.</string>

4) Drop‑in WebView widget

Create lib/klink_chat.dart and paste:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class KlinkChat extends StatelessWidget {
  const KlinkChat({super.key, required this.url});
  final String url; // one of the 3 URLs above

  @override
  Widget build(BuildContext context) {
    final controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(url));

    return WebViewWidget(controller: controller);
  }
}

5) Where to add it (developer‑friendly)

Use the widget on any screen or inside a bottom sheet.

A. Full‑screen chat page

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (_) => const Scaffold(
      appBar: AppBar(title: Text('Support')),
      body: KlinkChat(
        url: 'https://chat.klink.cloud/app/index.html?scId=YOUR_SCID_HERE&showHeader=false',
      ),
    ),
  ),
);

B. Slide‑up sheet (keeps user in current screen)

showModalBottomSheet(
  context: context,
  useSafeArea: true,
  isScrollControlled: true,
  builder: (_) => SizedBox(
    height: MediaQuery.of(context).size.height * 0.85,
    child: const KlinkChat(
      url: 'https://chat.klink.cloud/app/index.html?scId=YOUR_SCID_HERE&view=widget',
    ),
  ),
);

6) (Optional) Pass user identity

If your workspace enables identifying app users, append params you support (example):

...&userName=John&[email protected]

For signed SSO (HMAC/TTL), follow your workspace’s security instructions and add the signature/timestamp params you require.

7) Quick checklist

That’s it. Your Flutter app now embeds the klink.cloud chat widget with your chosen design (header on/off or chat bubble).

Last updated