Add custom code to one page, a block on a page, or every page of your website to embed widgets and content from other apps, load fonts, add analytics, or change how your pages look.
Kajabi supports in-app code embedding, so you can connect a page to an external application, such as a calendar or a comments tool. This article covers Kajabi Pages, Checkout and Upsell pages, site-wide scripts, and pages built with the legacy Premier template.
Warning: Be careful when adding custom code to your site. If you're adding code from a third party, make sure you trust them. Their custom code might cause problems on your site, and any custom code can open your site to vulnerabilities and malware. Scan code you plan to use with a tool like VirusTotal or Snyk, and follow these best practices for custom code.
Add custom code to a single page
Add code in page Settings
From the Dashboard, open the Website tab.
Locate the Website Page or Landing Page you want to edit.
Click the Title of the page to open the editor.
In the page editor, click the Settings tab.
Click the Custom Code section.
Add your Custom CSS or Custom JavaScript in the panel.
Click Save.
Note: Do not include <style> or <script> tags in the Custom CSS or Custom JavaScript sections within page Settings.
Add code in a Custom Code block
Adding custom code in a block is useful for embedding content on your page, such as a calendar booking widget.
From the Dashboard, open the Website tab.
Locate the Website Page or Landing Page you want to edit, and click its Page Title.
In the page editor, open a section.
Click Add block.
Click Custom Code.
Add your custom CSS or JavaScript in the Code field.
Set the block's Background, Layout, Animations, and Time reveal options as needed.
Click Save.
Note: In a Custom Code block, use <style> (for CSS) and <script> (for JavaScript) tags for your code to work.
Add code to a Checkout page
From the Dashboard, click the Sales tab, then Pricing.
Click the Offer Title of the Offer whose Checkout page you want to edit.
Click Edit checkout at the top of the page.
Click the Settings tab.
Click the Custom Code section.
Add your Custom CSS or Custom JavaScript in the panel.
Click Save.
Add code to an Upsell page
From the Dashboard, click the Sales tab, then Pricing.
Click the Upsells tab.
Click the Upsell you want to edit.
Click Customize.
Click the Settings tab.
Click the Custom Code section.
Add your Custom CSS or Custom JavaScript in the panel.
Click Save.
Add custom code to all pages
Custom code on all pages is useful for adding a cookie disclaimer, custom fonts, analytics, and more.
From the Dashboard, open Settings.
Under Site settings, click Site details.
Under Page scripts, enter your custom code in the Header Page Scripts field.
Click Save.
Note: Code in Header Page Scripts goes in the <head> tag of every page except offer checkout pages and upsell pages. To track checkout pages, see Add JavaScript tracking code to Checkout pages.
Add custom code to a page built with Premier
Pages built with the legacy Premier template have their own Custom Code block, so you can embed code without access to the Code Editor. Use it to add a scheduler or video, change how a section looks, or add blank space to your layout.
Note: This section covers the legacy Premier template. If you use Kajabi Pages, follow the steps in the sections above.
Add a Custom Code block in Premier
From the Dashboard, open the Website tab.
Locate the Website Page or Landing Page you want to edit.
Click the Title of the page to open the editor, or create a new page with Premier.
Click Customize to open the page editor.
Click + Add Section from the sidebar.
Select the Custom Content section.
Click Add. Kajabi adds the Custom Content section to the bottom of the page.
In the Custom Content section, scroll to the bottom of the editor and click Add Content.
Select Custom Code.
Paste your code into the Code field.
Click Save.
Set Custom Code block appearance in Premier
Alignment: Position the block in its Custom Content section: Left, Centered, or Right
Container width: Choose how wide the block is
Place this block on its own row: Turn this on to separate the block from other blocks in the Custom Content section