Interaction on custom code

Design help Custom code
1

I have embedded code with buttons. Is there a way to add interactions to those buttons on click?

Here is my site Read-Only: https://preview.webflow.com/preview/?utm_medium=preview_link&utm_source=_content==ff4df600f92f593c020cdc19eae9a122&workflow=preview
(how to share your site Read-Only link)

2

It’s possible but needs some hacky way to achieve it.

  1. create a dummy with 2 classes, then add whatever interaction you want to this dummy button.
  • (“btn-old”) : Global class to bind interaction. This class needs to add to your embedded button.
  • (“is–real”): Combo class to differentiate a dummy element from your embedded element.
    Don’t add this class to your embedded button

image
image1872×478 44.2 KB

  1. add the global class to your embeded button

    image
    image1142×862 45.1 KB

  2. add custom code

<script>

const allBtnClass = "btn-old"
const realBtnComboClass = "is--real"

let btnData = $(`.${allBtnClass}.${realBtnComboClass}`).attr("data-w-id")
$(`.${allBtnClass}:not(.${realBtnComboClass})`).attr("data-w-id",btnData)
Webflow.require('ix2').init()

</script>

image
image805×477 9.48 KB

4 ) Set dummy button display to hidden. Don’t Remove It.

Demo
Read-only

3

First of all, thank you very much for your time!
Second, the buttons i want to interact are the “close, minimize & maximize” that are on the title bar.
Could your method apply to those buttons also? (with their designated functions)

4

Of course, It could.
If you understand how my method works you can apply it easily.

  • create dummy element to create a global class
  • add that global to element in embed code
  • trigger or target element on the interaction panel with global class
  • if you want to target another element in embed code just create another global class for the target element. Use the target global class in the interaction panel.
  • Use my custom code to copy interaction data from dummy element to all the embed elements then initialize the Webflow IX2. ( you need to customize it to work with multiple global classes )

btw, I think is much much much better to write a custom code to do all the interactions you need.

5

Hi,
I’ve added the custom code to my project settings, created dummy button (btn-old) and added interaction button hide element on click (named it “hide windows”), then added “btn-old” to html-embed7 “close” button - but it still wont work :frowning:

have any idea what am I doing wrong?