> For the complete documentation index, see [llms.txt](https://docs.klink.cloud/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.klink.cloud/getting-started/setup-channels/live-chat/in-app-chat-for-mobile-app.md).

# In‑App Chat for Mobile App

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**.

<figure><img src="/files/Sv6G5Vtqo8EFHGpdGMLx" alt=""><figcaption></figcaption></figure>

### 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`

```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`

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

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

```xml
<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:

```dart
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**

```dart
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)**

```dart
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&userEmail=john@klink.cloud
```

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

### 6.1) (Optional) Prefill a message with `defaultMessage`

You can prefill the chat input with a default message by passing a query parameter called `defaultMessage` in the widget URL.

#### Parameter

* **Name:** `defaultMessage`
* **Type:** `String`
* **Description:** The message you want to prefill (**must be URL-encoded**)

#### How it works

1. Add `defaultMessage` to the widget URL as a query parameter.
2. URL-encode the message (spaces, line breaks, and special characters).
3. When the chat loads, the text will appear automatically in the message/input field.

#### Example (URL-encoded)

```
https://chat.klink.cloud/app/index.html?scId=YOUR_SCID_HERE&showHeader=false&defaultMessage=Order%20number%3A%203388338%0AName%3A%20John%0APhone%3A%2093939838838
```

This prefills the input as:

```
Order number: 3388338
Name: John
Phone: 93939838838
```

Tips

* Use `%0A` for a new line.
* Always encode before appending (otherwise the URL can break or truncate the message).

### 7) Quick checklist

* [ ] Replace `YOUR_SCID_HERE` with your own `scId`
* [ ] Confirm `INTERNET` permission (Android)
* [ ] Add camera/mic usage descriptions if needed (iOS)
* [ ] Test both light/dark modes and rotation

***

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