A custom tooltip provides a friendly prompt above the chatbot button, inviting users to interact. This example positions the tooltip above the button and includes a small arrow pointing to the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot with Tooltip (Bottom Right)</title>
<style>
/* Main chatbot widget styling */
#aichatbot {
position: fixed !important;
z-index: 300 !important;
bottom: 20px !important; /* Positioned at the bottom right */
right: 20px !important;
}
#aichatbot-widget-button {
width: 80px !important; /* Button size */
height: 80px !important;
border-radius: 50% !important; /* Circular button shape */
overflow: hidden !important;
object-fit: contain !important;
position: relative !important;
cursor: pointer !important;
}
#aichatbot-tooltip {
position: absolute !important;
left: -130px !important; /* Aligns tooltip to the left of button */
top: -70px !important; /* Places tooltip above the button */
background-color: white !important;
border-radius: 10px !important;
padding: 5px 10px !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
white-space: nowrap !important;
font-family: Arial, sans-serif !important;
font-size: 14px !important;
display: block !important; /* Ensures tooltip visibility */
}
/* Arrow below the tooltip box */
#aichatbot-tooltip::after {
content: '' !important;
position: absolute !important;
left: 110px !important;
top: 100%;
border-width: 10px 10px 0 10px !important;
border-style: solid !important;
border-color: white transparent transparent transparent !important;
}
</style>
</head>
<body>
<script>
!function(w, d, s, arg1, arg2, arg3) {
// Create chatbot container
var div = d.createElement('div');
div.id = 'aichatbot';
d.body.appendChild(div);
w.chatbotConfig = [arg1, arg2, arg3];
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.defer = true;
j.type = 'module';
j.src = 'https://aichatbot.sendbird.com/index.js';
f.parentNode.insertBefore(j, f);
// Function to add tooltip after button loads
function addTooltip() {
var button = d.getElementById('aichatbot-widget-button');
if (button) {
var tooltip = d.createElement('div');
tooltip.id = 'aichatbot-tooltip';
tooltip.innerHTML = '<strong>Chatbot</strong><br>Ask me a question!';
button.parentNode.insertBefore(tooltip, button.nextSibling);
// Tooltip is initially visible
tooltip.style.display = 'block';
// Hide tooltip when button is clicked
button.addEventListener('click', function() {
tooltip.style.display = 'none';
});
} else {
setTimeout(addTooltip, 100); // Retry if button not yet loaded
}
}
// Delay function to ensure button is available
setTimeout(addTooltip, 1000);
}(window, document, 'script', 'app_id', 'bot_id', { apiHost: 'https://api-cf-ap-2.sendbird.com' });
</script>
</body>
</html>
To have the chatbot open automatically on the homepage, use this configuration. It checks the page URL and triggers the widget to open only when on the homepage. The getAutoOpenByPath() returns true only if on the homepage, triggering the widget to open automatically.
<script>
// Function to check if current page is the homepage
function getAutoOpenByPath() {
return window.location.pathname === '/';
}
// Chatbot embed code with auto-open set to true only on the homepage
!(function (w, d, s, ...args) {
var div = d.createElement('div');
div.id = 'aichatbot';
d.body.appendChild(div);
w.chatbotConfig = args;
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.defer = true;
j.type = 'module';
j.src = 'https://aichatbot.sendbird.com/index.js';
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'APP_ID', 'BOT_ID', {
autoOpen: getAutoOpenByPath(),
apiHost: 'https://api-cf-ap-2.sendbird.com'
});
</script>
By default, links in the chatbot open in a new browser tab. If you want to keep users on the same page, you can adjust this by using the following code:
<script>
!function(w, d, s, ...args){
// Create the chatbot container
var div = d.createElement('div');
div.id = 'aichatbot';
d.body.appendChild(div);
// Chatbot configurations
w.chatbotConfig = args;
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.defer = true;
j.type = 'module';
j.src = 'https://aichatbot.sendbird.com/index.js';
f.parentNode.insertBefore(j, f);
// Modify link behavior after chatbot fully loads
j.onload = function() {
setTimeout(() => {
const chatContainer = document.getElementById('aichatbot');
if (chatContainer) {
chatContainer.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
event.target.setAttribute('target', '_self'); // Opens link in the same tab
}
});
}
}, 1000); // Short delay to ensure the chatbot is fully loaded
};
}(window, document, 'script', 'APP_ID', 'BOT_ID', { apiHost: 'https://api-cf-ap-2.sendbird.com' });
</script>
event.target.setAttribute('target','_self'): This makes sure links open in the same browser tab instead of a new one.
If you want the chatbot to appear only on certain page, or hide it on specific pages, you can use this code.
<script>
// Get the full URL of the current page
var currentURL = window.location.href;
// Define URLs where the chatbot should not appear
var urlsToExclude = ["https://example.com/book-appointment", "https://example.com/settings"];
// Check if the current URL matches any in the list
var isExcluded = urlsToExclude.some(function(url) {
return currentURL.startsWith(url);
});
// Only load the chatbot if the current URL is not in the exclusion list
if (!isExcluded) {
!function(w, d, s, ...args) {
// Create the chatbot container
var div = d.createElement('div');
div.id = 'aichatbot';
d.body.appendChild(div);
// Set chatbot configurations
w.chatbotConfig = args;
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.defer = true;
j.type = 'module';
j.src = 'https://aichatbot.sendbird.com/index.js';
f.parentNode.insertBefore(j, f);
}(window, document, 'script', 'APP_ID', 'BOT_ID', { apiHost: 'https://api-cf-ap-2.sendbird.com' });
}
</script>
urlsToExclude: Customize this list with the URLs where the chatbot should be hidden.
isExcluded: Checks if the current page URL is one of the excluded URLs. If it's not, the chatbot will load as usual.
This code disables the message input field, which is helpful when you want users to interact through pre-set options in the chatbot.
<script>
!function(w, d, s, ...args){
// Create the chatbot container
var div = d.createElement('div');
div.id = 'aichatbot';
d.body.appendChild(div);
// Set up chatbot configurations
w.chatbotConfig = args;
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s);
j.defer = true;
j.type = 'module';
j.src = 'https://aichatbot.sendbird.com/index.js';
f.parentNode.insertBefore(j, f);
// MutationObserver watches for changes in the input field
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var inputField = d.querySelector('div.sendbird-message-input-text-field[contenteditable="true"]');
if (inputField) {
inputField.setAttribute('contenteditable', 'false'); // Disables typing
observer.disconnect(); // Stops the observer once the input field is disabled
}
});
});
// Begin observing changes in the document body to detect the input field
observer.observe(d.body, { childList: true, subtree: true });
}(window, document, 'script', 'APP_ID', 'BOT_ID', { apiHost: 'https://api-cf-ap-2.sendbird.com' });
</script>
The code uses a MutationObserver. This observers changes in the chatbot and finds the text field when it's available.
Once it locates the input area, it disables typing by setting contenteditable to false.
The chatbot is still interactive, but users won't be able to type, making it ideal for workflows that use buttons or pre-set options.
If you'd like the chat window to be open and visible on the page without requiring users to click a button, you can use this setup. This approach is useful if you want the chat to be fully embedded as part of your page layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot Without Button</title>
<!-- Load React and ReactDOM; ensure the versions are compatible -->
<script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<!-- Load the Sendbird AI Chatbot Widget -->
<script>
window.process = { env: { NODE_ENV: 'production' } }; // Ensures environment variable is set
</script>
<script crossorigin src="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/index.umd.js"></script>
<link href="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/style.css" rel="stylesheet" />
<!-- Optional: Enable JSX syntax -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Basic styling for the page layout and hiding the close button -->
<style>
html, body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#aichatbot-widget-close-icon {
display: none; /* Hides the close button in the chat window */
}
</style>
</head>
<body>
<!-- div element for embedding the chat widget -->
<div id="root"></div>
<!-- JavaScript for rendering the chat window directly -->
<script type="text/babel">
const { ChatWindow } = window.ChatAiWidget;
const App = () => {
return (
<ChatWindow
applicationId="APP_ID"
botId="BOT_ID"
/>
);
};
// Renders the ChatWindow component inside the root div
ReactDOM.createRoot(document.querySelector('#root')).render(<App />);
</script>
</body>
</html>
React and ReactDOM Imports: these are required to render the chat window directly on the page. Make sure these versions are compatible.
ChatWindow Component: The ChatWindow component is imported from Sendbird's ChatAiWidget and configured to load with your APP_ID and BOT_ID. Replace these with your actual values from Sendbird.
Hiding the close button: The style rule #aichatbot-widget-close-icon... prevents users from closing the chat window, keeping it open at all times.