Jekyll and GitHub Pages installation
Jekyll Site Testimonial Widget Embed
Jekyll already has the two tools this needs. An include in _includes takes the widget id as a parameter and writes the div wherever you call it, in a page or a post. The script goes once in _layouts/default.html. If your site uses a theme gem, such as the default on many GitHub Pages sites, you override its layout by adding a file of the same name, and no plugin is involved, so GitHub Pages builds it as usual.
- An include that takes id as a parameter
- A front matter switch for the script
- Overriding a theme layout on GitHub Pages
Liquid snippets
Include, layout and the call
Type the widget id. Block 1 is the include file. Block 2 goes in your default layout. Block 3 is what you write in a page or post, together with the front matter flag that switches the script on.
Part 1 · Block 1: the include
_includes/storyproof.html
<div class="storyproof" data-storyproof-widget="{{ include.id }}"></div>Part 2 · Block 2: the layout, just before </body>
_layouts/default.html
{% if page.storyproof %}
<script src="https://app.storyproof.io/embed.js" async></script>
{% endif %}
</body>
</html>Part 3 · Block 3: a page or post that shows testimonials
about.md (or any file in _posts)
---
layout: default
title: About
storyproof: true
---
## Kind words
{% include storyproof.html id="YOUR_WIDGET_ID" %}Run bundle exec jekyll serve and open the page locally. View source to find the div in the content and a single embed.js tag before the body closes. Push to your publishing branch and GitHub Pages rebuilds the site.
Assembled in your browser only. The id is not kept.
The problem, solved
Jekyll friction points, and how StoryProof handles them
- Problem 1
Quotes live in _data/testimonials.yml
Each new quote is a YAML edit, a commit and a rebuild, and nothing checks who actually wrote it.
How StoryProof solves it
Customers submit to StoryProof and nothing shows until you approve it. You pick which approved testimonials each widget displays.
- Problem 2
The theme layout is not in my repo
Sites using a theme gem do not have its _layouts folder, so there is nowhere obvious to add a script.
How StoryProof solves it
Create _layouts/default.html in your site, starting from the theme’s copy. Your file wins, and the StoryProof script needs just one line in it.
- Problem 3
Same widget on posts and pages
Copying markup into every post makes changes tedious and error prone.
How StoryProof solves it
The include writes the div from one file. Pass a different id per call to show a different widget.
- Problem 4
Script loading on every page
A script in the layout loads even on pages without testimonials.
How StoryProof solves it
The front matter flag limits it to pages that ask for it, and one embed.js load still fills every StoryProof div on such a page.
- Problem 5
Readers cannot submit from a static site
GitHub Pages has no server to receive form posts or store video.
How StoryProof solves it
Link to your StoryProof collection page from the site or a README, or share it as a QR code.
In StoryProof
Set it up in Jekyll
Step 1 of 4
Add the include
Save Block 1 as _includes/storyproof.html. Inside it, include.id is filled by the id you pass when calling it.
Step 2 of 4
Get a layout you can edit
If _layouts/default.html already exists in your site, open it. If it comes from a theme gem, run bundle info --path followed by the theme name, copy that theme’s default.html into your own _layouts folder, and edit the copy.
Step 3 of 4
Add the script block
Paste Block 2 just before the closing body tag of your default layout. It prints the script only when a page sets storyproof: true.
Step 4 of 4
Call it and publish
Add storyproof: true to a page’s front matter and the include call where testimonials belong. Check locally, then push. GitHub Pages publishes when the change reaches its publishing source.
Before you start
Where this stops
Jekyll and GitHub docs as of 2026-11-13
Include parameters, layout overrides and GitHub Pages build rules follow jekyllrb.com and docs.github.com as read on 2026-11-13. The snippets have not been built on a live site.
Theme layouts change
Once you copy a theme’s default.html, updates to that theme’s layout no longer reach you. Compare your copy when you upgrade the theme.
Front matter flag is opt in
A page with the include but without storyproof: true shows an empty div. Add the flag to every page that calls the include.
No Jekyll plugin
StoryProof has no Jekyll plugin, which suits GitHub Pages since it cannot build sites with unsupported plugins. The include is plain Liquid.
Badge on lower plans
Widgets show a small "Powered by StoryProof" badge until Pro.
FAQ
Questions people ask
Short answers to what usually comes up next.
Can I paste the div straight into Markdown instead?
It may well render, but the include is easier to change later because the markup lives in one file, and authors type one tidy line instead of HTML.
Does this need a GitHub Actions workflow?
No. It uses only includes, layouts and front matter, which a standard GitHub Pages build handles whether it publishes from a branch or through Actions.
How do I show a widget on every post?
Call the include from _layouts/post.html with a fixed id, and set storyproof: true for every post through a front matter default in _config.yml with a scope of type posts.
Does the site need rebuilding when testimonials change?
Only when the site’s files change. Which testimonials the widget shows is set in StoryProof.
Still have a question? Ask the StoryProof team or book a demo.
Retire the testimonials YAML file
Collect and approve in StoryProof, then call one Jekyll include wherever praise belongs.
Sources
- Includes, Jekyll Docs. Checked 2026-11-13.
- Layouts, Jekyll Docs. Checked 2026-11-13.
- Themes (Overriding theme defaults), Jekyll Docs. Checked 2026-11-13.
- Front Matter Defaults, Jekyll Docs. Checked 2026-11-13.
- About GitHub Pages and Jekyll, GitHub Docs. Checked 2026-11-13.
Last updated 2026-11-13.