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!
