@shouthive/widget

Embeddable testimonial wall and social proof popup widgets by ShoutHive.

Install

npm install @shouthive/widget

Wall Widget

Script Tag (CDN)

<div data-testimonial-wall data-org="your-org" data-theme="light" data-layout="masonry"></div>
<script src="https://app.shouthive.com/widget.js" defer></script>

Vanilla JS (npm)

import { TestimonialWall } from "@shouthive/widget";

TestimonialWall.init({
  container: "#testimonial-wall",
  org: "your-org",
  theme: "light",
  layout: "masonry",
});

React / Next.js

import { TestimonialWallComponent } from "@shouthive/widget/react";

export default function Page() {
  return (
    <TestimonialWallComponent
      org="your-org"
      theme="light"
      layout="masonry"
    />
  );
}

Wall Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | container | HTMLElement \| string | — | Target element or CSS selector (required for JS) | | org | string | — | Organization slug | | slug | string | — | Wall slug (legacy) | | collection | string | — | Collection slug | | theme | "light" \| "dark" \| "auto" | "light" | Color theme | | layout | "masonry" \| "grid" \| "carousel" \| "coverflow" | "masonry" | Layout mode | | max | number | 0 (all) | Max testimonials to display | | rows | number | 3 | Carousel row count | | speed | number | 5 | Carousel speed (1-10) | | animTilt | boolean | false | 3D tilt on hover | | animEntrance | boolean | false | Scroll entrance animation | | animFlip | boolean | false | Click-to-flip cards |

Popup Widget

Script Tag (CDN)

<script
  src="https://app.shouthive.com/popup-widget.js"
  data-popup-id="your-popup-id"
  async
></script>

Vanilla JS (npm)

import { TestimonialPopup } from "@shouthive/widget";

TestimonialPopup.init({
  popupId: "your-popup-id",
});

React / Next.js

import { TestimonialPopupComponent } from "@shouthive/widget/react";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <TestimonialPopupComponent popupId="your-popup-id" />
    </>
  );
}

Popup Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | popupId | string | — | Popup configuration ID (required) |

TypeScript

Full TypeScript support with exported types:

import type { WallOptions, PopupOptions, Theme, Layout } from "@shouthive/widget";

License

MIT