Create a more noticeable link for AI persona

[Angela_MRS (Angela)]

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! 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.

Thanks a bunch!

[Lilly]

Hello @Angela_MRS

i have a custom “ask the bot” link in the sidebar on my forum:

[Angela_MRS (Angela)]

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

[Lilly]

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

[Angela_MRS (Angela)]

Absolutely, I will do that

[Jagster (Jakke Lehtonen)]

That is de facto more hidden when used device is a mobile.

Perhaps my users are different, but practically no one uses the sidebar. It gives practically nothing to ordinary users, and need everytime one click. Actually, I’m on bigger screen and I don’t show the sidebar here, because it is unnecessary for me.

[Lilly]

Custom Components -- add button or text at any plugin outlet

Summary Add button or text anywhere Repository https://github.com/literatecomputing/discourse-custom-components Install Guide How to install a theme or theme component 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.) …

use /discourse-ai/ai-bot/conversations for the button URL and you can put it where ever you want.

[Angela_MRS (Angela)]

Thanks a lot for your suggestions Lily, I’ve managed to add the button on top of the categories, and it works perfect…

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 )
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:

I appreciate enormously your help!!!

[Angela_MRS (Angela)]

After some research here and there, chat GPT helped me -almost- reach my goal

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.

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!