Embedded HTML: sourcing JS link from a collection item

Design help Custom code
1

Hi,

On my blog there is a lead magnet (button or animation) which, when clicked, should display a pop-up modal (form) from an external source (JS from Convertkit). However this JS varies for each blog post. Therefore for each blog post I added a field with the specific link, which I was hoping to load using the “add field” function within an HTML-Embed element.

I tried the following methods:

alternative 1) the “add field” pulls the entire script into the form as a variable (
e.g. < script > … < /script >. For example:

Screen Shot 2022-11-11 at 18.36.37
Screen Shot 2022-11-11 at 18.36.371646×278 17.4 KB

alternative 2) the “add field” only pulls the URL of the external JS as a variable into the code, while the rest is hard-coded. For example:

Screen Shot 2022-11-11 at 18.35.53
Screen Shot 2022-11-11 at 18.35.531656×300 28.7 KB

Unfortunately this neither options seem to work, as it does not seem to be recognized as JS by the browsers. What am I missing here?

2

Approach #1 would cause encoding issues, even if you had the entire correct script chunk stored in a plaintext field. I’ve done this with Soundcloud widgets, and you need to decode it with script, which is ugly.

Approach #2… assuming your stored URL is correct (?) My guess is you have an encoding issue, but you’d need to share your readonly link and a published link to your site in order to check.