This article goes over customizing your school by adding code snippets like pixels and other analytics tools, as well as custom design elements like themes and fonts using CSS.
CAUTION: Adding custom code to your school is an advanced modification—we can't guarantee full functionality or compatibility with current or future versions of Teachable. This includes how the code functions, as well as how it impacts the appearance of your school.
Overview
School owners can add Meta tracking pixels, analytics tools, and other web services to their school using Code Snippets. This article goes over how to make advanced school-wide customizations using custom CSS and Head code snippets allow you to add customizations like third-party chat widgets or tracking pixels.head code snippets.
If you want to add page-level code snippets to do things like add social media buttons, this article has those steps.
Custom CSS
If you have coding knowledge and want to further customize the appearance of your school, then you can use the Cascading Style Sheets to add custom code to your school. Custom CSS allows you to modify your school’s fonts, colors, and backgrounds. To add custom CSS to your school, complete the following steps:
- Log in to your Teachable school.
- Select Site.
- Click Code Snippets.
- Enter the code snippet in CSS field.
- Click Save.
Head Code Snippets
School owners on the Basic plan and up can add additional HTML/JavaScript code snippets to their school's head tag, such as a Meta tracking pixel.
To add HTML/JavaScript code inside the head tag on all pages in your school, enter the code into the Head Code Snippets section:
Alternatively, in the Logged In Snippets section, you can add code inside the head tag for users that are logged in:
Or, in the Logged Out Snippets section, you can add code inside the head tag for users who are logged out:
After you’ve added your custom code, click Save.
CAUTION: If you're using SSO, head code snippets don't affect SSO-based login or checkout pages (i.e. sso.teachable.com).