安装并使用 Chat SDK

const cozeWebSDK = new CozeWebSDK.WebChatClient({
  config: {
    // 智能体 ID
    bot_id: '740849137970326****',
    isIframe: false,
    // 给自定义参数赋值并传给对话流
    botInfo: {
      parameters: {
        user_name: 'John'
      }
    }
  },
  auth:  {
      // Authentication methods, the default type is 'unauth', which means no authentication is required; it is recommended to set it to 'token', indicating authentication through PAT (Personal Access Token) or OAuth
    type: 'token',    
     // When the type is set to 'token', it is necessary to configure a PAT (Personal Access Token) or OAuth access token for authentication.
    token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
    // When the access token expires, use a new token and set it as needed.
    onRefreshToken: () => 'pat_zxzSAzxawersAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
  }
});

const cozeWebSDK = new CozeWebSDK.WebChatClient({
  config: {
    type: 'app',          // 应用类型
    isIframe: false,      // 是否在iframe中运行
    appInfo: {            // 应用配置信息
      appId: '744189632066042****',
      workflowId: '744229754050396****',
      parameters: {       // 给自定义参数赋值并传给对话流
        user_name: 'John'
      }
    }
  },
  auth:  {
      // Authentication methods, the default type is 'unauth', which means no authentication is required; it is recommended to set it to 'token', indicating authentication through PAT (Personal Access Token) or OAuth
    type: 'token',    
     // When the type is set to 'token', it is necessary to configure a PAT (Personal Access Token) or OAuth access token for authentication.
    token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
    // When the access token expires, use a new token and set it as needed.
    onRefreshToken: () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
  }
});

<script> 
   const client = new CozeWebSDK.WebChatClient(options); 
   client.destroy(); 
</script>

const cozeWebSDK = new CozeWebSDK.WebChatClient({
  config: {
    botId: '740849137970326****',
    isIframe: false,
  },
  auth:  {
    type: 'token',
    token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
    onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq1Diqjrg****',
  },
  // 配置用户信息
  userInfo: {
      id: '12345',
      url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
      nickname: 'John',
    },
});

// 在WebChatClient参数中，添加ui.base配置
const cozeWebSDK = new CozeWebSDK.WebChatClient({
  config: {
    botId: '740849137970326****',
    isIframe: false,
  },
  auth: {
    type: 'token',
    token: 'pat_zxzSAzxawer234zASNElEGALlq7hcOqMcPFV3wEVDiqjrg****',
    onRefreshToken: async () => 'pat_zxzSAzxawer2OqMcPFV3wEVDiqjrg****',
  },
  // 配置用户信息
  userInfo: {
    id: 'user123',
    url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
    nickname: '樱桃',
  },
  // 配置聊天窗口的整体 UI 效果，包括应用图标、页面布局、语言属性等。
  ui: {
    base: {
      icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
      layout: 'pc',
      zIndex: 1000,
    }
  },
});

const cozeWebSDK = new CozeWebSDK.WebChatClient({
  config: {
    botId: '740849137970326****',
    isIframe: false,
  },
  auth:  {
    type: 'token',
    token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
    onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
  },
  //配置用户信息
  userInfo: {
      id: '123',
      url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
      nickname: 'John',
    },
    // 配置聊天窗口的整体 UI 效果，包括应用图标、页面布局、语言属性等。
    ui: {
      base: {
          icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
          layout: 'pc',
          zIndex: 1000,
      },
      // 悬浮球配置
      asstBtn: {
          isNeed: true,
      },
      //配置底部文案
      footer: {
        isShow: true,
        expressionText: 'Powered by {{name}} {{name1}}',
        linkvars: {
          name: {
            text: 'A',
            link: 'https://www.test1.com'
          },
          name1: {
            text: 'B',
            link: 'https://www.test2.com'
          }
        }
        }
      }
    },
});

const cozeWebSDK = new CozeWebSDK.WebChatClient({
  config: {
    botId: '740849137970326****',
    isIframe: false,
  },
  auth:  {
    type: 'token',
    token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
    onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGA*********',
  },
  //配置用户信息
  userInfo: {
      id: '123',
      url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
      nickname: 'John',
    },
    // 配置聊天窗口的整体 UI 效果，包括应用图标、页面布局、语言属性等。
    ui: {
      base: {
          icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
          layout: 'pc',
          zIndex: 1000,
      },
      // 悬浮球配置
      asstBtn: {
          isNeed: true,
      },
      //配置顶部标题栏
      header: {
          isShow: true,
          isNeedClose: true,
       },
    },
});

const cozeWebSDK = new CozeWebSDK.WebChatClient({
  config: {
    botId: '740849137970326****',
    isIframe: false,
  },
  auth:  {
    type: 'token',
    token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
    onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
  },
  userInfo: {
      id: '123',
      url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
      nickname: 'John',
    },
    ui: {
      base: {
          icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
          layout: 'pc',
          zIndex: 1000,
      },
      asstBtn: {
          isNeed: true,
      },
      footer: {
        isShow: true,
        expressionText: 'Powered by {{name}} {{name1}}',        linkvars: {
          name: {
            text: 'A',
            link: 'https://www.test1.com'
          },
          name1: {
            text: 'B',
            link: 'https://www.test2.com'
            }
        }
      },
      //配置聊天框
      chatBot: {
        title: "Kids' Playmate | Snowy",
        uploadable: true,
        width: 800,
        el: undefined,
        isNeedAddNewConversation: true,
        isNeedQuote: true,
        onHide: () => {
          // todo...
        },
        onShow: () => {
          // todo...
        },
      },
    },
});

