JavaScript SDK

For build-tool projects, Lane.Chat ships typed npm packages that wrap the same window.laneChat widget contract as the script tag — with real TypeScript types, a programmatic loader, and SSR-safe framework bindings.

Package	What it is	For
@lanechat/js	Typed, SSR-safe core wrapper + loader	Vanilla JS/TS, any framework
@lanechat/react	<LaneChatProvider> + useLaneChat()	React, Next.js, Remix
@lanechat/vue	Vue 3 plugin + useLaneChat()	Vue 3, Nuxt 3

Not using a bundler? The script-tag install is still the simplest path — these packages call the same global under the hood.

Core — @lanechat/js

npm install @lanechat/js

import { LaneChat } from '@lanechat/js'

const lc = LaneChat.init({ appId: 'app_1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d' })
lc.on('open', () => console.log('panel opened'))
lc.identify({ email: '[email protected]', name: 'Jane Doe', plan: 'pro' })
lc.open()

React — @lanechat/react

npm install @lanechat/react

'use client'
import { LaneChatProvider, useLaneChat } from '@lanechat/react'

function Root() {
  return (
    <LaneChatProvider appId="app_1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d">
      <App />
    </LaneChatProvider>
  )
}

function App() {
  const { open, identify } = useLaneChat()
  // after login: identify({ email, name })
  return <button onClick={open}>Need help?</button>
}

Vue — @lanechat/vue

npm install @lanechat/vue

import { createApp } from 'vue'
import { LaneChat } from '@lanechat/vue'

createApp(App).use(LaneChat, { appId: 'app_1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d' }).mount('#app')

<script setup lang="ts">
import { useLaneChat } from '@lanechat/vue'
const { open, identify } = useLaneChat()
</script>

The API

All three packages expose the same surface as the widget's JavaScript API:

• init(config) / provider / plugin — mount the widget. Idempotent; the loader is injected once.
• open() / close() / toggle() / isOpen() / isMounted() — panel control and state.
• show() / hide() — show or hide the floating launcher (the open panel is not affected by hide()).
• unreadCount() — current unread badge count.
• identify(traits) — set visitor identity and custom attributes in place (never remounts). Standard fields (email, name, phone, external_user_id) are promoted to the visitor profile; everything else is stored as a custom attribute visible to agents. See Identifying visitors.
• updateTheme(theme) — runtime theme override.
• on(event, cb) — subscribe; returns an unsubscribe function. Events: open, close, message_sent, message_received, unread_changed, session_loaded. See Events.
• whenReady() — resolves with the raw widget API once loaded (null on SSR or load failure). Core package only.
• destroy() — unmount (the loader script stays for a fast re-init).

Calls made before the widget script has loaded are buffered and replayed once it's ready — no need to await anything for the common path.

Config

appId is required. Optional: mode (floating | inline), container, customizations, allowedOrigins, loadNavScript, externalUserId, scriptUrl (override where the loader script is fetched from — it does not re-point the backend; Lane.Chat is a hosted service).

SSR

The React and Vue bindings are SSR-safe — the widget only mounts in the browser, so the packages are safe to import in Next.js / Nuxt server components. No window access happens during render.