Embedding your own custom code
Custom code blocks are included on Kartra Growth plans and above. Visit the Billing profile in your account to review your plan.
Coding skills required. This article is for advanced users.
You can add custom HTML, CSS, and JavaScript code to a Kartra Page for extra customization. The page builder does not accept PHP or any other programming language.
Add custom CSS style to a Kartra Page
Open any page in the page builder:
- Click Styles in the side menu, then Custom Styles
- Enter your custom CSS in the code field
- The field accepts standard CSS classes, attributes, rules, media queries, fonts, etc.
- Do not include <style> tags or any code other than CSS.
- Click Apply to save your changes
The custom CSS is added to a style container in the page <head> and applied to the whole page.
Add custom HTML or JavaScript to a Kartra Page
Insert HTML or JavaScript code into your page using a code component or section.
A code component nests inside columns on the page:
- Click Components in the side menu
- Select Your Code and drag the code component into the page
A code section is a full-width block:
- Click +Add Section where you want to place the code section
- Select Your Code in the Section menu and click the section to place it in the page
To add your code to the container, click on the GEAR and then CODE icon for sections, and on the PENCIL icon for components.
- Pro Tip: The CODE editor is also available in all Kartra pre-templated sections if you want to edit them at a source code level!
HTML/JavaScript code editor
Clicking the CODE or the PENCIL icon as described above opens the HTML/JavaScript code editor. It should look something like this:
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.