ui: {
  chatBot: {
    feedback: {
      isNeedFeedback: true,
      feedbackPanel: {
        title: '您对这个回答有什么看法？请告诉我们',
        placeholder: '请详细描述您的问题...',
        tags: [
          {
            label: '信息不正确'
          },
          {
            label: '涉及敏感信息',
            isNeedDetail: true
          }
        ]
      }
    }
  }
}

ui: {
  base: {
    icon: 'https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/****/coze/chatsdk-logo.png',
    layout: 'pc',
    lang: 'en',
    zIndex: 1000
  },
  header: {
    isShow: true,
    isNeedClose: true  
  },
  conversations: {
    isNeed: true  
  }
}

<!doctype html>
<html lang="en">
<head>
    <style>
        /* 修复：CSS 需用 */
        #position_demo {
            position: absolute;
            right: 10px;
            bottom: 20px;
        }
    </style>
</head>
<body>
<h1>Hello World</h1>
<div id="position_demo"></div>
<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.20/libs/cn/index.js"></script>
<script>
    const cozeWebSDK = new CozeWebSDK.WebChatClient({
        // 智能体或应用基础设置
        config: {
            type: 'bot', // 类型：集成智能体设为'bot'，集成应用需设为'app'
            bot_id: '7561768844642***', // 智能体ID
            isIframe: false, // 是否使用iframe方式打开聊天框
        },
        // 鉴权配置：设置鉴权方式、访问密钥及刷新逻辑
        auth: {
            type: 'token', 
            token: 'cztei_q0SbqI7WHxRIIjNEaYR0bHafqtUqjRsBlGG****', // 访问密钥
            onRefreshToken: async () => 'token' // 密钥过期时返回新密钥
        },
        // 用户信息配置
        userInfo: {
            id: 'user123', // 用户ID
            url: 'https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/coze-logo.png', // 用户头像URL
            nickname: 'John', // 用户昵称
        },
        // UI配置：控制聊天窗口的整体样式、功能显示及布局
        ui: {
            // 基础UI配置：应用图标、布局类型、语言及层级
            base: {
                icon: 'https://lf-coze-web-cdn.coze.cn/obj/eden-cn/lm-lgvj/ljhwZthlaukjlkulzlp/coze/chatsdk-logo.png', // 应用图标URL
                layout: 'pc', // 布局类型：'pc'适配电脑端，'mobile'适配移动端
                lang: 'en', // 系统语言：'en'英文，'zh-CN'中文
                zIndex: 1000 // 聊天框层级
            },
            // 控制标题栏及关闭按钮显示
            header: {
                isShow: true, // 是否显示顶部标题栏
                isNeedClose: true, // 是否显示关闭按钮
            },
            // 控制右下角悬浮球显示
            asstBtn: {
                isNeed: true // 展示悬浮球
            },
            // 底部文案配置（修复：补充linkvars和footer的闭合括号+逗号）
            footer: {
                isShow: true, // 是否显示底部版权模块
                expressionText: 'Powered by {{name}} {{name1}}', // 底部显示的文本信息
                linkvars: {
                    name: {
                        text: 'A',
                        link: 'https://www.test1.com'
                    },
                    name1: {
                        text: 'B',
                        link: 'https://www.test2.com'
                    }
                } // 修复：补充linkvars的闭合括号
            }, // 修复：补充footer的闭合括号
            // 会话列表配置：控制会话列表显示
            conversations: {
                isNeed: true, // 是否需要显示会话列表
            },
            // 聊天框核心配置
            chatBot: {
                title: '英语学习伙伴', // 聊天框标题
                uploadable: true, // 是否支持文件上传
                width: 390, // PC端聊天框宽度（单位：px）
                isNeedAudio: true, // 是否支持语音功能
                isNeedFunctionCallMessage: true, // 是否显示工具调用消息
                isNeedAddNewConversation: true, // 是否支持新建会话
                isNeedQuote: true, // 是否支持消息引用
                // 消息评价
                feedback: {
                    isNeedFeedback: true, // 是否开启消息评价
                    feedbackPanel: {
                        title: '您对这个回答有什么看法？请告诉我们', // 反馈卡片顶部的引导文本，用于解释反馈目的
                        placeholder: '请详细描述您的问题...', // 反馈输入框提示文字
                        tags: [ // 反馈标签选项
                            {
                                label: '内容不够详细', // 标签文本
                                isNeedDetail: false, // 是否需要详细说明
                            },
                            {
                                label: '内容错误', // 标签文本
                                isNeedDetail: false, // 是否需要详细说明
                            },
                            {
                                label: '其他', // 标签文本
                                isNeedDetail: true, // 是否需要详细说明
                            },
                        ],
                    },
                },
            },
        },
    });
</script>
</body>
</html>