Testimonials wall

What you get

The testimonials widget renders your project's public testimonials as a responsive masonry grid. Data is fetched live from the AppGram API, so when you approve a new testimonial in the dashboard it appears on every embed within seconds.

The bundle is served from https://cdn.appgram.dev/testimonials.min.js.

Two display modes

• Inline (default) — renders the wall directly inside a container element on the page. Best for "wall of love" sections, landing pages, or just above pricing.
• Modal — opens an overlay with the wall when triggered via the public API. Best for a "See what customers say" button on a marketing page.

Install — inline mode

Add a container element to your HTML with a unique id, e.g. wall-of-love. Then drop a script tag pointing at https://cdn.appgram.dev/testimonials.min.js with these attributes:

src="https://cdn.appgram.dev/testimonials.min.js"
data-project-id="YOUR_PROJECT_ID"
data-container="#wall-of-love"
data-columns="3"

You can omit data-container — the widget will insert itself next to the script tag automatically. Useful for CMS blocks where you can't easily add a separate container.

Install — modal mode

Drop the script tag with these attributes (no container needed):

src="https://cdn.appgram.dev/testimonials.min.js"
data-project-id="YOUR_PROJECT_ID"
data-mode="modal"

Trigger it from a button: onclick="window.AppGramTestimonials.open()". Use AppGramTestimonials.open() / .close() to control the overlay; the backdrop and the close button also dismiss it.

Settings reference

• data-project-id — Required. Your project's UUID.
• data-mode (default "inline") — inline or modal.
• data-container — CSS selector for the host element. Optional in inline mode (auto-inserts otherwise).
• data-columns (default "auto") — 1, 2, 3, or auto (responsive).
• data-max-items — cap how many testimonials to render. Renders all when omitted.
• data-show-featured (default true) — highlight featured testimonials with a brand-tinted card.
• data-show-rating (default true) — render star ratings when present.
• data-show-source-icon (default true) — render the source platform icon (Twitter, LinkedIn, etc.).
• data-width — max width — e.g. "1100px". Defaults to full container width.
• data-org-slug — optional. Used in API routing when supplied.
• data-project-slug — optional. Used in API routing when supplied.

Theming

The wall honours the active widget style from your AppGram dashboard — background, card colour, text colour, accent, font. Inline data attributes always override individual style keys when you need a one-off look.

Where to embed it

• Just above pricing or a "Get started" CTA — social proof at the decision point.
• A dedicated /customers or /wall-of-love page that always shows the latest entries.
• Modal mode behind a small "loved by 500+ teams" link in the navbar.

Don't stack the testimonials wall above the fold on a landing page — it pulls focus away from the primary CTA. Keep it where intent is already there.