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() — panel control.
• 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('open' | 'close', cb) — subscribe; returns an unsubscribe function. See Events.
• destroy() — unmount (the loader script stays for a fast re-init).

Config

appId is required. Optional: serverUrl, mode (floating | inline), container, customizations, allowedOrigins, debug, externalUserId, scriptUrl.

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.