How to Add Custom Code to Your Page

Kayla M.

Updated

Learn to add the Custom Code Block to your Kajabi Page.

In this article:

This guide refers to the latest page editor available with the Website Builder and Kajabi Pages. If you are using the Premier Legacy Templates, please refer to the guide here.

What is the custom code block used for?

The Custom Code Block can be used to embed or add custom code for a variety of purposes, including:

  • Adding custom code (like embedding a calendar to your page) without requiring access to the Code Editor of your site
  • Creating blank spaces on your page to design beautiful, unique landing page layouts (check out the Iris Template below for an example):

761B7D1B-8A54-4CFF-953F-4C1E5E18914D.png

  • And more! Test out this block to see how you can design unique landing pages to fit your business with the Custom Code Block.
Warning:
Introducing custom code to your site can open you up to vulnerabilities and potential malware attacks. We recommend using vulnerability tools like VirusTotal or Snyk to scan any custom code that you intend to use and apply certain best practices to help reduce potential impact.

Adding a custom code block

Step 1. Add custom code block

  • Open the Website tab from the Dashboard.
  • Select the Pages tab.
  • Open the page editor for your Page. Learn more
  • Navigate to the sidebar panel.
  • Click Add Content.
  • From the list, select Custom Code.
  • Your newly created Custom Code Block will generate at the bottom of the Section.
  • Click Save to keep your changes:

Step 2. Enter your custom code

  • In your page, hover over the existing Custom Code Block you want to edit and click Edit.
  • In the Code field, paste a copied embed code or enter your custom code.
  • Click Save to keep your changes:

Customizing your custom code block

In a Custom Code Block, configure the Width of the block, enter your custom code, and configure your Block Settings. 

Block Settings

To adjust the look and feel of the Block, configure your Block Settings by customizing the:

Accessing your Custom Code Block Settings:

  • Open the Website tab from the Dashboard. 
  • Open the page editor for your Page. Learn more
  • Hover over the Custom Code Block you wish to customize and click Edit.
  • Navigate to the sidebar panel to access your Custom Code Block Settings:

955D5AC2-9EAF-4004-81AE-422EE946F704.png

Page settings: Custom CSS & custom Javascript

Although most can achieve unique designs with the Custom Code Block, you may desire more advanced functionality or appearances that can only be achieved with the Custom Code found in your Page Settings within landing pages built with Kajabi Pages.

The Custom Code in your Page Settings allow you to insert any custom HTML, CSS, or Javascript into your page.

This can be used to drop things like the following into your page:

...and more.

Caution:
If you are not familiar with CSS or JavaScript, we would advise that you avoid using this Section or consult with a professional developer to guide you through its functionality.

Accessing Page Settings Custom CSS:

  • Open the Website tab from the Dashboard. 
  • Open the page editor for your Page. Learn more
  • Click Settings.
  • Select Custom Code:

And that's how to add custom code to your page! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!

Did you find this article helpful?

Need more help?

Contact Us