Create a more noticeable link for AI persona

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.

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!