What code snippets are, and where they run
Code snippets are the simplest way past Teachable's settings. You paste code once, and Teachable adds it to every page of your school. Everything else in this section builds on them.
Where they are
In your admin, go to Site › Code Snippets. They're available on the Builder plan and above.
You'll find a few places to put code:
| Snippet | Runs for | Good for |
|---|---|---|
| Head snippets | Everyone, on most pages* | Styles, fonts, site-wide scripts |
| Logged In snippets | Signed-in students only | Student-only features, like a progress widget |
| Logged Out snippets | Visitors who aren't signed in | Sign-up prompts, visitor analytics |
| Custom CSS | Everyone, on most pages* | Plain CSS, no tags needed |
The head snippets take full HTML, so you can add <style>,
<script> and <link> tags. The Custom CSS
box takes CSS on its own.
* None of them reach checkout or pages built from Teachable's course design templates. More on that below.
Where they run, and where they don't
Teachable says snippets apply to all pages in your school. In practice they run on your home page, your own pages and the lesson pages, but not everywhere:
-
Checkout. Checkout now runs on Teachable's own address,
checkout.teachable.com, and your snippets and CSS don't reach it. It picks up the font and colours from your school's theme settings, and that's all. I've tested adding my own classes to it, and since the move from the oldsso.teachable.comcheckout, there's no way to customise it at all. - Course design templates. Pages built from Teachable's course templates don't load your snippets either. The exception is older schools still on the Teachable Classic design, where they do.
- Some of Teachable's own pages, such as the course overview, didn't load them in my testing.
When you add a snippet, check it on each kind of page: home, a sales page, a lesson and the student dashboard. Don't assume a page runs your code until you've seen it. And plan your design so checkout still looks right using only the theme's font and colours.
What Teachable will and won't help with
Teachable's support team won't debug custom CSS or JavaScript. That's fair: they can't support code they didn't write. It does mean you're responsible for anything you add, so keep it tidy, keep a copy outside Teachable, and test it after Teachable releases changes.
One head snippet
- The whole look of this lesson page, including the sidebar, the buttons and the switches in the top bar, comes from a single head snippet.
- Teachable's lesson page underneath is exactly the same as every other school's.
In short
- Site › Code Snippets, on Builder and above.
- Head snippets for everyone, plus separate slots for signed-in and signed-out visitors.
- They don't reach checkout or course design templates. Test each page type, and keep your own copy of the code.