Kartra Documentation TECHNICAL DOCUMENTATION

Embedding your own custom code

You may embed your own code into your Kartra Page for extra customization. The Kartra Pages builder will take any custom HTML, CSS and JavaScript code, but not PHP or any other programming language.

 

Adding custom CSS styles to your page

Navigate to Styles -> Custom Styles and add any custom CSS classes you want to your page. You will find a CSS editor that will accept standard CSS classes, attributes, rules, media queries, fonts, etc.

These custom classes will be added to your page header, and thus will apply to the whole page.

66

 

 

Adding custom HTML or JavaScript into the Canvas

There are two ways to embed your own HTML or JavaScript code into the canvas:

  1. Dragging a custom-code section into the canvas
  2. Dragging a custom-code component into a section

You will find both options in the sidebar, under the area “Your code”:

67

 

Once dragged into the canvas, in order to access their respective source code editor, click on the CODE icon for sections, and on the PENCIL icon for components:

70

 

By the way, you will also find the CODE icon in all our pre-templated sections in case you want to edit -or add to- them at a source code level!

71

 

 

The HTML/JavaScript editor

Once you’ve clicked on the CODE or the PENCIL icon as explained above, you will trigger the actual HTML/JavaScript editor. It should look something like this:

72

 

This is a standard HTML editor, so enter your custom code as you’d normally do in any editor.

Now, here’s the important thing to remember: Kartra needs to differentiate your custom code from the rest, and for that reason you need to wrap your HTML/JavaScript within the following DIV:


<div data-embed="true"> YOUR CODE GOES HERE </div>

The crucial bit is the “data-embed” parameter. Anything inside that DIV wrapper will be identified by Kartra Pages as your own custom code, which in return will allow the system to render it correctly once you publish the page online. Otherwise it won’t work correctly.

You can embed that DIV wrapper anywhere in the code you want. For example:

73

 

There is no limit in how much custom custom code you may add to your page:

  • You may add as much custom HTML or JavaScript code as you want into that data-embed=”true” DIV wrapper.
  • You may add oneĀ data-embed=”true” DIV wrapper per each section in the builder.

© 2020 Kartra All Rights Reserved