Hi, I had a question about the Code Widget and javascript. Is it possible to import a js file to the widget rather than copy and paste the code into the widget’s Code Editor window?
I have been experimenting using Bodymovin: https://vimeo.com/217683641 It allows you to export a js file from Adobe After Effects, a program I frequently use. It can also be used to create json data for use with Lottie Lottie
I have tried opening the exported js file in a text/code editor and pasting it into the widget’s Code Editor window, but I couldn’t get it to work. Possibly I didn’t wrap the code in a js script first. Unfortunately, being a novice with web code, I have no idea how to wrap the code in a js script. Moreover, it just seems much cleaner if there was a way to import the js file into the code widget bric rather than try to paste the code in by hand.
Any suggestion would be greatly appreciated! Thank you for your help and thoughts,
You can link to the .js file. in project settings (or page settings) depending on whether you need it site-wide or not. Attach the file and that’s it. You can update the file as necessary without issue. (see below)
Additionally
It’s worth noting that some .js you can place on the page in with Code Editor without issue, but some code like jquery will need to be written in a specific way to do so. Since you’re not a coder, I’d stick with the method outlined above. It should cover you in any case, and loads the script to the bottom of the page where all other javascript is loaded.
…and for reference in case you ever need it. <script> Place code here </script>
Here is my attempt to add data.js in the code widget. I realize your advice for the script wrapper was for pasting the actual code in the wrapper but since I wasn’t sure how to do I just tried using it to attached the data.js in the project settings. (hope that makes sense)
ah got busy with the Launch of card designer and completely slipped my mind. I’ll jump back in tomorrow. It’s end of day an I have a prior engagement. I’ll ping you tomorrow eve with results of what I find.
No worries, completely understand you’ve got other stuff on your plate.
Just thought I’d check in again. Would love to hear any solutions you might be able to find. Very curious to see if I can get this working!
Thanks again for all your time -very much appreciated.
I tried your code in the code widget, but had no luck getting the javascript to work there. I think the reason is the formatting of the JS. I couldn’t get it to validate after copying and pasting. I think Blocs is having the same trouble when it’s pasted into the code widget.
I tried it with Sublime Text, but it’s such a big script and trying to reformat it by hand is unrealistic. If you can manage to get those script tags (specifically that first one ) copied with good formatting, I think you’d be able to just paste in the SVG (wrapped in the div with the lottie class) along withe the two script tags and have what you are after. but now that Javascript is going to give you problems until you can find a way to have it output uncompressed I think.
Thanks so much for trying to get it to work. I think the code I put online may not have been the correct format. I found something online that shows the correct way to use the code online: https://codepen.io/airnan/project/editor/ZeNONO
Unfortunately I can’t figure out how I would do this in Blocs.
I know you’ve already given a lot of time to this, which I really appreciate. If you do see how the codepen example could be apply to blocs it would be great to hear your thoughts/ideas.
Regardless, thanks again for all your help with this!
You basically need to include the bodymovin library at the footer of the site. You can use page and project attachments or link to it in script tag in the Code Editor - Page Footer.
The CSS styles can be added to the Code Editor - Page Header.
The wrapper div with the SVG go in a Code Editor bric placed anywhere you want. You can also adjust the css and the SVG dimensions to your liking.
Thanks so much! My apologies for such a long delay in responding to your help with this.
It has just been this week that I’ve been able to play around with getting this to work. Unfortunately, my Code Editor bric skills are too limited to make this work on my end. It’s now 2+ weeks since you posted your response, so I’ve probably lost the chance to continue this conversation.
If you do read this, I would love if you could share the blocs project used to create the link. It would probably be the best chance I have for understanding how to use.
Again, Thank you for all of your time and help with this!
