Best way to add external JS scripts in PRO

[franticape]

Hello,

I recently had to add a few js scripts (third party widgets) to a site and noticed that they broke cornerstone’s preview. it didn’t break the site, per se but i couldn’t even see what i was doing because the js script messed up all the preview of the site.

the script is a normal widget from book a table and looks like this:

<!-- Start Bookatable Code -->
<script type="text/javascript" src="https://bda.bookatable.com/deploy/lbui.direct.min.js"></script>
<script type="text/javascript">
  LBDirect_Embed({
     connectionid  :  "ID_GOES HERE",
     style  :  {
       baseColor  :  "000000"}
    });
</script>
<!-- End Bookatable Code -->

(I changed the connectionid for privacy purposes, that is NOT the issue).

the site works ok, but the cornerstone preview stopped working, it looks all broke right from the part the JS script is added.

this has happened to me a few times before, and never bothered to ask because it’s not a huge problem, but now i’m wondering if i’m doing something wrong.

Just to clarify, i want to know what is the best practice when adding third party JS code like the one above to a pro site, i’m clearly doing it wrong because the preview stops previewing pretty much everything and i have to end up working in skeleton mode.

Thanks in advance!

[Prasant]

Hello @elpanda13,

Thanks for asking.

A plugin that I have used to insert scripts in header or footer is Insert Headers and Footers. It works quite well and have faced any issues as such. You can download the plugin from following resource. https://wordpress.org/plugins/insert-headers-and-footers/

Thanks.

[franticape]

Thanks @Prasant but i think i didn’t explain myself well enough.

Check the code from my past thread, that’s the code of a booking widget.
Now, let’s say i want to add it in section 5 of my homepage. i launch the content editor in pro, create 5 sections and then add the widget in a raw content element. the thing is that once i save and reload the page, the front-end works fine but the editor is all broken. i know the problem is that JS code (or ANY js code) because once i remove it, save the page and reaload the editor and everything looks fine.

your solution is alright for adding libraries and monitoring code, basically for every code that doesn’t really have a UI in the front-end, but how about hird party widgets and other JS-driven content? what’s the best practice for that?

Just to give you a visual look of what i mean in both scenarios: when i add a JS code in the raw content section, and what happens after i remove it: https://www.useloom.com/share/84233c90df5e408594bf6d2592940be4

[basanta]

Hi There,

Thanks for the clarification!

Can you please send your website details in a secure note so that we can have a look on to the issue.
This may due to wrong HTML code added by the script. we can only confirm after checking the site.

Thanks

[franticape]

Sure, try the credentials in the secure note

[basanta]

Hi There,

I investigated your site. The way you are adding the script is absolute fine. But the script you have added having some junk HTML and CSS code, which is causing the issue with the element.

Hope this is clear to you

[franticape]

oh! that is good to know!

Thanks!

[christian]

You’re welcome.