您好，Discourse 社区的各位，
希望大家都过得很好！
我设置了一个具有人工智能个性（LLM GPT-4 Omni-Mini）的聊天机器人，它运行得非常出色！
但我注意到客户互动很少。目前，要与机器人聊天，他们必须点击顶部栏中的这个小机器人图标，我认为这可能不太明显。
我创建了一个主题来解释如何找到它，但它似乎仍然有点隐蔽。我想知道是否有办法在屏幕的一个角落创建一个更大的聊天小部件图标，使其更加突出？
我读过有关集成 Help Scout 或 Zendesk 的信息，但我更愿意使用 Discourse 中已有的功能，而无需额外费用或进行更多操作。
您有什么技巧或窍门可以分享吗？我将不胜感激！我还在摸索这一切，所以任何帮助都意义重大。
非常感谢！
你好 @Angela_MRS 
我在论坛的侧边栏有一个自定义的“询问机器人”链接：
谢谢莉莉，这个主意非常好！
不过这个主意不太适合我们的论坛，我已经移除了侧边栏，想让它不那么拥挤……如果找不到其他解决方法，我可能会把它加回来 
如果您使用的是该菜单而不是侧边栏，可以将其放在下拉菜单中。
当然，我会做的 
将按钮 URL 设置为 /discourse-ai/ai-bot/conversations，您可以将其放置在任何您想要的位置。
非常感谢你的建议 Lily，我已经成功地将按钮添加到了类别之上，效果完美……
显然，我并不介意稍微扩展一下……
我曾想为这个按钮使用自己的图片（我已经将其添加到我的主题中），但我不知道如何在组件选项中调用我的自定义图片（GitHub - literatecomputing/discourse-custom-components ）
另外，我也无法更改位置……我需要为主题代码创建一个自定义部分吗？？
这就是我设想的聊天机器人按钮的样子：
我非常感激你的帮助！！！
经过一番研究，ChatGPT 帮助我 -几乎- 达到了目标 
我添加了 Lily 建议的按钮，还花了不少时间在这里和那里阅读替代方案。最后，我只是让 ChatGPT 帮助我编写代码来创建这样一个按钮，或者更确切地说，是基于我上传到主题中的图片的浮动“头像”。
我把正在使用的代码放在这里，以备将来有人需要！
HTML：
<a id="chatbot-avatar" href="https://YOUR_URL_HEREs" title="AI chatbot">
<img src="https://YOUR_IMAGE_URL_HERE__" alt="Chatbot Avatar" />
<div class="tooltip">Start a conversation with the AI Chatbot</div>
</a>
CSS：
#chatbot-avatar {
position: fixed; /* 将头像固定在页面上 */
bottom: 50px; /* 距离页面底部的距离 */
right: 50px; /* 距离页面右侧的距离 */
cursor: pointer; /* 鼠标悬停时显示指针 */
z-index: 1000; /* 确保头像在其他内容之上 */
text-align: center; /* 在头像正下方居中显示工具提示文本 */
}
#chatbot-avatar img {
width: 200px; /* 根据需要调整大小 */
height: 200px; /* 根据需要调整大小 */
transition: transform 0.3s; /* 平滑的悬停效果 */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* 鼠标悬停时头像略微放大 */
}
.tooltip {
visibility: hidden; /* 默认隐藏 */
width: 200px; /* 工具提示宽度 */
background-color: #000C34; /* 工具提示背景颜色 */
color: #fff; /* 工具提示文本颜色 */
text-align: center; /* 居中文本 */
border-radius: 5px; /* 圆角 */
padding: 8px; /* 工具提示内边距 */
position: absolute; /* 绝对定位 */
bottom: 220px; /* 定位在头像上方 */
right: 50%; /* 与头像居中对齐 */
transform: translateX(50%); /* 调整以居中 */
opacity: 0; /* 默认透明 */
transition: opacity 0.3s; /* 平滑过渡 */
z-index: 999; /* 定位在头像正下方 */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* 显示工具提示 */
opacity: 1; /* 完全可见 */
}
这是它在页面上的样子（“开始对话…”文本仅在鼠标悬停在头像上时出现。
还有一件事我还没做到，就是让它只出现在主页上，目前它出现在所有页面上，包括 AI 聊天机器人讨论页面，那显然是多余的……我尝试添加一个脚本来识别页面并阻止它出现在主页以外的所有地方，等等……到目前为止还没有成功。我明天再看看能做些什么！
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
