# Mobile apps

Customers can chat with you from inside your own app. The native SDKs open a chat screen in the app, keep the conversation in sync and receive push notifications. Their messages land in the same inbox as your website visitors. This page explains how the dashboard side works; the SDK pages cover the code.

## How an app connects

A mobile app is attached to a **website** (a site) in **Support → Channels**. It shares that site's settings, such as office hours and the AI assistant, and its conversations belong to that site for reports, distribution rules and automation.

Browsers prove where they come from with their `Origin`, which must match the site's domain or allowed origins. An app has no origin, so it sends an **app key** instead:

- Each app gets its own key, which starts with `hak_`. You pass it to the SDK together with the site id.
- The key ships inside your app, like the site id. It is scoped to one site and you can revoke it, so treat it as public but not as something to spread around.
- A key never gives access to your data or the REST API. Server calls use API keys ([Authentication](https://hatang.dev/docs/guides/getting-started/authentication.md)).

## Create an app key

1. Go to **Support → Channels → Add channel → Mobile app**.
2. If the business has several sites, pick the website the app belongs to under **Attach new connections to site**.
3. Fill in the form:

   | Field | Notes |
   |---|---|
   | **App name** | For you, for example `Moc Huong iOS` |
   | **Platform** | iOS, Android, Flutter, React Native or Other |
   | **Bundle ID / package (optional)** | One per line, for example `com.example.app`. A reminder only; it is not enforced yet |

4. Click **Create app key**. The key is shown **once** on the next page, next to an **Initialise the SDK** snippet. Copy it into your app's configuration.

You can also open a website in **Support → Channels**, switch to its **Apps** tab and click **Add app**.

## Configure the SDK

Every SDK takes the same two values: the site id (`site_...`) and the app key (`hak_...`). For example, in Flutter:

```dart
await HatangChat.configure(
  siteId: "site_...",
  appKey: "hak_...",
);
```

Follow the guide for your platform: [Flutter](https://hatang.dev/docs/guides/sdks/flutter.md), [iOS](https://hatang.dev/docs/guides/sdks/ios.md), [Android](https://hatang.dev/docs/guides/sdks/android.md) or [React Native](https://hatang.dev/docs/guides/sdks/react-native.md). The [SDK overview](https://hatang.dev/docs/guides/sdks/overview.md) lists every SDK with its supported versions.

Two topics apply to every app:

- **Identify signed-in users** so the same person sees the same history on the web and in the app: [Identity verification](https://hatang.dev/docs/guides/support/web-widget/identity-verification.md).
- **Push notifications** go through your own Firebase project. Upload its service account once per website, in the website's **Apps** tab under **Push notifications (Firebase)**; the key is shared by every app of that site. See [Push notifications](https://hatang.dev/docs/guides/sdks/push-notifications.md).

## The app's page

Each app has its own page under **Support → Channels**. It shows the platform, bundle IDs, the start of the key, when it was created, when the app last connected and how many devices are registered for push. Its status is **Not used yet** until the app connects for the first time, then **Active**, and **Off** once the key is revoked.

## Revoke or replace a key

Click **Revoke** on the app's page when a key leaks or a build should stop connecting. Within about a minute every install that uses the key is refused with `app_key_revoked` (HTTP 403), and the SDK cannot start a new session until you ship a build with a new key. To rotate:

1. Create a new app key (a second app for the same website).
2. Release a build that uses it.
3. Revoke the old key once few users still run the old build, then **Delete** it.

> **Caution**
>
> Revoking cuts off every install that still uses the key, including people who have not updated your app. Release the new build first.

## Troubleshooting

| Symptom | Cause | Fix |
|---|---|---|
| `invalid_app_key` (401) | The key is mistyped or belongs to another site | Copy the site id and the key from the same website |
| `app_key_revoked` (403) | The key was revoked | Ship a build with a new key |
| `product_disabled` (403) | The Support module is off | An owner or admin turns it on ([Modules](https://hatang.dev/help/getting-started/modules)) |
| The app stays **Not used yet** | The app has not bootstrapped with this key yet | Run the app and open the chat once; check the SDK logs |
| No push notifications | No Firebase service account on the website, or the device did not register | Upload the service account in the **Apps** tab; check [Push notifications](https://hatang.dev/docs/guides/sdks/push-notifications.md) |

## Next steps

- [SDK overview](https://hatang.dev/docs/guides/sdks/overview.md)
- [Web widget configuration](https://hatang.dev/docs/guides/support/web-widget/configuration.md): the settings your app shares with the website
- [Realtime](https://hatang.dev/docs/guides/support/realtime.md): what the SDKs do under the hood

Source: https://hatang.dev/docs/guides/support/mobile-apps