Help using the Code Widget and javascript

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 https://airbnb.design/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,

Welcome @byronjenny,

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>

Ah, Thank you so much for the quick response! Really appreciate this, very helpful. I will try this out.
Thanks again!

1 Like

Hi Whittfield, quick question - can I reference the js file I’ve attached in project settings with the code widget?

Here is screenshot of it attached in project settings

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)

Right now the data.js file just takes over the page. What I am trying to do is have the data.js file just be in a bloc on the page.

I also uploaded an example of the just the data.js file which you can see here:
http://edwardporter.work/javascriptest/demo.html

Let me know if my question is unclear and thanks again for your help!

Time for me to dust off those AE skills.

Couple of things need to happen.

  1. Your code is 100% width x 100% height and that’s why it takes over the screen.
  2. But you are right in that you want it in a bloc, but that’s not the way it’s done.

I’m on my phone right now not my Mac. I’m a bit tied up right now but i’ll follow up and get you going

Cool, thanks so much. Yeah I’ve got a long way to go with my understanding of basic web code!

I’ll keep an eye out for any updates, No rush. Thanks again.

Hey Whittfield, just checking in about any guidance on the javascript issue?
Thanks again for your time and help!

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.

Hi @byronjenny, I’m checking on it right now. I’ll post back shortly.

@byronjenny,

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!

Here is one more example.
https://codepen.io/isotopeee/pen/ERpVaJ

In the 1st example I sent they use bodymovin.js however that is the old js. New and correct js to use from https://github.com/airbnb/lottie-web is lottie.js (I hope that makes sense)

Hi @byronjenny,
Here’s the codepen version working in a Code Editor bric and using version 5.5.6 of the bodymovin library.

https://blochead.dev/lottie

  1. 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.

  2. The CSS styles can be added to the Code Editor - Page Header.

  3. 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!