Introduction to Plash

Plash is a specialized, lightweight review-collection SDK built explicitly for modern mobile applications. Instead of redirecting users out to the App Store, Google Play Store, or external web browsers, Plash triggers a beautiful, animated bottom sheet review flow natively inside React Native and Flutter interfaces.

Reviews collected via the SDK sync in real-time to your dashboard, are automatically checked for spam, and can be instantly rendered into dynamic Wall of Love widgets for landing pages.

Quickstart Guide

Integrate Plash into your project in 3 simple steps:

1. Register your product workspace in the Plash Dashboard.
2. Retrieve your API Credentials and Product ID.
3. Install and configure the SDK for React Native or Flutter.

API Credentials

Plash authenticates requests via headers. Retrieve your credentials in Workspace Settings > Manage Apps.

⚛️ React Native SDK

The Plash React Native SDK provides a clean, fully-typed sheet component and a stateful API client to fetch and submit testimonials natively.

1. Installation

Install the package and its peer dependencies:

npm install plash-rn-sdk axios

2. Displaying the Review Sheet

Incorporate the `<TestimonialCollector>` component in your layout hierarchy:

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { TestimonialCollector } from 'plash-rn-sdk';

export default function FeedbackScreen() {
  const [visible, setVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Leave Feedback" onPress={() => setVisible(true)} />

      <TestimonialCollector
        config={{
          apiKey: 'pk_live_YOUR_API_KEY',
          appId: 'pa_YOUR_PRODUCT_ID',
        }}
        isVisible={visible}
        onClose={() => setVisible(false)}
        onSuccess={() => {
          console.log('Testimonial submitted successfully!');
        }}
        userId="user_90312"
        appVersion="1.0.4"
        theme={{
          primaryColor: '#FA5135',
          backgroundColor: '#ffffff',
          textColor: '#1C1917',
          secondaryTextColor: '#6E6A64',
        }}
      />
    </View>
  );
}

3. Fetching Testimonials via API Client

You can retrieve previously approved reviews dynamically to render custom testimonials sliders or reviews listings in your app:

import { createApiClient } from 'plash-rn-sdk';

const plashClient = createApiClient({
  apiKey: 'pk_live_YOUR_API_KEY',
  appId: 'pa_YOUR_PRODUCT_ID',
});

// Fetch active testimonials
async function loadTestimonials() {
  try {
    const response = await plashClient.getTestimonials();
    console.log('Loaded reviews:', response.data);
  } catch (error) {
    console.error('Failed to load:', error);
  }
}

💙 Flutter SDK

The Plash Flutter SDK offers declarative config initialization, automatic local caching, and custom theme layouts for iOS and Android.

1. Installation

Add the package dependency to your `pubspec.yaml`:

dependencies:
  plash_flutter_sdk: ^1.0.0

2. Initialization

Initialize the `PlashSDK` once inside the app startup entrypoint:

import 'package:flutter/material.dart';
import 'package:plash_flutter_sdk/plash_flutter_sdk.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  PlashSDK.init(PlashConfig(
    appId: 'YOUR_PRODUCT_ID',
    apiKey: 'YOUR_API_KEY',
    theme: PlashTheme(
      primaryColor: Colors.deepOrange,
      backgroundColor: Colors.white,
      surfaceColor: Colors.grey.shade50,
      textColor: Colors.black87,
      borderRadius: 24.0,
    ),
  ));
  
  runApp(const MyApp());
}

3. Invoking the Bottom Sheet

ElevatedButton(
  onPressed: () async {
    final success = await PlashSDK.showReviewSheet(
      context: context,
      userId: 'user_90312',
      appVersion: '1.2.0',
      metadata: {'user_plan': 'pro'},
      onSubmitted: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Thank you for your feedback!')),
        );
      },
    );
  },
  child: const Text('Leave a Review'),
)

4. Caching & Custom Views

The Flutter SDK caches active reviews for 5 minutes. You can fetch them manually or use the built-in view widget:

// Option A: Ready-made feedback slider list
PlashTestimonialsView(
  title: 'User Love',
  limit: 5,
  showReviewButton: true,
)

// Option B: Query programmatically
final List<Testimonial> reviews = await PlashSDK.getTestimonials();

// Invalidate Cache manually
await PlashSDK.invalidateCache();

Wall of Love Embeds

Display your approved reviews on any website layout using a standard HTML script embed. Copy this snippet directly from the dashboard:

<div id="plash-widget-container" data-widget-id="WIDGET_ID"></div>
<script src="https://cdn.plash.co/js/widget.js" async></script>

Customizing CSS

You can customize the Wall of Love widget container using standard inline CSS or custom classes to match your landing page layout.