Skip to main content

Eleventy (11ty) installation

Eleventy Site Testimonial Widget Embed

Eleventy is relaxed about HTML. Its Markdown setup turns raw HTML on by default, and Markdown files run through Liquid first, so you could paste the StoryProof div straight into a post. A shortcode is tidier: register it once in eleventy.config.js, call it from Markdown, Nunjucks or Liquid, and keep the script in the layout every page already uses.

  • A storyproof shortcode for every template language
  • The script once in an _includes layout
  • One Liquid line inside Markdown
Use the free toolStart free (opens in a new tab)
Eleventy · Card one: register the shortcode

eleventy.config.js

// eleventy.config.js
export default function (eleventyConfig) {
  // {% storyproof "abc123" %} prints the empty widget div
  eleventyConfig.addShortcode("storyproof", function (widgetId) {
    return `<div data-storyproof-widget="$YOUR_WIDGET_ID"></div>`;
  });

3 places to paste in Eleventy. Your widget id goes in once.

Free tool, no sign-upTry it below

Eleventy files

Config, layout and the Markdown call

Paste your widget id. Card one registers the shortcode, card two is a minimal layout in _includes with the script near the end, and card three is a Markdown page that uses both.

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

Part 1 · Card one: register the shortcode

eleventy.config.js

// eleventy.config.js
export default function (eleventyConfig) {
  // {% storyproof "abc123" %} prints the empty widget div
  eleventyConfig.addShortcode("storyproof", function (widgetId) {
    return `<div data-storyproof-widget="$YOUR_WIDGET_ID"></div>`;
  });
}

Part 2 · Card two: the layout

_includes/base.njk

{# _includes/base.njk: the layout your pages already name #}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
    <script src="https://app.storyproof.io/embed.js" async></script>
  </body>
</html>

Part 3 · Card three: a Markdown page

testimonials.md

---
layout: base.njk
title: What clients say
---

## Kind words from recent projects

{% storyproof "YOUR_WIDGET_ID" %}

Run npx @11ty/eleventy --serve, open the page, and view source. The div should sit where the shortcode was, and the script should appear once just before the closing body tag.

Generated in your browser from the id you type. Nothing is saved.

The problem, solved

Common Eleventy questions, answered with the embed

  • Problem 1

    Raw HTML, include or shortcode?

    All three work in Eleventy, and a site that mixes them is harder to hand over to the next developer.

  • Problem 2

    Nunjucks and Liquid pages side by side

    Older pages in Liquid and newer ones in Nunjucks usually mean two copies of every helper.

  • Problem 3

    Script printed by every shortcode call

    Putting the script inside the shortcode would add another copy each time a page uses it twice.

  • Problem 4

    Testimonials kept in a _data JSON file

    A global data file of quotes needs a commit, a build and a deploy to change, and nobody checks the wording was approved.

  • Problem 5

    Clients never get round to replying

    A portfolio site waits months for a testimonial because the ask is buried in an email thread.

In StoryProof

Wire it into an Eleventy site

Step 1 of 4

Register the shortcode

Add the addShortcode call from card one to eleventy.config.js. If your config uses module.exports, put the same call inside that function instead.

Three ways to place the div in Eleventy

MethodWorks becauseWhen to choose it
Shortcode calladdShortcode is universal across template languagesDefault for authors writing Markdown
Raw div pasted in MarkdownEleventy sets markdown-it html to trueA one off page you will not reuse
Hard coded in a layoutLayouts wrap every page that names themA fixed widget on every page using that layout

Before you start

Limits on Eleventy

  • Eleventy docs as of 2026-11-14

    The shortcode API, layout behaviour and Markdown defaults follow 11ty.dev as read on 2026-11-14. These files have not been built on a live Eleventy project.

  • Changed Markdown settings

    If your config replaces the markdown-it library or sets html to false, pasted divs stop rendering. The shortcode route is unaffected.

  • No Eleventy plugin

    StoryProof does not publish an Eleventy plugin. The shortcode in your config is the integration.

  • Host security headers

    A Content Security Policy from Netlify, Cloudflare Pages or your server must allow app.storyproof.io as a script source.

  • Badge on lower plans

    Widgets display a small "Powered by StoryProof" badge until Pro.

FAQ

Questions people ask

Short answers to what usually comes up next.

Do I need quotes around the id in the shortcode call?

Yes, pass it as a string. Without quotes Liquid and Nunjucks treat it as a variable name and print an empty attribute.

My Markdown uses Nunjucks instead of Liquid. Does that change anything?

Only the call syntax rules. If you set markdownTemplateEngine to njk, the same shortcode works, and commas between arguments become required.

Can I use a paired shortcode to add a heading?

You could, but a plain heading above the call in Markdown is simpler and keeps the shortcode down to one job.

Can a JavaScript template call the shortcode too?

Eleventy lists JavaScript templates among the places a universal shortcode is available, so an .11ty.js page can print the same div.

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

Give your Eleventy site a testimonial shortcode

Approve testimonials in StoryProof, then call one shortcode wherever proof belongs.

Start free (opens in a new tab)

Sources

  1. Shortcodes, Eleventy Documentation. Checked 2026-11-14.
  2. Layouts, Eleventy Documentation. Checked 2026-11-14.
  3. Markdown, Eleventy Documentation. Checked 2026-11-14.

Last updated 2026-11-14.