如何移除MS Bot Framework网页聊天内置标题并自定义机器人名称

如果你的Web Chat是通过iframe直接嵌入的，修改默认标题会有点受限（因为跨域限制），所以更推荐改用官方的脚本嵌入方式，这样可以完全自定义标题和UI样式，步骤如下：

方法1：使用Web Chat脚本嵌入（推荐） #

这种方式能直接通过配置参数替换标题，还能自定义样式，比iframe灵活得多：

1. 替换掉原来的iframe代码，用下面的HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>你的网站标题</title>
    <!-- 引入Web Chat的官方脚本 -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        /* 给Web Chat容器设置尺寸 */
        #webchat-container {
            height: 600px;
            width: 400px;
            margin: 20px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- Web Chat的容器 -->
    <div id="webchat-container"></div>

    <script>
        // 渲染Web Chat
        window.WebChat.renderWebChat({
            // 配置Direct Line连接，替换成你的机器人Direct Line Token
            directLine: window.WebChat.createDirectLine({ token: '你的DirectLineToken' }),
            // 核心：自定义UI样式，替换标题
            styleOptions: {
                // 设置你的机器人名称作为标题
                headerText: '我的专属聊天机器人',
                // 可选：自定义标题栏样式
                headerStyle: {
                    backgroundColor: '#0070c0',
                    color: '#ffffff',
                    padding: '12px 16px',
                    fontSize: '16px',
                    fontWeight: '600'
                },
                // 可选：设置机器人/用户头像首字母
                botAvatarInitials: 'Bot',
                userAvatarInitials: 'You'
            }
        }, document.getElementById('webchat-container'));
    </script>
</body>
</html>

关键说明： #

• Direct Line Token：你可以在Azure Portal的机器人资源中，找到「Direct Line」频道，生成一个令牌（注意不要把密钥直接暴露在前端，生产环境建议通过后端API获取临时令牌）。
• styleOptions：这个参数可以控制Web Chat的几乎所有UI元素，除了标题，还能调整颜色、字体、头像等，满足你的定制需求。

方法2：修改现有iframe嵌入（仅视觉覆盖） #

如果暂时不想改脚本，只能通过视觉覆盖的方式隐藏默认标题，添加自定义标题：

<!-- 用一个容器包裹iframe，设置相对定位 -->
<div style="position: relative; width: 400px; height: 600px; border-radius: 8px; overflow: hidden;">
    <!-- 自定义标题，绝对定位在顶部覆盖默认标题 -->
    <div style="position: absolute; top: 0; left: 0; right: 0; background: #0070c0; color: white; padding: 12px 16px; font-size: 16px; font-weight: 600; z-index: 100;">我的专属聊天机器人</div>
    <!-- 原有的Web Chat iframe -->
    <iframe 
        src="https://webchat.botframework.com/embed/你的机器人ID?s=你的密钥" 
        width="100%" 
        height="100%" 
        style="border: none; margin-top: 44px;" <!-- 下移iframe，避免被自定义标题挡住聊天内容 -->
    ></iframe>
</div>

注意： #

这种方法只是视觉上隐藏了默认标题，实际上iframe内部的标题元素依然存在，可能会有交互或样式冲突，所以还是推荐方法1。

内容的提问来源于stack exchange，提问作者Yaduska Thambiaiyah