Support / Thinkific

Publish to Thinkific.

Q: Nothing appears where I put the placeholder div.

Check three things: the design is published in Brackits, the token in the div matches the one shown in the embed dialog exactly, and the Thinkific connection is still active in your project settings. The loader is installed when you connect. If you disconnected and reconnected, republish the design once to be sure.

Q: My header shows up on pages I didn't put it on.

The design is set to floating mount mode, which renders site-wide by design — that is what you want for announcement bars. Switch it to inline so it only renders where you place its placeholder.

Connect your school once, then place designs wherever you need them. Republishing in Brackits updates every page they appear on.

← All support

Setup

Connect your school.

01

Open Integrations.

In Brackits, go to Integrations in your team sidebar and choose Thinkific.

02

Authorise Brackits.

Enter your school's subdomain and approve the connection on Thinkific. We request one permission — write:site_scripts — which lets us install the small loader script your designs need.

We never see your Thinkific password, and you can revoke access at any time.

03

Point a project at the school.

Open the project you want to publish from, then enable the Thinkific connection in its settings. A project maps to one school.

Placing a design

Three ways to place it.

All three start the same way: open a design in Brackits and click Publish. That mints its embed token and compiles the bundle.

Recommended

The theme section

In the Site Builder, add the Brackits (latest+) section to a page, leave Source on the embed option, and paste your embed token. Save.

Best for most cases: it renders the live embed, so republishing in Brackits updates the page with no further action.

Anywhere else

A placeholder div

Paste <div id="brackits-YOUR_TOKEN"></div> into any rich-text field — a course page, a lesson, a custom page.

The loader script we installed at connection time watches for these placeholders and fills them, including inside the course player.

For search engines

The SEO snapshot

Embeds render in the browser, so their text is not in the page source. The snapshot pastes a flattened copy directly into the section instead.

Use it on marketing and landing pages you want indexed. See the steps below.

SEO snapshot

Make a design indexable.

Read this first

Switch the section's Source to Inline HTML / CSS / JS before you paste. If Source is still set to the embed option, Thinkific accepts the pasted code and then ignores it — the section renders the embed instead, with no warning that your paste was discarded.

01

Copy the snapshot.

Open the design in Brackits and choose Copy for Thinkific (SEO). You get three blocks: HTML, CSS, and JavaScript.

02

Set Source to Inline.

In the Site Builder, select your Brackits section and change Source to Inline HTML / CSS / JS.

03

Paste all three fields.

Paste each block into its matching field. Paste all three — a partly filled section renders broken.

04

Save.

Press Save in the Site Builder. The design is now in the page source, so search engines can read it.

The trade-off: a snapshot is a point-in-time copy. Change the design in Brackits and you must copy it again.

Doing this by hand for several designs gets tedious — that is exactly what the Chrome extension automates.

Personalization

Designs that know who's looking.

A design can greet a signed-in student by name or list the courses they're enrolled in. Because this involves your learners' data, every tier is off by default and you switch it on per section in the Site Builder.

Dashboard cards

Passes the cards a student sees on their dashboard, so a design can mirror their progress.

Visitor enrollments

Passes which courses the signed-in visitor is enrolled in, for "continue where you left off" layouts.

Site catalog

Passes your public course catalog, so a grid stays current as you publish courses. No learner data involved.

Learner data is used only to render the design you asked for. It is never sent to AI providers. See our Privacy Policy for the detail.

Troubleshooting

When something looks wrong.

I pasted the inline code and the section still shows the old embed.

Source was still set to the embed option when you pasted. Thinkific silently ignores the inline fields in that mode. Set Source to Inline HTML / CSS / JS, paste all three fields again, and save.

Nothing appears where I put the placeholder div.

Check three things: the design is published in Brackits, the token in the div matches the one shown in the embed dialog exactly, and the Thinkific connection is still active in your project settings.

The loader is installed when you connect. If you disconnected and reconnected, republish the design once to be sure.

My header shows up on pages I didn't put it on.

The design is set to floating mount mode, which renders site-wide by design — that is what you want for announcement bars. Switch it to inline so it only renders where you place its placeholder.

The design looks different inside Thinkific than in the Brackits preview.

Embeds render inside a Shadow DOM, so your Thinkific theme's CSS cannot reach them and vice versa. Differences usually come from the surrounding page width. If a font looks wrong, check the fonts set on the project.

I changed the design but Thinkific still shows the old one.

Republish it in Brackits — that recompiles the bundle. Live embeds then update on the next page load; you may need a hard refresh to get past your browser cache. If you used the SEO snapshot, copy and paste it again: snapshots are point-in-time copies and do not auto-update.