Floating launcher

The floating launcher is a pill in the corner of the screen. Tap it and a sheet slides up with the menu your workspace configured: find answers in the knowledge base, send a message that becomes a ticket, suggest an improvement, and any links you added. No live chat; for that, use the chat screen.

It is the same feature as the web launcher. The label, colour, position, menu items, and which of the knowledge base and tickets are on all come from Customer Support → Floating Launcher, and the ticket lands on the same support inbox.

Install

The launcher ships in the same package as the chat SDK:

npm install @clientsphere/support-native

socket.io-client is only needed for the chat side; the launcher makes plain HTTP calls.

Minimal app

import AsyncStorage from '@react-native-async-storage/async-storage';
import { LauncherProvider, SupportLauncher } from '@clientsphere/support-native';
 
export function App({ user }) {
  return (
    <LauncherProvider
      baseUrl="https://your-workspace.clientsphere.io"
      companyId="your-workspace-id"
      storage={AsyncStorage}
      identity={user ? { email: user.email, name: user.name } : null}
    >
      <YourNavigator />
      <SupportLauncher />
    </LauncherProvider>
  );
}

Put SupportLauncher last inside a full-screen parent so the pill floats over everything. Find the workspace id under Customer Support → Floating Launcher; a Support Hub widget id works too, as widgetId.

What the sheet shows

Home opens with a brand-coloured header and a greeting, then:

Menu items follow the web launcher's rules exactly: a link with no URL is hidden, knowledge base and ticket rows disappear when the feature is off, and a ticket row is added if tickets are on but the workspace never listed one.

The header colour is the launcher colour. The sheet follows the launcher's theme setting, or the phone's appearance when the setting is "auto".

Props

Articles

Articles come back as the HTML written in the workspace editor. By default the launcher flattens it to readable text, with headings, paragraphs and bullet lists preserved, so nothing untrusted is rendered as markup. To show full formatting, pass renderArticle and hand the HTML to a sanitising renderer such as react-native-render-html.

Reading an article in the app counts as a read on the help centre, the same as the web launcher.

Using the hooks and client directly

const { config, items, replyTime, client, open, setOpen } = useLauncher();
 
const home = await client.kbHome();               // categories and popular articles
const cat = await client.kbCategory(id);
const article = await client.kbArticle(id);
const hits = await client.kbSearch('refunds');
await client.submitTicket({ subject, message, email, name });
await client.submitFeatureRequest({ productCategory, urgency, title, description });

items is the menu after visibility rules. replyTime is the sentence the message card shows. Every failure is a SupportApiError; see Lifecycle and limits.

Limits

Launcher or chat?

Both can live in one app. They do not share state; identify the user in both if you use both.