Hello Discourse community, Hope you’re all doing great! I’ve set up a chatbot with an AI persona (LLM GPT-4 Omni-Mini), and it’s been working wonders! :tada: But, I’ve noticed that customer interactions are pretty low. Right now, to chat with the bot, they have to click on this little robot icon in the top bar, and I’m thinking it might not be very obvious. I created a topic explaining how to find it, but it still seems a bit hidden. I was wondering if there’s a way to create a larger chat widget icon in a corner of the screen to make it stand out more? I’ve read about integrating Help Scout or Zendesk, but I’d rather use what I already have in Discourse without extra costs or jumping through more hoops. Any tips or tricks you could share? I’d appreciate any pointers you can give me! I’m still getting the hang of all this, so any help means a lot. :blush: Thanks a bunch!

Hello @Angela_MRS :waving_hand: i have a custom “ask the bot” link in the sidebar on my forum: [IMG_3603]

Thanks Lilly, that’s a very good idea! it wouldn’t really work for our forum, I’ve removed the side bar, thinking of making it less crowded… I may bring it back if I cannot find another workaround :sweat_smile:

you can put it in the drop down menu then if you are using that instead of sidebar.

Absolutely, I will do that :wink:

[图片] Custom Components -- add button or text at any plugin outlet Theme component information_source Summary Add button or text anywhere hammer_and_wrench Repository https://github.com/literatecomputing/discourse-custom-components question Install Guide How to install a theme or theme component open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Add a link button or arbitrary text at any plugin outlet. (Ignore the watermarks in the images–I took these screenshots on a staging/test site.) T… use /discourse-ai/ai-bot/conversations for the button URL and you can put it where ever you want. :slight_smile:

Thanks a lot for your suggestions Lily, I’ve managed to add the button on top of the categories, and it works perfect… [This image shows a screenshot of the MR Solutions Hub, featuring a chat option labeled "MRS Helper: Start a conversation." (Captioned by AI)] Obivously, I wouldn’t mind scaling up a bit… I was thinking of using my own image for this button (I have already added this to my theme), but I don’t know how to recall this custom image as my icon on the component options (GitHub - literatecomputing/discourse-custom-components · GitHub ) Also, I can’t seem to change the position either… do I need to create a custom section on the theme code?? This is how I picture the button for the chatbot: [The image shows the MR Solutions Hub homepage with various sections like General, Technical Support, and Documents, along with a "New Topic" button highlighted for creating new discussions. (Captioned by AI)] I appreciate enormously your help!!!

After some research here and there, chat GPT helped me -almost- reach my goal :partying_face: I added the button as Lily suggested, and also spent quite some time reading on alternatives here and there. After all I just asked ChatGPT to help me write the code to create such button, or actually a floating “avatar” based on a image I uploaded into my theme. I put the code I’m using here in case it can help someone else in the future! HTLM: <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; /* Fixes the avatar in place */ bottom: 50px; /* Distance from the bottom of the page */ right: 50px; /* Distance from the right of the page */ cursor: pointer; /* Changes cursor to pointer on hover */ z-index: 1000; /* Ensures the avatar is above other content */ text-align: center; /* Centers tooltip text directly below the avatar */ } #chatbot-avatar img { width: 200px; /* Adjust size as needed */ height: 200px; /* Adjust size as needed */ transition: transform 0.3s; /* Smooth hover effect */ } #chatbot-avatar:hover img { transform: scale(1.5); /* Slightly enlarge avatar on hover */ } .tooltip { visibility: hidden; /* Hidden by default */ width: 200px; /* Tooltip width */ background-color: #000C34; /* Tooltip background color */ color: #fff; /* Tooltip text color */ text-align: center; /* Center the text */ border-radius: 5px; /* Rounded corners */ padding: 8px; /* Padding inside the tooltip */ position: absolute; /* Absolute positioning */ bottom: 220px; /* Position above the avatar */ right: 50%; /* Center align with the avatar */ transform: translateX(50%); /* Adjust for centering */ opacity: 0; /* Transparent by default */ transition: opacity 0.3s; /* Smooth transition */ z-index: 999; /* Placed just below the avatar */ } #chatbot-avatar:hover .tooltip { visibility: visible; /* Show tooltip */ opacity: 1; /* Make it fully visible */ } This is the way it looks on the page (The text “start a conversation…” appears when hovering the avatar only. [Screenshot 2025-05-14 at 16.58.18] There’s one single thing I couldn’t do yet, it is to make it appear on the home page only, at the moment it appears on every page, including the AI chatbot discusion page, where is clearly redundant… I’ve tried to add a script to identify the page and block it everywhere but the home page, etc.. not working so far. I’ll see if I can do more tomorrow!

为AI角色创建更显眼的链接

产品支持

Lilly (Lillian ) 2025 年5 月 13 日 12:37 3

你好 @Angela_MRS
我在论坛的侧边栏有一个自定义的“询问机器人”链接：

话题		回复	浏览量
How to customize Discourse AI bot Product Support ai , ai-bot	0	137	2025 年6 月 9 日
A website chat connector for Discourse? Feature	6	846	2018 年8 月 27 日
Adding a chat link in the top navigation links? UX chat	6	587	2022 年3 月 11 日
Discourse Chat Plugin official , chat , included-in-core	43	35431	2026 年7 月 29 日
Chat messages layout to look more like Telegram Feature chat	2	221	2025 年9 月 17 日

为AI角色创建更显眼的链接

相关话题