I have this iframe chatbot that overlaps some elements and buttons of my page because of its fixed position. What I want to happen is: the size of the iframe is the same size as the small chat icon, and when clicked that width and height increase to fit the whole chat box, which is bigger. Is that possible?
It’s confusing to explain, if you didn’t understand please let me know in the comments, thank you!
is this iFrame HTML iFrame, or is it the element created with Velo?
it would be different elements, so we may need extra clarification. elements size in iFrame can be changed with the following values: width=“Y” height=“X” ; where X and Y are values for numbers
along with this, you want it to expand on click, which won’t be possible most likely due to some Velo limitation, please check this thread on Velo forum: https://www.wix.com/velo/forum/coding-with-velo/resize-a-html-component
possibly you can look for extra solution with html for box to have increase function on click, conversations like this could help: https://stackoverflow.com/questions/36404132/increasing-size-of-image-on-click-jquery but we cannot guarantee this, as these elements are custom
It’s an html iFrame. I consider the change of width and height something super basic. Shouldn’t Velo be able to do this easily? That thread you sent me is from 2018. In 4 years the Editor X team did nothing about this? Cmon change of width and height is rudimentary. I keep finding myself in situations where I want to change the simplest thing with a javascript line of code and can’t because Velo exists and doesn’t offer anything we want.
Velo is Javascript and to change the width and height would be more the CSS of the element that is currently a feature request. https://support.wix.com/en/article/editor-x-request-editing-your-sites-css-code-style-sheet
I was able to do something similar to what is sounds like you want to achieve with both hover and click interactions and using Velo as well .
I really appreciate your effort to answer me, but unfortunately it isn’t working. The left solution doesn’t work for me because I don’t want an extra button that collapses and expands the iFrame, I want to click on the I fram itself.
So I tried the second solution but I don’t know why it isn’t working. I recorded my screen for you to take a look. One more problem I think is that I want the iFrame with fixed position to the page, and the scaling option does not appear when I turn fixed position on. Besides this, I already tried inserting the iFrame into a container, but also it didn’t work… Any thoughts?
Thank you for your answer once again
I was making a video but it didn’t save so will upload once I get the chance. As an aside though, most chats like that are usually embedded via custom code rather than an iFrame. Not sure if that would help but the code provider should tell you where the code needs to be placed.
Edit : Pipedrive’s knowledge base doesn’t list the steps but they have an article that shows how to get the steps. They don’t mention it needs to be embedded per se, but it does mention embedding on multiple pages which is more a custom code rather than iFrame setup.
https://support.pipedrive.com/en/article/how-can-i-host-or-embed-my-chatbot