TastyMonial Documentation

Learn how to integrate and customize TastyMonial in your website

Introduction

TastyMonial is a modern, developer-friendly platform for collecting and showcasing testimonials on your website. With our simple API and customizable widgets, you can easily add social proof to your site and boost conversions.

Easy Integration

Add testimonials to your site with just a few lines of code.

Customizable Design

Match your brand with customizable themes and layouts.

Powerful API

Full control with our comprehensive REST API.

Dashboard Management

Easily manage testimonials through our intuitive dashboard.

Quick Start

Get up and running with TastyMonial in minutes. Follow these simple steps to add testimonials to your website.

  1. Sign up for a TastyMonial account

    Create an account at tastymonial.in

  2. Get your API key

    Find your API key in the dashboard under Settings > API

  3. Install the TastyMonial package

    npm install tastymonial-react

  4. Add the widget to your website

    import { TestimonialSlider } from 'tastymonial-react';

function App() {
  return (
    <div className="my-app">
      <TestimonialSlider 
        apiKey="your-api-key"
        limit={5}
        theme="light"
      />
    </div>
  );
}

Installation

NPM/Yarn

Install TastyMonial using your preferred package manager:

npm install tastymonial-react
yarn add tastymonial-react
pnpm add tastymonial-react

CDN

You can also include TastyMonial directly from our CDN:

<script src="https://cdn.tastymonial.com/widget.js"></script>
<link rel="stylesheet" href="https://cdn.tastymonial.com/widget.css">

<div id="tastymonial-container"></div>
<script>
  TastyMonial.init({
    container: '#tastymonial-container',
    apiKey: 'your-api-key',
    limit: 5
  });
</script>

React

For React applications, import and use our component:

import { TestimonialSlider } from 'tastymonial-react';

function App() {
  return (
    <div className="my-app">
      <TestimonialSlider 
        apiKey="your-api-key"
        limit={5}
        theme="light"
      />
    </div>
  );
}

Vue

For Vue applications, import and use our component:

<template>
  <div>
    <testimonial-slider 
      :api-key="apiKey"
      :limit="5"
      theme="light"
    />
  </div>
</template>

<script>
import { TestimonialSlider } from 'tastymonial-vue';

export default {
  components: {
    TestimonialSlider
  },
  data() {
    return {
      apiKey: 'your-api-key'
    }
  }
}
</script>

Usage

Basic Usage

Once installed, you can use TastyMonial to display testimonials on your website:

import { TestimonialSlider } from 'tastymonial-react';

function Testimonials() {
  return (
    <section className="testimonials-section">
      <h2>What Our Customers Say</h2>
      <TestimonialSlider 
        apiKey="your-api-key"
        limit={5}
      />
    </section>
  );
}

Advanced Usage

For more control, you can use our advanced options:

import { TestimonialGrid } from 'tastymonial-react';

function AdvancedTestimonials() {
  return (
    <TestimonialGrid 
      apiKey="your-api-key"
      limit={6}
      theme="dark"
      layout="grid"
      cardStyle={{
        borderRadius: '8px',
        boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
      }}
      filters={{
        minRating: 4,
        tags: ['featured']
      }}
      onTestimonialClick={(testimonial) => {
        console.log('Testimonial clicked:', testimonial);
      }}
    />
  );
}

Customization

Themes

TastyMonial comes with built-in themes that you can easily switch between:

Light Theme Example

John Doe

"TastyMonial has completely transformed how we collect testimonials!"

<TestimonialSlider 
  apiKey="your-api-key"
  theme="light"
/>

Layouts

Choose from different layout options to display your testimonials:

Slider Layout

Slider Layout Preview

<TestimonialSlider 
  apiKey="your-api-key"
  layout="slider"
/>

Grid Layout

Grid Layout Preview

<TestimonialGrid 
  apiKey="your-api-key"
  layout="grid"
  columns={3}
/>

Styling

Customize the appearance of your testimonials with CSS or style props:

<TestimonialSlider 
  apiKey="your-api-key"
  containerClassName="my-custom-container"
  cardClassName="my-custom-card"
  style={{
    maxWidth: '800px',
    margin: '0 auto',
  }}
  cardStyle={{
    borderRadius: '8px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    padding: '20px',
  }}
/>

You can also use CSS variables to customize the appearance:

:root {
  --tastymonial-primary-color: #4f46e5;
  --tastymonial-text-color: #1f2937;
  --tastymonial-background-color: #ffffff;
  --tastymonial-card-background: #f9fafb;
  --tastymonial-card-border-radius: 8px;
  --tastymonial-card-padding: 20px;
}

API Reference

Authentication

All API requests require authentication using your API key. You can find your API key in the dashboard under Settings > API.

curl -X GET "https://api.tastymonial.com/testimonials" \
  -H "Authorization: Bearer your-api-key"

Endpoints

The TastyMonial API provides the following endpoints:

Get Testimonials

Retrieve a list of testimonials for your account.

GET https://api.tastymonial.com/testimonials?limit=10&page=1

Create Testimonial

Create a new testimonial.

POST https://api.tastymonial.com/testimonials
Content-Type: application/json

{
  "name": "Alex Johnson",
  "email": "alex@example.com",
  "message": "Our customers love leaving testimonials now!",
  "rating": 5
}

Delete Testimonial

Delete a testimonial by ID.

DELETE https://api.tastymonial.com/testimonials/123458

Rate Limits

The TastyMonial API has the following rate limits:

  • Free plan: 100 requests per hour
  • Pro plan: 1,000 requests per hour
  • Enterprise plan: 10,000 requests per hour

If you exceed the rate limit, you will receive a 429 Too Many Requests response.

Troubleshooting

Common Issues

Widget not displaying

If the widget is not displaying, check the following:

  • Verify that your API key is correct
  • Check for JavaScript errors in the console
  • Ensure the container element exists in the DOM
  • Verify that you have testimonials in your account

API authentication errors

If you're receiving authentication errors, check the following:

  • Verify that your API key is correct
  • Ensure you're including the "Bearer" prefix in the Authorization header
  • Check if your API key has been revoked or expired

Error Codes

The TastyMonial API returns the following error codes:

CodeDescriptionSolution
401UnauthorizedCheck your API key
403ForbiddenYou don't have permission to access this resource
404Not FoundThe requested resource doesn't exist
429Too Many RequestsYou've exceeded the rate limit
500Internal Server ErrorSomething went wrong on our end

FAQ

Get Started with TastyMonial