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:

[image] 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!

Create a more noticeable link for AI persona

Product Support

Angela_MRS (Angela) May 13, 2025, 12:42pm 6

Absolutely, I will do that

Topic		Replies	Views
How to customize Discourse AI bot Product Support ai , ai-bot	0	139	June 9, 2025
A website chat connector for Discourse? Feature	6	852	August 27, 2018
Adding a chat link in the top navigation links? UX chat	6	588	March 11, 2022
Discourse Chat Plugin official , chat , included-in-core	43	35458	July 29, 2026
Chat messages layout to look more like Telegram Feature chat	2	222	September 17, 2025

Create a more noticeable link for AI persona

Related topics