Kartra Documentation Technical Documentation for Kartra

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.

Stay compliant with Facebook rules

Occasionally, you might find your Kartra subdomain URL, such as YourAccount.Kartra.com, banned by Facebook or any other Social Media network. As a result, you would not be able to advertise, or even copy/paste, your Kartra Pages via Facebook. They will just block the URL altogether.

When that happens, it might seem that Facebook has blocked Kartra as a whole, but in reality every subdomain is an independent entity on its own. Therefore, the block has happened only to your Kartra subdomain while other users are able to post their subdomains without a problem.

So, why does this happen and, more importantly, how can you fix it?

 

Why did Facebook block my URL?

Facebook, Google and all other social networks have certain algorithms that pick when a domain (or subdomain in this case) has gone “rogue”. Now, don’t be offended! It just means that your subdomain has triggered their algorithm’s alert parameters.

Here are the key guidelines that Facebook recommends in order to make sure your subdomain remains always in good standing:

  • Don’t spam it over multiple groups, forums or private messages: This is probably the number-one factor to fall out of grace with the Social Gods. They know when you’re dropping your URLs at an excessive rate over multiple channels or conversations. Be considerate, don’t “share” your pages and URLs unless it really makes sense in the context of the conversation, and recognize that there’s a very fine line between hustling and spamming.
    Finally… never, under no circumstance, use an automated “bot” to auto-promote your site. That will get you blocked the moment they pick up on it!
  • Display the compliance disclaimers: This is another biggie: make sure you include, at the footer of your pages, a link to your Privacy Policy, Terms & Conditions, Contact Us, and that kind of stuff. They want to know that your site is legit, and having the proper footer links in place goes a long way. Kartra Pages offers a plethora of footer section templates, so it should be easy to add them to your pages.
  • Avoid a disconnection between the ad verbiage and the page content: If you are running paid ads, it’s important that the ad text and image faithfully describe the landing page content and ultimate purpose. Don’t be tempted to artificially juice up your ad copy (and graphic appeal) just to boost clicks. If those click bounce away fast, Facebook will recognize the disconnection and will penalize you.
  • No automated popups! Boy, does Facebook hate popups that trigger automatically upon landing! They consider them intrusive and disrespectful to the user experience, and they have might a point. That being said, popups and modal windows that trigger upon the click of a button or any other on-page element are generally OK.
  • No exit popups: Same as above: Facebook frowns upon practices that hinder the user’s browsing experience, and trying to intercept the user’s free navigation flow as they exit falls in this category.
  • No autoplay videos with audio ON: Same as above: nobody likes to be startled by a thundering voice upon landing, and neither do Facebook. You have two options: have your videos play on click, or have the muted if autoplayed. Kartra Videos sport both the “autoplay” and the “auto-mute on start” features… use them!
  • Make sure you content is within their boundaries: There are certain topics or niches that Facebook, and Social Media in general, feel particularly uncomfortable with. You know the usual suspects: content of sexual nature, tobacco and drugs, sensational and drama-stirring topics, denigratory or discriminatory activities, multi-level marketing and get rich schemes, etc. You may read the full list at the Facebook’s prohibited content page.
  • Make sure the page actually works! Make sure there are no broken lines, images or videos. Make sure it’s mobile responsive (Kartra Pages are mobile by default *wink*). Make sure your images and videos are not overly heavy to load (here’s an article to optimize your videos for online streaming), etc.

 

Ok, I’ve been a good boy… how do I get them to unblock my URL?

Let’s say you’ve followed all the guidelines above, and you’re ready to request a revision from the Facebook moderators. First and foremost, understand that it’s a manual process and they will take their merry time, perhaps weeks, to check your page out and get back to you with a resolution. That is why it’s so important to be proactive, apply those guidelines and to not get banned to begin with!

Anyway, if you’re ready to request a pardon, these are the places to go:

Like I said before, it won’t be a quick fix. At this point, your job simply boils down to…

  • Open a ticket at the Facebook Helpdesk and document your case, describing the actions you’ve taken to alleviate the situation as per the guidelines above.
  • Explain why your URL complies with Facebook rules, so they note that you’ve indeed read and acknowledged their terms.
  • Be polite, professional and, above all, patient. Don’t forget that, once your case is assigned, there will be a human support representative on the other end of the line and you want to make his/her job as streamlined and painless as possible.

Good luck!

 

© 2024 Kartra All Rights Reserved