@praiselane/react

React component for embedding PraiseLane testimonials on your website.

Installation

npm install @praiselane/react

Quick Start

import { PraiseLane } from '@praiselane/react'

function App() {
  return (
    <PraiseLane
      project="my-project-slug"
      mode="inline"
      theme="light"
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | project | string | required | Your project slug | | mode | 'popup' \| 'inline' \| 'both' | 'popup' | Widget display mode | | theme | 'light' \| 'dark' \| 'system' | — | Theme override | | position | 'bottom_left' \| 'bottom_right' \| 'top_left' \| 'top_right' | — | Popup position | | inlineTarget | string | — | CSS selector for inline target (auto-generated if omitted) | | debug | boolean | false | Enable embed.js console logging | | scriptUrl | string | '/embed.js' | Custom embed.js URL | | mockData | MockData | — | Mock API response for demo/testing | | className | string | — | className on the container div | | onLoad | () => void | — | Callback when embed.js loads |

Display Modes

Popup (default)

Shows a floating button that opens a testimonial overlay:

<PraiseLane project="my-slug" mode="popup" position="bottom_right" />

Inline

Renders testimonials directly in your page:

<PraiseLane project="my-slug" mode="inline" theme="light" />

Both

Shows both an inline widget and a popup button:

<PraiseLane project="my-slug" mode="both" />

Mock Data (for demos & testing)

Pass mockData to intercept API calls and render with local data:

<PraiseLane
  project="demo"
  mode="inline"
  theme="light"
  mockData={{
    project: {
      widget_layout: 'grid',
      show_rating: true,
      show_avatar: true,
    },
    testimonials: [
      {
        id: '1',
        author_name: 'Jane Doe',
        content: 'Great product!',
        rating: 5,
      },
    ],
  }}
/>

Custom Script URL

By default, the component loads /embed.js from the current origin. For self-hosted or CDN setups:

<PraiseLane
  project="my-slug"
  scriptUrl="https://cdn.praiselane.com/embed.js"
/>

TypeScript

All types are exported:

import type {
  PraiseLaneProps,
  MockData,
  MockTestimonial,
  ProjectSettings,
  WidgetMode,
  WidgetTheme,
  PopupPosition,
} from '@praiselane/react'