top of page

Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Editor X

The rest is up to you.

Start Creating

Start Now

To see this working, head to your live site.

Francisco Surrador

Oct 11, 2022

Can I change the width or height of an element when clicked, with velo?

in General discussions

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!

6 answers0 replies

6 Comments

Andrew Taran

Oct 12, 2022

•

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

Roberto Rocha

Oct 12, 2022

•

Replying to

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.

Francisco Surrador

Oct 12, 2022

Replying to

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

Roberto Rocha

Oct 12, 2022

•

Best Answer

Replying to

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

bottom of page