# 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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.klink.cloud/getting-started/setup-channels/live-chat/in-app-chat-for-mobile-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.