Share feedback, ideas and get community help

Updated 2 months ago

help with class or item id

Hello! Could you help me with two topics please? I need to animate the bubble and correct the width of a button already inside the chat window. I can't find the data-item-id or the class of any of them so I can edit the css
B
W
35 comments
What do you mean by you can't find it?
Are you inspecting the HTML?
Yes, I tried to find a class or ID that could be used in different ways, in the flow/theme configuration, it even works, but when I implement the css codes in the front end that I am using, the settings do not reflect
I need to apply the bubble animation to a Landing page within a CRM called RD Station. I start the bubble via JS/HTML
In the other case, I trying to adjust the internal button in the chat view, in the theme settings, working fine, but in the frontend the button text is broking row
Attachments
image.png
image.png
Hi, Could you help me with this case, please?
Can you provide the link to your site so that I see why the CSS is not applied?
Sorry will check this out in details next Monday first thing πŸ™
Okay! Thank you very much
I can't see any custom code in your typebot config
So I am not sure what to look for
What did you do exactly?
So you customized nothing but when embedding the bot the buttons is shrinked like this?
That indeed seems odd
Ok I see a potential fix
Pushed a fix, should be applied fairly soon
Good morning! Yes, I had added a customization, but as it didn't work, I removed it. It would be the code that is in the printout. It works on this screen, but when embedding it on my page, the line breaks inside the button, as I told you in the previous screenshots.
Attachment
image.png
Amazing! Do you have any predictions on when it will be implemented?
Perfect! I need to do something as the line is still breaking on the button
The custom css looks like this
Attachment
image.png
You don't need to do anything.
Maybe just clear your website cache and refresh the page?
Hello, I tested it here and it pressed the button without breaking it, excellent! Thank you very much for your help!
Attachment
image.png
In the other case, I would like to animate the floating button (bubble) to draw the attention of the website visitor. I also tried to do it using CSS but I couldn't. Can you help with this?
It's a bit special since it is all inside a Shadow DOM. You need to use the ::part keyword for any CSS change: https://docs.typebot.io/deploy/web/libraries/html-javascript#custom-button-position
Good morning! I try to use this css animation, but don't work 😦

@keyframes simpleSwing {
0% { transform: rotate(0deg); }
50% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}

typebot-bubble::part(button) {
animation: simpleSwing 1s ease-in-out infinite;
}
This is out of Typebot scope.... Sorry
Hello everything is fine?!

Could you help us with a problem we found in a bot. On a page https://up2place.com.br/estrategia-digital-turbo/ we are using a bubble to display the bot, but there comes a certain point when it is not possible to scroll down or up and it does not display the entire content, which makes it impossible to choose other options. In the bot that is in the bubble on the homepage, the scroll works normally. Any ideas on how to resolve this error? I've already disabled the cache for the page, excluded JS minification and everything, it seems that the error only occurs with this bubble.
Ah, in time, the error only occurs on desktop, on mobile it works normally, below is the printout of how the bubble appears
Attachment
image.png
Good morning! You can disregard it, I discovered the error, it had nothing to do with typebot, thank you!
Add a reply
Sign up and join the conversation on Discord