shapo-review-widgets

v1.0.3

Published

16 days ago

The easiest way to embed beautiful Shapo review widgets and testimonial forms into your website. Lightweight, and fully customizable.

0High
0Medium
0Low

shapoio

shapo shapo.io testimonial video testimonial review social proof widget embed react shapo-review-widgets forms reviews widgets google reviews

🎉 Shapo Review Widgets

The easiest way to embed beautiful review widgets and testimonial forms into your website

Get Started • Examples • Help

🚀 What is Shapo?

Shapo is the leading testimonial and review management platform trusted by thousands of businesses to collect, manage, and showcase customer testimonials. Display beautiful review widgets, collect testimonials with custom forms, and build trust with social proof to boost conversions and sales.

Shapo Hero Image

✨ Features

⚡ Lightweight - Minimal bundle size, no heavy dependencies
🎨 Fully Customizable - Style widgets to match your brand
📱 Mobile Responsive - Works perfectly on all devices
🔧 TypeScript Support - Full type definitions included
⚛️ React Ready - Simple React components
🌐 Framework Agnostic - Works with vanilla HTML too
🎯 Multiple Widget Types - Grid, Carousel, Marquee, Floating, Badge, and more
📝 Form Integration - Collect testimonials directly on your site

🚀 Quick Start

npm install shapo-review-widgets

React Component

import { ShapoWidget } from 'shapo-review-widgets';

function App() {
  return (
    <div>
      <ShapoWidget widgetId="abc123def456" />
    </div>
  );
}

HTML/Vanilla JavaScript

<div id="shapo-widget-abc123def456"></div>
<script id="shapo-embed-js" type="text/javascript" src="https://cdn.shapo.io/js/embed.js" defer></script>

That's it! 🎉

📖 Usage

React Component - Widget

import { ShapoWidget } from 'shapo-review-widgets';

function ProductPage() {
  return (
    <div>
      <h1>Customer Reviews</h1>
      <ShapoWidget widgetId="abc123def456" />
    </div>
  );
}

React Component - Form

import { ShapoForm } from 'shapo-review-widgets';

function ReviewForm() {
  return (
    <div>
      <h2>Leave a Review</h2>
      <ShapoForm formId="abc123def456" />
    </div>
  );
}

HTML/Manual Embedding

<!DOCTYPE html>
<html>
<head>
  <title>My Product Page</title>
</head>
<body>
  <h1>Customer Reviews</h1>
  
  <!-- Widget -->
  <div id="shapo-widget-abc123def456"></div>
  
  <!-- Form -->
  <div id="shapo-form-your-abc123def456"></div>
  
  <!-- Embed Script (only needed once per page) -->
  <script id="shapo-embed-js" type="text/javascript" src="https://cdn.shapo.io/js/embed.js" defer></script>
</body>
</html>

🎨 Widget Types

| Widget Type | Description | Use Case | |------------|-------------|----------| | Reviews Grid Widget | Display testimonials in a responsive grid layout | Product pages, landing pages | | Single Review Widget | Highlight a single testimonial | Featured reviews | | Reviews Carousel Widget | Rotating carousel of testimonials | Homepage hero sections | | Multi Carousel Review Widget | Multiple carousels on one page | Comparison pages | | Review Badge Widget | Rating badge with average score | Trust signals | | Reviews Marquee Widget | Continuous scrolling testimonials | Footer, sidebar | | Review List Widget | Vertical list of testimonials | Review pages | | Floating Review Toast | Floating popup notifications | Engagement boost |

Customize colors, fonts, layouts, and more through your Shapo Dashboard.

📚 API Reference

`ShapoWidget` Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | widgetId | string | ✅ Yes | Your Shapo widget ID |

`ShapoForm` Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | formId | string | ✅ Yes | Your Shapo form ID |

💡 Examples

Multiple Widgets on One Page

import { ShapoWidget, ShapoForm } from 'shapo-review-widgets';

function ProductPage() {
  return (
    <div>
      {/* Rating Badge */}
      <ShapoWidget widgetId="badge-widget-id" />
      
      {/* Review Grid */}
      <ShapoWidget widgetId="grid-widget-id" />
      
      {/* Review Form */}
      <ShapoForm formId="form-id" />
    </div>
  );
}

Using Environment Variables

import { ShapoWidget } from 'shapo-review-widgets';

function App() {
  return (
    <ShapoWidget widgetId={process.env.REACT_APP_SHAPO_WIDGET_ID} />
  );
}

Standalone Script (No React)

<!-- Multiple widgets on the same page -->
<div id="shapo-widget-abc123def111"></div>
<div id="shapo-widget-dfg123def222"></div>
<div id="shapo-form-qwe123def666"></div>

<!-- Initialize once -->
<script id="shapo-embed-js" type="text/javascript" src="https://cdn.shapo.io/js/embed.js" defer></script>

🔧 How It Works

Render Container - The component renders a <div> with the correct ID format:
- Widgets: shapo-widget-{widgetId}
- Forms: shapo-form-{formId}
Inject Script - Automatically injects the Shapo embed script if it doesn't already exist
Auto-Initialize - The embed script finds all Shapo containers and initializes them automatically

📦 TypeScript Support

Full TypeScript definitions are included:

import { 
  ShapoWidget, 
  ShapoForm, 
  ShapoWidgetProps, 
  ShapoFormProps 
} from 'shapo-review-widgets';

🎯 Getting Your Widget/Form ID

Log in to your Shapo Dashboard
Navigate to Widgets or Forms
Select the widget/form you want to embed
Copy the Widget ID or Form ID from the settings
Use it in your code!

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

💬 Support

💬 Help Center: https://help.shapo.io
🐛 Issues: GitHub Issues

Made with ❤️ by Shapo

Collect, manage, and showcase your best testimonials, hassle-free.