Skip to main content

Craft CMS installation

Craft CMS Testimonial Widget Embed

In Craft, the StoryProof embed belongs in your Twig templates, not pasted into a rich text field. Put the div in a small partial, register embed.js with Craft’s js tag so it is output at the end of the body, and let editors pick which widget an entry shows through a Plain Text field that holds the widget id. Templates stay in Git, editors never touch markup.

  • A Twig partial with the div and the js tag
  • An include driven by an editor field
  • The layout check that makes registered scripts appear
Use the free toolStart free (opens in a new tab)
Craft CMS · File 1: the partial

templates/_partials/storyproof-widget.twig

{# Renders one StoryProof widget. Pass widgetId when including. #}
<div data-storyproof-widget="{{ widgetId }}"></div>
{% js "https://app.storyproof.io/embed.js" with { async: true } %}

3 places to paste in Craft CMS. Your widget id goes in once.

Free tool, no sign-upTry it below

Twig snippets

Twig for your Craft templates

Enter a widget id to use as the fallback. File 1 is the partial. File 2 shows the include in an entry template, using a field called storyproofWidgetId when an editor has filled it in. File 3 is the line your main layout needs before the closing body tag.

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

Part 1 · File 1: the partial

templates/_partials/storyproof-widget.twig

{# Renders one StoryProof widget. Pass widgetId when including. #}
<div data-storyproof-widget="{{ widgetId }}"></div>
{% js "https://app.storyproof.io/embed.js" with { async: true } %}

Part 2 · File 2: include it from an entry template

templates/case-studies/_entry.twig (any template that extends your layout)

{% block content %}
  {{ entry.body }}
  {% include "_partials/storyproof-widget" with {
    widgetId: entry.storyproofWidgetId ?: "YOUR_WIDGET_ID"
  } %}
{% endblock %}

Part 3 · File 3: the layout outputs registered scripts

templates/_layout.twig, just before </body>

    {{ endBody() }}
  </body>
</html>

Load a page that uses the template and view its source. You should see the div where the include sits and the embed.js script tag near the end of the body.

The Twig is assembled in your browser. Nothing you type is stored.

The problem, solved

Craft testimonial chores, and the StoryProof way

  • Problem 1

    Editors paste script tags into Redactor

    Raw code in a rich text or CKEditor field is easy to break and hard to spot in review.

  • Problem 2

    A testimonials channel nobody updates

    A section of hand entered quotes needs someone to copy each new one in from email.

  • Problem 3

    Two widgets on a page, two script tags

    Hard coding the script in every partial risks duplicate tags when a page includes the partial twice.

  • Problem 4

    Different praise for each service page

    One generic carousel across the site wastes testimonials that speak to a specific service.

  • Problem 5

    Client team and agency both need access

    Sharing one login for the testimonial tool blurs who approved what.

In StoryProof

Wire it into Craft

Step 1 of 4

Add the partial

Create templates/_partials/storyproof-widget.twig with File 1. Template paths in Craft are relative to the templates folder, so the include path drops the extension.

Before you start

Things the guide does not cover

  • Based on Craft 5 docs as of 2026-11-13

    The js tag, endBody() and template paths follow Craft’s version 5 documentation read on 2026-11-13. The Twig has not been run on a live Craft site.

  • async on the js tag

    Craft documents passing HTML attributes to the js tag and shows defer in its example. async is an ordinary attribute, but check the rendered tag carries it.

  • Static caching and CSP plugins

    A static cache or a security plugin that sends a Content Security Policy can block or freeze the output. Allow app.storyproof.io in script-src if you use one.

  • No Craft plugin

    StoryProof has no Craft plugin or field type. The field above is an ordinary Plain Text field holding an id.

  • Badge on lower plans

    A small "Powered by StoryProof" badge sits under widgets until Pro.

FAQ

Questions people ask

Short answers to what usually comes up next.

Why not paste the embed into a rich text field?

Rich text editors may strip or rewrite script tags, and a code change then needs an editor rather than a commit. A partial keeps the markup in version control.

Does this work with a headless Craft front end?

Not as written. These snippets are for Craft rendering Twig itself. A separate front end would place the div and script in its own framework.

Can a Matrix block choose the widget?

Yes. Add the Plain Text field to a Matrix entry type and include the partial while looping over the blocks, passing that block’s value as widgetId.

What happens if two includes register the same script?

Check the page source. If you find two embed.js tags, move the js tag out of the partial and into the layout; one copy is all the page needs.

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

Give your Craft editors live testimonials, not a quotes channel

Collect and approve in StoryProof, then render the widget from one Twig partial.

Start free (opens in a new tab)Book a demo (opens in a new tab)

Sources

  1. Twig Tags (js, html), Craft CMS Documentation. Checked 2026-11-13.
  2. Twig Functions (head, beginBody, endBody), Craft CMS Documentation. Checked 2026-11-13.
  3. Twig fundamentals (extends, block, include), Craft CMS Documentation. Checked 2026-11-13.
  4. Templates, Craft CMS Documentation. Checked 2026-11-13.
  5. Plain Text Fields, Craft CMS Documentation. Checked 2026-11-13.

Last updated 2026-11-13.