LangChat Web SDK

A standalone chat widget that can be integrated into any website.

Usage

In Vue project

npm i @langchat/web-sdk

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import '@langchat/web-sdk/style.css'
import LangChatBot from '@langchat/web-sdk'

onMounted(() => {
  new LangChatBot({
    apiUrl: 'https://your-api-url/chat',
    token: 'your-api-token',
    layout: 'widget', // or 'fullpage'
    position: 'bottom-right', // or 'bottom-left'
    theme: {
      primary: '#3B82F6',
      secondary: '#1D4ED8'
    },
    container: '#chat-container' // 可选：指定挂载容器
  });
})
</script>

<template>
  <!-- 如果需要指定容器 -->
  <div id="chat-container" style="position: relative; height: 600px;"></div>
</template>

Preview

1. 小组件模式，layout='widget'

1. 窗口模式/iframe模式，layout='fullpage'

In Html project

1. Include the required files in your HTML:

<link rel="stylesheet" href="https://path-to-your-cdn/style.css">
<script src="https://path-to-your-cdn/index.js"></script>

2. Initialize the chat widget:

<!-- 可选：指定挂载容器 -->
<div id="chat-container" style="position: relative; height: 600px;"></div>

<script>
  new LangChatBot({
    apiUrl: 'https://your-api-url/chat',
    token: 'your-api-token',
    layout: 'widget', // or 'fullpage'
    position: 'bottom-right', // or 'bottom-left'
    theme: {
      primary: '#3B82F6',
      secondary: '#1D4ED8'
    },
    container: '#chat-container' // 可选：指定挂载容器
  });
</script>

Configuration Options

• apiUrl (optional): The URL for your chat API endpoint
• token (optional): Authentication token for API requests
• title (optional): Chat window title
• layout: 'widget' (floating chat) or 'fullpage' (centered chat page)
• position: 'bottom-right' or 'bottom-left' (only for widget layout)
• container (optional): Specify a mount container for the chat widget. Can be a CSS selector string or HTMLElement
• theme: Customize colors
  • primary: Primary color for buttons and accents
  • secondary: Secondary color for hover states

Container Requirements

When using a custom container:

For Widget Layout

#chat-container {
  position: relative;
  min-height: 40rem; /* 建议最小高度 */
  min-width: 24rem;  /* 建议最小宽度 */
}

For Fullpage Layout

#chat-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
}