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”:

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:

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:

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:

Now, after adding your DIV wrapper, go grab your ProveSource snippet, and paste it between the <DIV></DIV> tag.

Save your changes!

Did this answer your question?