The Welcome message that is In-chat only is a nice touch, you guys need to get the Button Label, when the chat is minimized is the label that shows next to chat bubble. You can add button label to encourage visitors to open the widget. I don’t want my label button to say
“Hi there 
How can I help you today?” as same message when open chat
Instead I want to say something like: “Get Instant Help! 
”
Interesting idea, thanks for sharing, @Norton 
Would you like the label to be displayed on the left side of the bubble? Should it disappear when the chat window opens, or would you prefer to always keep it visible?
What I was trying to say, the button label needs to be different than the welcome message. Like example: the chat is minimized, if I choose the bubble (instant or delayed) will show Get Instant Help!
next to the chat icon, then when you click and the chat opens, then there is my welcome message: Welcome, how may I help you today? you can go to our website nycchighgrove.com we use TIDIO with the lyro chat, if you guys can get something similar to that, I will definitely switch to you guys
Happy to say that this customization is feasible!
I’ve forwarded your request to the devs and will report back once the solution is ready 
Hi there, @Norton
We’ve added this code to the Custom JS field on the General tab of your widget’s settings:
const originalContainerSelector = "[class*='FloatingButton__FloatingButtonContainer-sc']";
const originalButtonSelector = "button[role='button']";
const newContainerClass = "FloatingButton__FakeContainer";
const newButtonHTML = `
<button class="widgetLabel tidio-1cr1ym5 moveFromRightLabel-enter-done" type="button"
style="
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 16px;
padding: 10px 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
font-family: Arial, sans-serif;
text-align: center;
">
<span style="white-space: nowrap; font-size: 17px; line-height: 17px;">
Get Instant Help! <img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/12.1.1/72x72/1f680.png" alt="🚀" class="emoji" style="width: 20px; height: 20px; transform: translate(0, 4px);">
</span>
</button>
`;
function waitForElement(selector, root = document, maxAttempts = 50, interval = 100) {
return new Promise((resolve, reject) => {
let attempts = 0;
const check = () => {
const element = root.querySelector(selector);
if (element) {
resolve(element);
} else if (attempts < maxAttempts) {
attempts++;
setTimeout(check, interval);
} else {
reject(new Error(`Элемент ${selector} не найден`));
}
};
check();
});
}
function addNewFloatingContainer(originalContainer) {
const originalButton = originalContainer.querySelector(originalButtonSelector);
if (!originalButton) return;
const newContainer = document.createElement("div");
newContainer.className = newContainerClass;
newContainer.style.cssText = `
position: fixed;
bottom: 35px;
right: 100px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
`;
const fakeButtonWrapper = document.createElement("div");
fakeButtonWrapper.innerHTML = newButtonHTML;
const fakeButton = fakeButtonWrapper.firstElementChild;
fakeButton.addEventListener("click", () => {
originalButton.click();
});
newContainer.appendChild(fakeButton);
originalContainer.parentNode.insertBefore(newContainer, originalContainer.nextSibling);
}
waitForElement(originalContainerSelector)
.then((originalContainer) => {
addNewFloatingContainer(originalContainer);
})
.catch(() => {});
Note: Custom JS operates only upon widget installation, not in preview mode. So, you’ll see this button label on the page where the widget is installed and when opening widget’s Share Link.
Check it out and let me know if you like the result
@Max you are the man! Maybe in the future you might want to implement something like this natively speaking, we can do custom changes from widget menu and not in the actual code, I did make couple tweaks, remove the emoji image and the script let me use actual emojis, so when I change the label name I can add any emojis I want. Thanks again and keep up the good work!
Great, you are welcome!
I also added the idea of introducing this option to the settings to the Wishlist -Add button label next to chat bubble.
If this request gets more votes, we’ll try to think about this opportunity 
@Max how do I add the animation when the bubble buzzes at same time as the button label
Hi @Norton 
Sure, your request is with our devs now! I’ll report back once the solution is ready 
You should replace your current script in the Custom JS field with the new one:
const originalContainerSelector = "[class*='FloatingButton__FloatingButtonContainer-sc']";
const originalButtonSelector = "button[role='button']";
const newContainerClass = "FloatingButton__FakeContainer";
const newButtonHTML = `
<button class="widgetLabel tidio-1cr1ym5 moveFromRightLabel-enter-done" type="button"
style="
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: white;
border-radius: 16px;
padding: 10px 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
font-family: Arial, sans-serif;
text-align: center;
">
<span style="white-space: nowrap; font-size: 17px; line-height: 17px;">
Click for Help! 😁
</span>
</button>
`;
const pulseAnimation = {
keyframes: [
{ transform: 'scale(1)', opacity: 0, offset: 0 },
{ opacity: 1 },
{ transform: 'scale(1.2)', opacity: 0 }
],
timing: {
duration: 1000,
iterations: 3,
easing: 'linear'
}
};
function waitForElement(selector, root = document, maxAttempts = 50, interval = 100) {
return new Promise((resolve, reject) => {
let attempts = 0;
const check = () => {
const element = root.querySelector(selector);
if (element) {
resolve(element);
} else if (attempts < maxAttempts) {
attempts++;
setTimeout(check, interval);
} else {
reject(new Error(`Element ${selector} wasn't found`));
}
};
check();
});
}
function addNewFloatingContainer(originalContainer) {
const originalButton = originalContainer.querySelector(originalButtonSelector);
if (!originalButton) return;
const newContainer = document.createElement("div");
newContainer.className = newContainerClass;
newContainer.style.cssText = `
position: fixed;
bottom: 35px;
right: 100px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
`;
const animationFrame = document.createElement("div");
animationFrame.classList.add("es-animation-frame");
const secondAnimationFrame = animationFrame.cloneNode(true);
animationFrame.animate(pulseAnimation.keyframes, pulseAnimation.timing);
setTimeout(() => secondAnimationFrame.animate(pulseAnimation.keyframes, { ...pulseAnimation.timing, iterations: 2 }), 500);
setInterval(() => {
animationFrame.animate(pulseAnimation.keyframes, pulseAnimation.timing);
setTimeout(() => secondAnimationFrame.animate(pulseAnimation.keyframes, { ...pulseAnimation.timing, iterations: 2 }), 500);
}, 5000);
const fakeButtonWrapper = document.createElement("div");
fakeButtonWrapper.innerHTML = newButtonHTML;
const fakeButton = fakeButtonWrapper.firstElementChild;
fakeButton.addEventListener("click", () => {
originalButton.click();
});
newContainer.append(fakeButton, animationFrame, secondAnimationFrame);
originalContainer.parentNode.insertBefore(newContainer, originalContainer.nextSibling);
}
waitForElement(originalContainerSelector)
.then((originalContainer) => {
addNewFloatingContainer(originalContainer);
})
.catch(() => {});
And this code should be added to the Custom CSS field:
.global-styles,
.es-animation-frame {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
width: 100%;
height: 100%;
border-radius: 100px;
border: 1px solid rgba(17, 17, 17, 0.5);
pointer-events: none;
}
The color of the animation is set on the 10th line of this code:
Give it a shot and let me know if it worked
