# Weird behavior when importing custom JS libraries

**URL:** <https://community.weweb.io/t/weird-behavior-when-importing-custom-js-libraries/3220>\
**Category:** Developer corner\
**Created:** [June 26, 2023, 11:25pm UTC](https://community.weweb.io/t/weird-behavior-when-importing-custom-js-libraries/3220 "2023-06-26T23:25:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [June 26, 2023, 11:25pm UTC](https://community.weweb.io/t/weird-behavior-when-importing-custom-js-libraries/3220/1 "2023-06-26T23:25:20Z")

</div>

Hey, i found a strange behavior when embedding the scripts/using html widget

---

<div class="post-metadata">

**Author:** ![MichaelLovell](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/michaellovell/32/2157_2.png) [@MichaelLovell](https://community.weweb.io/u/MichaelLovell)\
**Post date:** [June 27, 2023, 5:41am UTC](https://community.weweb.io/t/weird-behavior-when-importing-custom-js-libraries/3220/2 "2023-06-27T05:41:07Z")

</div>

I had some similar frustrations trying to render a widget within a html element. The widget kept rendering below/outside the html element (and therefore appeared behind my button element at times).

I ended up removing any references inside the html code, and only use the html attributes section.

The result is a big empty html element within the editor, but finally renders correctly when published.

Editor view

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d422ae58118a09bd5c15e21517510ab2ad537cc0.png)

Published view

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/6104d99207fbccf9c13b7e36fd3a5e5a9823db64.png)  
i

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [June 30, 2023, 1:06pm UTC](https://community.weweb.io/t/weird-behavior-when-importing-custom-js-libraries/3220/3 "2023-06-30T13:06:04Z")

</div>

Hi,  
due to how the editor is build (two apps, and your app preview in an iframe), you should never use document but `wwLib.getFrontDocument()`  
Then I discourage using global variable directly, and always get the front windows first `wwLib.getFrontWindow().My_GLOBAL_VARIABLES`

For the html part, i think we should add a “onLoad” event, to be sure to execute the script _after_ the html is generated

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [July 2, 2023, 8:05pm UTC](https://community.weweb.io/t/weird-behavior-when-importing-custom-js-libraries/3220/4 "2023-07-02T20:05:56Z")

</div>

It would be amazing if you guys made a comprehensive guide on how to embed scripts like this, and how the app works in the background as well when importing custom scripts, because as of now, it is really just trial and error, which costs many of us a lot of time → which means that it costs us money too 🙂

Edit: one solution would be to not paygate the developers from using the custom plugins/components by a plan.

It’s not really possible that I have to do stunts to embed something that I’d be able to embed by copypasting HTML an some script tags in plain .html or an npm package with something like Vue. I understand this is a nocode tool, but this is really really terrible experience, to must spend hours on a dumb embed 😃

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [July 4, 2023, 2:29pm UTC](https://community.weweb.io/t/weird-behavior-when-importing-custom-js-libraries/3220/5 "2023-07-04T14:29:14Z")

</div>

Documentation and dev user experience is on our roadmap for the end of the year 🙂