Skip to main content

Kartra installation

Kartra Page Testimonials With Custom Code

Kartra’s Page Builder accepts your own markup through a component called Your Code, and it insists on one detail: a pre-filled container carrying data-embed="true" that you must leave untouched. Paste the StoryProof div and script inside that container and Kartra knows to render them on the published page.

  • Lines to paste inside the data-embed wrapper
  • Two widgets in one section, one wrapper
  • Which Kartra plans include Your Code
Use the free toolStart free (opens in a new tab)
Kartra · One widget: inside the pre-filled container

Page Builder › +Add Section › Your Code, or Components › Your Code › orange pencil

<!-- Kartra pre-fills a container with data-embed="true".
     Keep it exactly as Kartra wrote it and paste these lines inside it. -->
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>

2 places to paste in Kartra. Your widget id goes in once.

Free tool, no sign-upTry it below

Code for Kartra

Lines for the Your Code component

Kartra reads anything inside its data-embed="true" container as custom code. Enter your widget id, then paste the lines inside the container Kartra already put there.

Shown in StoryProof when you copy a widget’s embed code.

Part 1 · One widget: inside the pre-filled container

Page Builder › +Add Section › Your Code, or Components › Your Code › orange pencil

<!-- Kartra pre-fills a container with data-embed="true".
     Keep it exactly as Kartra wrote it and paste these lines inside it. -->
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>

Part 2 · Two widgets in the same section: still one container

Section › blue gear › Edit source code

<!-- Still inside the single data-embed="true" container for this section -->
<div data-storyproof-widget="YOUR_WIDGET_ID"></div>
<div data-storyproof-widget="SECOND-WIDGET-ID"></div>
<script src="https://app.storyproof.io/embed.js" async></script>

Save the component, publish the page and open its public URL. If nothing shows, check that the data-embed="true" container is still there and that your lines sit inside it.

The widget id you type is only inserted into the code on this page. Nothing is stored.

The problem, solved

Kartra page problems the StoryProof embed answers

  • Problem 1

    Pasted widget code just disappears

    Code dropped outside Kartra’s data-embed container is not treated as custom code, so the page publishes without it.

  • Problem 2

    Two proof blocks in one section

    Kartra allows one data-embed wrapper per section, so a second Your Code paste in the same section causes trouble.

  • Problem 3

    Each offer needs different praise

    A coaching programme and a low-ticket ebook attract different buyers, and generic praise helps neither.

  • Problem 4

    Clients would talk, but not type

    Busy coaching clients put off writing a paragraph, so the sales page never gets their story.

  • Problem 5

    My Kartra plan has no Your Code

    Kartra keeps custom code to some plans, so the component may simply be missing from your builder.

In StoryProof

Install it in the Kartra Page Builder

Step 1 of 5

Clone the page first

Kartra recommends testing custom code on a copy, and its support team does not troubleshoot custom code. Work on the clone, then repeat on the original.

A sample Kartra sales page layout

Sample layout, not a real customer

Section 1: headline and video sales letter.

Section 2: a two-column row, offer bullets in the left column and a Components › Your Code block in the right column holding a compact StoryProof widget.

Section 3: a full-width Your Code section with a wall of longer client stories, its own wrapper, and no second script line needed if section 2 already loads it.

Before you start

Kartra limits to know

  • Plan gated

    Kartra’s help article lists custom code on Growth, Professional and Enterprise only. Check Billing in your Kartra account.

  • One wrapper per section

    Kartra allows a single data-embed="true" container in each section, so group widgets inside it rather than adding more.

  • Kartra will not debug it

    Kartra support treats custom code as outside its scope. StoryProof cannot change Kartra’s builder either.

  • Badge on lower plans

    A small "Powered by StoryProof" badge shows on widgets until Pro.

  • Docs, not a hands-on run

    These steps follow Kartra’s help center as read on 2026-11-13. A person has not yet run them in a live Kartra account for this guide.

FAQ

Questions people ask

Short answers to what usually comes up next.

Why does Kartra need the data-embed wrapper?

Kartra uses it to tell your code apart from the page it builds, so the code renders correctly once published. Keep it exactly as Kartra pre-fills it.

Can I put the script in Tracking Codes instead?

Kartra’s page Settings › Tracking Codes has a header field that places code in the head. The async script can live there, while the div stays in Your Code.

Does this work on Kartra checkout pages?

The Kartra article read here covers Page Builder pages. Check whether Your Code appears in the editor for the page you want before planning around it.

Is there a StoryProof app in Kartra?

No. StoryProof installs with the two pasted lines described above, nothing more.

Still have a question? Ask the StoryProof team or book a demo.

Fill your Kartra page with client stories

Collect testimonials with one link and paste the widget inside a Your Code component.

Start free (opens in a new tab)

Sources

  1. Components: Custom HTML code, Kartra Help Center. Checked 2026-11-13.
  2. Add tracking code to pages, Kartra Help Center. Checked 2026-11-13.

Last updated 2026-11-13.