Add testimonial widgets to any website. One script tag. One line of HTML. Works everywhere HTML works.
Don't see your platform in our integrations list? No problem. If your site uses HTML (and all websites do), Shoutjar works.
Plain HTML websites
Static site generators (Hugo, Jekyll, 11ty, Astro)
Custom-built sites
PHP, Ruby, Python templates
Any CMS with HTML access
Literally anything that renders HTML
Two pieces of code. That's it.
Two steps. No build tools. No package managers. No configuration files.
Add this before </body> on your page:
<script src="https://cdn.shoutjar.com/widget.js" defer></script>Put this wherever you want testimonials to appear:
<div data-shoutjar-widget="YOUR_WIDGET_ID"></div>That's it. Replace YOUR_WIDGET_ID with your actual widget ID from Shoutjar. Your testimonials are now live.
Copy-paste ready examples for common setups.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<section>
<h2>What Our Customers Say</h2>
<div data-shoutjar-widget="YOUR_WIDGET_ID"></div>
</section>
</main>
<footer>
<p>© 2026 My Website</p>
</footer>
<script src="https://cdn.shoutjar.com/widget.js" defer></script>
</body>
</html><!-- Carousel style -->
<div data-shoutjar-widget="YOUR_WIDGET_ID" data-shoutjar-style="carousel"></div>
<!-- Grid style -->
<div data-shoutjar-widget="YOUR_WIDGET_ID" data-shoutjar-style="grid"></div>
<!-- Marquee style -->
<div data-shoutjar-widget="YOUR_WIDGET_ID" data-shoutjar-style="marquee"></div>
<!-- Badge style -->
<div data-shoutjar-widget="YOUR_WIDGET_ID" data-shoutjar-style="badge"></div>
<!-- Single testimonial -->
<div data-shoutjar-widget="YOUR_WIDGET_ID" data-shoutjar-style="single"></div><!-- Badge in header -->
<header>
<div data-shoutjar-widget="YOUR_WIDGET_ID" data-shoutjar-style="badge"></div>
</header>
<!-- Grid in main content -->
<main>
<div data-shoutjar-widget="YOUR_WIDGET_ID" data-shoutjar-style="grid"></div>
</main>
<!-- Only need the script once -->
<script src="https://cdn.shoutjar.com/widget.js" defer></script>Same two lines of code, adapted for your SSG's template syntax.
Add to your base template (e.g., layouts/_default/baseof.html):
<script src="https://cdn.shoutjar.com/widget.js" defer></script>Use in any content or template:
<div data-shoutjar-widget="{{ .Site.Params.shoutjarWidgetId }}"></div>Add to _includes/footer.html or _layouts/default.html:
<script src="https://cdn.shoutjar.com/widget.js" defer></script>Use anywhere:
<div data-shoutjar-widget="{{ site.shoutjar_widget_id }}"></div>Add to your base layout:
<script src="https://cdn.shoutjar.com/widget.js" defer></script>Use in templates:
<div data-shoutjar-widget="{{ shoutjarWidgetId }}"></div>In your layout component:
---
// Layout.astro
---
<html>
<body>
<slot />
<script src="https://cdn.shoutjar.com/widget.js" defer></script>
</body>
</html>Use in pages:
<div data-shoutjar-widget={import.meta.env.PUBLIC_SHOUTJAR_WIDGET_ID}></div>| Attribute | Values | Default | Description |
|---|---|---|---|
data-shoutjar-widget | Widget ID | required | Your widget ID from Shoutjar |
data-shoutjar-style | grid, carousel, marquee, badge, single | carousel | Widget display style |
data-shoutjar-theme | light, dark, auto | auto | Color theme |
data-shoutjar-max | number | all | Maximum testimonials to show |
data-shoutjar-rating | true, false | true | Show star ratings |
data-shoutjar-source | true, false | true | Show source icons |
<div
data-shoutjar-widget="YOUR_WIDGET_ID"
data-shoutjar-style="grid"
data-shoutjar-theme="dark"
data-shoutjar-max="6"
data-shoutjar-rating="true"
data-shoutjar-source="true"
></div>Choose the perfect display for your site
Multiple testimonials in columns. Clean, professional.
data-shoutjar-style="grid"One at a time with smooth transitions. Default style.
data-shoutjar-style="carousel"Continuous scrolling ticker. Eye-catching.
data-shoutjar-style="marquee"Compact "4.8 ★ (50 reviews)" display. Minimal space.
data-shoutjar-style="badge"Feature one testimonial prominently. Bold and focused.
data-shoutjar-style="single"<div style="max-width: 800px; margin: 40px auto; padding: 20px;">
<div data-shoutjar-widget="YOUR_WIDGET_ID"></div>
</div>:root {
--shoutjar-primary: #3B82F6;
--shoutjar-background: #ffffff;
--shoutjar-text: #111827;
--shoutjar-text-secondary: #6B7280;
--shoutjar-border: #E5E7EB;
--shoutjar-radius: 8px;
}
@media (prefers-color-scheme: dark) {
:root {
--shoutjar-background: #1F2937;
--shoutjar-text: #F9FAFB;
--shoutjar-text-secondary: #9CA3AF;
--shoutjar-border: #374151;
}
}<div class="my-testimonials-section" data-shoutjar-widget="YOUR_WIDGET_ID"></div>.my-testimonials-section {
background: linear-gradient(to bottom, #f9fafb, #ffffff);
padding: 2rem;
border-radius: 1rem;
}Strategic placement for maximum impact
Below hero section or features. First impression social proof.
Near pricing tables. Address "is it worth it?" questions.
After features, before CTA. Reinforce value.
Build trust before they reach out.
Subtle, always-present social proof across all pages.
Multiple placements: badge near CTA, grid below features, single in hero.
gzipped script
dependencies
CDN uptime
defer, no input delay<div
data-shoutjar-widget="YOUR_WIDGET_ID"
data-shoutjar-lazy="true"
></div>widget.jsSome ad blockers may interfere. The CDN URL is https://cdn.shoutjar.com/widget.js
Use CSS variables to override widget defaults, or wrap in a container with isolation:
<div style="all: initial;">
<div data-shoutjar-widget="YOUR_WIDGET_ID"></div>
</div>You only need the script once per page. Multiple script tags can cause issues.
<div data-shoutjar-widget="ID_1"></div>
<div data-shoutjar-widget="ID_2"></div>
<script src="...widget.js" defer></script><div data-shoutjar-widget="ID_1"></div>
<script src="...widget.js" defer></script>
<div data-shoutjar-widget="ID_2"></div>
<script src="...widget.js" defer></script>No. If your website uses HTML (all websites do), this works. Static sites, custom builds, CMSs — anything.
Yes. Hugo, Jekyll, 11ty, Astro, Gatsby — all work. Add the script to your base template and the widget div wherever you want.
No. The script loads asynchronously with the defer attribute. It's ~15KB gzipped, delivered via global CDN, and has zero impact on Core Web Vitals.
Yes. Use CSS variables, custom classes, or configure everything in the Shoutjar dashboard. Widgets adapt to your design.
Add or edit testimonials in Shoutjar. They appear on your site automatically — no code changes or redeployment needed.
Yes. Add multiple widget divs with different configurations. You only need the script tag once per page.
Sign up for Shoutjar, import from review platforms like G2 or Trustpilot, or use auto-discovery to find mentions you didn't know existed.
Two lines of code. Works everywhere. No dependencies. Copy, paste, done.
Get Started Free