Conflicting Scripts in HTML Embed

Design help Custom code
1

Hey All,

I have some code in an HTML embed element. It is for a third party forum service. However, I have two scripts that seem to be conflicting with each other.

script src=“//cdn.muut.com/1/moot.min.js”></script
script src=“https://code.jquery.com/jquery-1.11.2.min.js”></script

When the muut script is first, the private messaging features works but I’ve got no pictures/titles/blurbs for my different forum channels.

When the jquery script is put first, the forum channels have the pictures/titles/blurbs I came up with but suddenly the private messaging button no longer works.

Is there a way to get both these scripts to run together? When I run this same code on a non-webflow site, I get both pictures and messaging. It seems to work fine, so it seems that there is something about the webflow platform that is interacting with these scripts causing the conflict.

Any advice would be great!

Here is my site Read-Only:

https://preview.webflow.com/preview/af-ce-playbooks?utm_medium=preview_link&utm_source=designer&utm_content=af-ce-playbooks&preview=bd850e21b7780550fbd4a929b5319480&pageId=5d63fb8b618d250cb3569047&mode=preview

2

Hi @c-mac,

First off without even looking at your page, you are adding a JQuery script that is already built into Webflow by Default. This could be your issue right off the bat. Try removing that JQuery script and things should work from there.

Happy Designing,
Brandon

3

Hey, thanks for the advice. I tried removing the jquery script and the messaging feature will work if I do, but then my forum channels lose the pics/titles/blurbs I had inserted. They don’t show for whatever reason.

4

@c-mac - You can’t add a head element to the body element. Which is what you are trying to do in your embed.

Custom code like links to external CSS files need to be added to the page settings before body = (head).

Scripts that depend on jQuery need to be added to the page settings before body close area.

I would suggest reviewing this University article if you have not already.

1 Like
5

Thanks for the clarification @webdev, I figured I was missing an important piece.

6

Thanks. I will review this article. I am new to coding. However, I do have some custom code in the head tag of other pages. It is a jquery script that will search for HTML in rich text in order to render tables (since webflow doesn’t have a table feature yet).

Following your lead, I put this jquery in the head tag of the page settings and my pictures came back, but of course my messaging button is no longer working.

7

All jQuery dependent code needs to be in the Before Body Close area, since jQuery is loaded right before that custom code area.

8

Thanks. I moved it there and now messaging works again but no pictures. :frowning:

I will read your linked article more thoroughly and keep working on this. I am learning code for the first time and am a bit out of my depth.

Also, when I run this code in W3Schools, it works fine together.

9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.