Pickaxe offers many ways to embed AI GPTs directly into your website. One of the embed options is a FAB or Floating Action Button.
Recently a customer who runs a risk management consulting firm asked how to add custom text above the Floating Action Button. While Pickaxe does not directly support adding custom text to a FAB, we told the customer that if he was familiar with HTML he may be able to figure out how to add this to the iFrame.
Turns out he was very clever and figured it out! I wanted to share his solution with you. Here is an image of the textbox he was able to achieve:
Here is the HTML code he used to add a custom text-box above his embedded Pickaxe FAB.
<div id="chatbot-container" style="position: relative; display: inline-block;">
<div id="rendering-information" data-height="700px" data-width="100%" data-formid="RAWAI__Risk_Management_Advisor_K6JN3" data-frame-source="PICKAXE_EMBED_CODE_GOES_HERE" data-title="RAW@AI - Risk Management Advisor" style="cursor: pointer;"></div>
<div id="chatbase-message-bubbles" style="position: fixed; bottom: 85px; right: 1rem; border-radius: 10px; font-family: sans-serif; font-size: 16px; z-index: 2147483644; cursor: pointer; flex-direction: column; gap: 50px; max-width: 70vw; display: block; left: unset;">
<div style="display: flex; justify-content: flex-end;">
<div style="background-color: white; color: black; box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px; border-radius: 10px; padding: 20px; margin: 8px; font-size: 14px; opacity: 1; transform: scale(1); transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;">
Talk to our AI risk management advisor 👋 🕵🏽
</div>
</div>
<div id="close-button" style="position: absolute; top: -10px; right: -10px; font-weight: bold; display: none; justify-content: center; align-items: center; z-index: 2147483643; width: 22px; height: 22px; border-radius: 50%; text-align: center; font-size: 12px; cursor: pointer; background-color: rgb(224, 224, 224); color: black; box-shadow: rgba(150, 150, 150, 0.15) 0px 6px 24px 0px, rgba(150, 150, 150, 0.15) 0px 0px 0px 1px;">✕</div>
</div>
</div>
<link rel="stylesheet" href="https://embed.pickaxeproject.com/axe/scripts/fab/styles.css">
<script src="https://embed.pickaxeproject.com/axe/scripts/fab/bundle.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var messageBubble = document.querySelector("#chatbase-message-bubbles");
var closeButton = document.querySelector("#close-button");
messageBubble.addEventListener("mouseover", function() {
closeButton.style.display = "flex";
});
messageBubble.addEventListener("mouseout", function() {
closeButton.style.display = "none";
});
closeButton.addEventListener("click", function() {
console.log("Close button clicked");
messageBubble.style.display = "none";
});
var chatbotButton = document.querySelector("#rendering-information");
if (chatbotButton) {
console.log("Chatbot button found");
chatbotButton.addEventListener("click", function() {
console.log("Chatbot button clicked");
messageBubble.style.display = "none";
});
} else {
console.log("Chatbot button not found");
}
var iframe = document.querySelector('#rendering-information iframe');
if (iframe) {
iframe.addEventListener('load', function() {
console.log("Iframe loaded");
iframe.contentWindow.addEventListener('click', function() {
console.log("Iframe content clicked");
messageBubble.style.display = 'none';
});
});
} else {
console.log("Iframe not found");
}
// Prevent the chatbox from closing when clicking inside the chatbox
messageBubble.addEventListener('click', function(event) {
event.stopPropagation();
});
// Close the chatbox when clicking outside of it
document.addEventListener('click', function(event) {
if (!messageBubble.contains(event.target) && !chatbotButton.contains(event.target)) {
messageBubble.style.display = 'none';
}
});
});
</script>