paylinker-chatbot-sdk

v0.1.0

Published

19 days ago

PayLinker Chatbot SDK

0High
0Medium
0Low

kubor

paylinker chatbot sdk ai rag

PayLinker Chatbot SDK

PayLinker 商户专用的官方智能客服 Chatbot SDK。只需几行代码即可将强大的 AI 客服助手嵌入到你的网站或 Web 应用中。

License Version Downloads

功能特性

🤖 AI 驱动：基于你的商户知识库，提供上下文相关的回答。
🌍 全球化就绪：开箱即用的多语言支持。
🎨 可定制：适配你的品牌视觉（浅色/深色模式）。
🚀 轻量：CDN 版本零依赖。
⚡ 极速接入：2 分钟内完成接入。

安装

你可以通过脚本标签（CDN）直接使用，或通过 NPM 作为模块安装。

方式 1：CDN（最简单）

将以下代码放到 <body> 标签末尾：

<script src="https://cdn.jsdelivr.net/npm/paylinker-chatbot-sdk/dist/chatbot-sdk.umd.js"></script>
<script>
  PayLinkerChatbot.init({
    appId: "YOUR_MERCHANT_APP_ID", // 替换为你的 PayLinker App ID
    theme: "auto",                 // 可选: 'auto', 'light', 'dark'
    mode: "floating"               // 可选: 'floating', 'embedded'
  });
</script>

TypeScript 配置类型（CDN 与 React 通用）：

export interface BrandConfig {
  name?: string;
  headerTitle?: string;
  headerSubtitle?: string;
  greeting?: string;
  poweredByText?: string;
  poweredByName?: string;
  poweredByUrl?: string;
  logoSvg?: string;
  logoUrl?: string;
  logo?: React.ReactNode;
}

export interface CopyOverrides {
  en?: Partial<{
    greeting: string;
    headerTitle: string;
    headerSubtitle: string;
    placeholder: string;
    closeChatLabel: string;
    errorMessage: string;
    poweredBy: string;
  }>;
  zh?: Partial<{
    greeting: string;
    headerTitle: string;
    headerSubtitle: string;
    placeholder: string;
    closeChatLabel: string;
    errorMessage: string;
    poweredBy: string;
  }>;
}

export interface ThemeColors {
  accent?: string;
  accentHover?: string;
  accentSoft?: string;
}

export interface ChatbotProps {
  appId: string;
  theme?: 'auto' | 'light' | 'dark';
  mode?: 'floating' | 'embedded';
  locale?: 'auto' | 'en' | 'zh';
  brand?: BrandConfig;
  copy?: CopyOverrides;
  colors?: ThemeColors;
}

方式 2：NPM 模块（适用于 React/Vue/Angular）

安装包：

npm install @paylinker/chatbot-sdk

在 React 中使用：

import { Chatbot } from '@paylinker/chatbot-sdk';
import '@paylinker/chatbot-sdk/dist/style.css'; // 记得引入样式

export default function App() {
  return (
    <div className="App">
      <Chatbot
        appId="YOUR_MERCHANT_APP_ID"
        theme="auto"
      />
    </div>
  );
}

在 Vue (3.x) 中使用：

<script setup>
import { onMounted } from 'vue';
import { PayLinkerChatbot } from '@paylinker/chatbot-sdk';
import '@paylinker/chatbot-sdk/dist/style.css'; // 记得引入样式

onMounted(() => {
  PayLinkerChatbot.init({
    appId: "YOUR_MERCHANT_APP_ID",
    theme: "auto",
    brand: {
      name: "My Shop Helper"
    }
  });
});
</script>

<template>
  <div>
    <!-- Chatbot 会自动挂载到 body，无需在此处放置容器 -->
  </div>
</template>

配置项

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | appId | string | 必填 | 来自 PayLinker 控制台的商户唯一标识。 | | theme | 'auto' \| 'light' \| 'dark' | 'auto' | 配色方案，'auto' 跟随系统偏好。 | | mode | 'floating' \| 'embedded' | 'floating' | 'floating' 在角落显示气泡；'embedded' 填充容器。 | | locale | 'auto' \| 'en' \| 'zh' | 'auto' | 语言设置，'auto' 跟随浏览器语言。 | | brand | BrandConfig | undefined | 品牌文案与 Logo 配置（标题、欢迎语、PoweredBy 等）。 | | copy | CopyOverrides | undefined | 覆盖默认中英文文案（按语言分组）。 | | colors | ThemeColors | undefined | 主题色覆盖（accent/hover/soft）。 |

支持

如需文档与支持，请在 PayLinker 开发者门户验证你的集成。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

PayLinker Chatbot SDK

功能特性

安装

方式 1：CDN（最简单）

方式 2：NPM 模块（适用于 React/Vue/Angular）

配置项

支持