I’m trying to install a third party widget (built in java) into my site to manage non-profit donations, but I’m having trouble successfully integrating it into my site. You can find my preview link here. Specifically, look at the /donate page, which demonstrates the problem I’m encountering. This screenshot just shows that the code isn’t rendering on the final site - It’s in a div block with a color wash over it just as a visual placeholder.
The widget is built by Artful.ly, and comprises of a script that lives in the head tag, and a simple HTML embed that lives in the body of the site that calls the script. My knowledge of java is limited, as is my understanding of integrating it into HTML/CSS.
I was previously able to get the widget to render on the final site, but since trying to style the forms with inline CSS, I broke the functionality. Since then, repeating the steps that (I believe) got it to work properly the first time returned no results - only a blank div block!
It’s essentially a form input and a button that confirms the donation. This third party script has a “drawer” of sorts that slides up from the bottom of the window to complete checkout.
As for the code itself, this is in the page-specific “custom code” section, inside the head tag.
In my HTML embed element on the canvas, I just have:
<div id='donation'></div>
Any suggestions or tips on how to solve this problem? Is it a compiling issue? Syntax? Is there another step I need to take with Webflow to get it to render properly? Any help is hugely appreciated.
Additionally, the next step would be styling these external elements with CSS without breaking the script!
That doesn’t look like it did anything, but just now, upon publishing, I realized that I had an “Insecure Content Blocked” Badge in my chrome address bar:
Upon turning that off, the site switched from https to http, and the script rendered successfully. This is problematic, as the rest of the site is https, and I obviously would prefer the entire site to be secure, especially on the donate page of all pages! Is there any way to modify the script to load under https?
“removing http: part from src means you don’t want to load external files/resources with fixed protocol that you are mentioning in the src, rather you want to load the external resources with the same protocol the demanding resource is residing.”
That seemed to do the trick.
If you happen to know, is it possible to style these external elements with CSS, so that they can more accurately reflect the visual style of the other fields/buttons on my site?
On my example i’ve just changed the background color.
You can change everything, add everything you want and seeing it visually.
If you are not familiar with css, look on the css panel properties on webflow it has everything you need !
In my example here, if you want to change the background color, just hover on the wf background color it ll tells you the css name. Then just type it in Stylizer 7
Wow, this is killer. Thank you so much for taking the time to make this. I’m somewhat familiar with CSS, I just wasn’t sure if it was possible to apply a CSS style made in Webflow to these external elements. This is a great workaround.
