Publishing & Settings

Adding Custom Code to a Page or your Entire Framer Site

2:28

44K views

Sep 12, 2023

About this lesson

In this tutorial, you'll learn how to add custom code to your Framer website. Whether you want to integrate tools like Intercom or Facebook Pixel, custom code allows you to enhance your site's functionality. Follow the step-by-step instructions to add code to your entire website or a specific page.

https://www.youtube.com/watch?v=5_oL9cvknUY&t=6s Finding the custom code section

https://www.youtube.com/watch?v=5_oL9cvknUY&t=10s Adding custom code to the head or body tag

https://www.youtube.com/watch?v=5_oL9cvknUY&t=17s Saving the custom code

https://www.youtube.com/watch?v=5_oL9cvknUY&t=22s Preview limitations

https://www.youtube.com/watch?v=5_oL9cvknUY&t=28s Publishing the website

https://www.youtube.com/watch?v=5_oL9cvknUY&t=32s Opening the website in a browser to see the custom code in action

https://www.youtube.com/watch?v=5_oL9cvknUY&t=68s Verifying Intercom chat functionality on the published site

https://www.youtube.com/watch?v=5_oL9cvknUY&t=77s Adding custom code to a specific page

https://www.youtube.com/watch?v=5_oL9cvknUY&t=92s Removing the custom code from the general section

https://www.youtube.com/watch?v=5_oL9cvknUY&t=96s Accessing the specific page

https://www.youtube.com/watch?v=5_oL9cvknUY&t=100s Pasting the custom code in the specific page's custom code section

https://www.youtube.com/watch?v=5_oL9cvknUY&t=109s Saving the custom code for the specific page

https://www.youtube.com/watch?v=5_oL9cvknUY&t=114s Republishing the site

https://www.youtube.com/watch?v=5_oL9cvknUY&t=123s Verifying custom code functionality on the specific page

https://www.youtube.com/watch?v=5_oL9cvknUY&t=128s Observing the absence of custom code on other pages

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00so while framer allows you to build an 0:02entire site without code 0:04it also allows you to add some custom 0:06code that runs on your entire website or 0:08on a specific page 0:10this is great for adding extra scripts 0:12like running an intercom chat or adding 0:16things like Facebook pixel the way you 0:18add custom code is by going to your 0:20project settings in the top right 0:22heading over to the general tab 0:25and scrolling all the way down to custom 0:27code 0:28this is where you can add custom code to 0:30the start to the end of your head tag or 0:33the start or the end of your body tag 0:36I have a code snippet saved which will 0:39load an intercom chat so I'm going to 0:41paste that at the start of my head tag 0:43and hit save 0:45now because I've added this script to 0:47the general tab of my project settings 0:50this script will run on the entire 0:52website 0:53if I go back and hit preview 0:58you will notice that nothing shows up so 1:00with the script A intercom chat bubble 1:02should show up in the bottom right but 1:04we do not load custom codes in the 1:07preview so you will have to publish your 1:08website first and then open it in the 1:11browser to see your custom code 1:13so let's publish this website 1:17then open in the browser 1:20and you will see in the bottom right 1:21that the intercom chat has loaded so we 1:25can see the intercom chat works and this 1:28will work on any page of my website 1:32so if you want to run the script only on 1:35a single page of your site so let's say 1:36our website also has an about page 1:40we can go back to our project settings 1:43go back to General and remove the script 1:45from our general custom code section 1:49head over to the about page 1:52and I'll paste it in the custom code 1:54section of the above Page hit save again 1:57and then publish the site 2:00so now if I reopen the site in my 2:03browser you will see that it runs on the 2:05about page so the intercom chat shows up 2:08here but if I go back to the home page 2:13you'll notice that the intercom chat 2:15does not show up here because we've only 2:17added the script to the above page 2:20so this is how you add custom code to 2:22your entire project or a single page

TeachesSite & Page Settings

Watch on YouTube ↗

‹ Adding Password Protection to Your Framer Website

Updating your Framer Website’s Title, Description and Social Images ›