/** this file is used to embed the chatbot in a website
* the difyChatbotConfig should be defined in the html file before this script is included
* the difyChatbotConfig should contain the token of the chatbot
* the token can be found in the chatbot settings page
*/
// attention: This JavaScript script must be placed after the element. Otherwise, the script will not work.
document.body.onload = embedChatbot;
async function embedChatbot () {
const difyChatbotConfig = window.difyChatbotConfig;
if (!difyChatbotConfig || !difyChatbotConfig.token) {
console.error('difyChatbotConfig is empty or token is not provided')
return;
}
const isDev = !!difyChatbotConfig.isDev
const openIcon = ``
const closeIcon = ``
// create iframe
function createIframe () {
const iframe = document.createElement('iframe');
iframe.allow = "fullscreen;microphone"
iframe.title = "dify chatbot bubble window"
iframe.id = 'dify-chatbot-bubble-window'
iframe.src = `https://${isDev ? 'dev.' : ''}udify.app/chatbot/${difyChatbotConfig.token}`;
iframe.style.cssText = 'border: none; position: fixed; flex-direction: column; justify-content: space-between; box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px; bottom: 5rem; right: 1rem; width: 24rem; height: 40rem; border-radius: 0.75rem; display: flex; z-index: 2147483647; overflow: hidden; left: unset; background-color: #F3F4F6;'
document.body.appendChild(iframe);
}
const targetButton = document.getElementById('dify-chatbot-bubble-button')
if (!targetButton) {
// create button
const containerDiv = document.createElement("div");
containerDiv.id = 'dify-chatbot-bubble-button'
containerDiv.style.cssText = `position: fixed; bottom: 1rem; right: 1rem; width: 50px; height: 50px; border-radius: 25px; background-color: #155EEF; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px; cursor: pointer; z-index: 2147483647; transition: all 0.2s ease-in-out 0s; left: unset; transform: scale(1); :hover {transform: scale(1.1);}`;
const displayDiv = document.createElement('div');
displayDiv.style.cssText = 'display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;';
displayDiv.innerHTML = openIcon
containerDiv.appendChild(displayDiv);
document.body.appendChild(containerDiv);
// add click event to control iframe display
containerDiv.addEventListener('click', function () {
const targetIframe = document.getElementById('dify-chatbot-bubble-window')
if (!targetIframe) {
createIframe()
displayDiv.innerHTML = closeIcon
return;
}
if (targetIframe.style.display === 'none') {
targetIframe.style.display = 'block';
displayDiv.innerHTML = closeIcon
} else {
targetIframe.style.display = 'none';
displayDiv.innerHTML = openIcon
}
});
}
}