Check your plan

Custom Code is included with Kartra Growth, Professional, and Enterprise plans. Review or change your subscription in your account Billing.

To add custom code to a Kartra page, first choose a code container:

  • Click +Add Section > Your Code to add a full width code section to the page
  • Click Components > Your Code to drag and drop a code container into columns on the page
    Your Code Widget to enter custom code

To add your code:

  1. Click on the new code object in your page to select it
  2. Click the orange pencil edit button to open the source code editor
  3. Follow the instructions in the tooltip to place your code inside the DIV tags. For example:
    Example of Source Code input
  4. Click Save and your custom code is added to the page!

You can also edit the code of whole sections inside Kartra pages:

  • Click the blue gear icon on the right edge of a section to access the Section menu
  • Select Edit source code < >.

Please note: Custom code editing is provided for advanced users with code experience. Custom code or source code editing is outside the scope of Kartra's support team. It is provided as an extra option for your use but cannot be fixed by our support agents if something is broken due to its use.

  • If you are testing custom code in your pages, it is highly recommended to clone your page first.

The source code block is pre-populated with a mandatory <div data-embed="true"></div> container.

  • Important: Kartra uses the pre-populated DIV container to differentiate your custom code from the rest of the page, which helps prevent any code conflict or errors.

Paste your custom code inside the <div> tags, like this: <div data-embed="true"> YOUR CODE GOES HERE </div> The DIV tags must be used exactly as written, including the "data-embed" parameter. This parameter tells Kartra that everything inside the DIV tags is custom code, which is what allows the system to render it correctly when published.

  • You can add custom code anywhere in the source code, as long as you wrap your code with the DIV wrapper.

There is no limit to how much custom custom code you may add to your page, under the following guidelines:

  • You may add one data-embed="true" DIV wrapper per section in your page.
  • You may add as much custom HTML or JavaScript code as you want into the single data-embed="true" DIV wrapper.