Streaming live at 10am (PST)

Javascript and Github, where to put script?


#1

Hi, i’m using embed code on a page but since the code more thank 20K caracteres i have to host the custom code on Github. Now there is some HTML, Javascript and CSS in the HTML file on Github and all is working well but since i will use the Javascript on many pages on my website i would like to put it somewhere on the Webflow website. Prooblem is that the script doesn’t work when i put it on Webflow and i already tried to place on the whole website in projects settings (in the head, the body, footer etc) AND on the page where the embed code is placed.

Any idea why it doesn’t work?


#2

Hi there,

Definitely a great question! :blush:

I would suggest using RawGit:
https://rawgit.com/

RawGit serves raw files directly from GitHub with proper Content-Type headers.

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I’m happy to help further! :nerd_face:

My best,
Micah


#3

Thanks for your answer. What file should i use? Can i simply use the .html file without the Javascript and place the Javascript on Webflow? And what code would i use in the embed custom code on the Webflow’s page? (i’m a little confused, i only use Webflow without custom code normally)


#4

Great question!

I would suggest using the CSS and JS files through https://rawgit.com/, and recreate the HTML with Webflow so that you can have the style control within your Webflow project.

After placing the raw file URL in https://rawgit.com/, and grabbing the development URL - you can place the code within the page settings of the specific page using the files:


#5

Sadly i can’t recreate the html file with webflow since it contains some custom code and is more than 20K caracters. I face if there was not that number of caracters limits i would not have any problems, github and all that is just a workaround to this limitation in my case…


#6

So since i have to use an external html file because of the 20K limitation, how would i link to that file in the custom code embed in webflow? I can’t just use the raw file URL in the HTML embed in Webflow


#7

Definitely a great question! :blush:

An additional solution is to take advantage of Github Pages to actually host the project, then use an iframe to pull the Github hosted project into your Webflow project.

You can learn more about Github pages at: https://pages.github.com/

The following project is hosted with Github pages, and I just tested with an iframe within Webflow:
Read-only link - https://preview.webflow.com/preview/belmont-roofing-iframe?preview=0279e14fea9e1632037fc7efdbe269dc
Live site - http://belmont-roofing-iframe.webflow.io/

You can learn more about the settings I implemented for the iframe at https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I’m happy to help further!

My best,
Micah