# SayJet

> SayJet is a powerful feedback management platform that helps businesses collect, analyze, and act on customer feedback efficiently. With its seamless integration capabilities and user-friendly interface, SayJet transforms scattered feedback into actionable insights.

## Quick Start

To get started with SayJet, add the following script tag to your website's header or footer:

```html
<script defer src="https://www.sayjet.com/v1/script.min.js" />
```

Then, add a button with the `data-sj-channel` attribute to your website:

```html
<button data-sj-channel="your-channel-id">
  Feedback
</button>
```

## Configuration Options

The widget can be customized using various data attributes:

### Required Attributes

| Attribute         | Type   | Description                       |
| ----------------- | ------ | --------------------------------- |
| `data-sj-channel` | string | Your unique channel ID (required) |

### Optional Attributes

| Attribute                          | Type    | Default    | Description                                    |
| ---------------------------------- | ------- | ---------- | ---------------------------------------------- |
| `data-sj-form-title`               | string  | `Feedback` | Custom title for the feedback form             |
| `data-sj-submit-text`              | string  | `Send`     | Custom text for the submit button              |
| `data-sj-optional-email`           | boolean | `false`    | Make the email field optional                  |
| `data-sj-pre-fill-email`           | string  | `""`       | Pre-fill the email field with a specific value |
| `data-sj-color-primary`            | string  | `#000000`  | Primary color for buttons and accents          |
| `data-sj-color-primary-foreground` | string  | `#000000`  | Text color for primary buttons                 |
| `data-sj-color-background`         | string  | `#ffffff`  | Background color of the widget                 |
| `data-sj-color-foreground`         | string  | `#000000`  | Text and icons color                          |
| `data-sj-color-gray`               | string  | `#e5e5e5`  | Color for borders and inputs                   |
| `data-sj-corner-radius`            | string  | `0.75rem`  | Border radius for all elements                 |

## Examples

### Basic Implementation
```html
<button data-sj-channel="your-channel-id">
  Feedback
</button>
```

### Customized Implementation
```html
<button 
  data-sj-channel="your-channel-id"
  data-sj-form-title="Share Your Thoughts"
  data-sj-submit-text="Submit Feedback"
  data-sj-color-primary="#2563eb"
  data-sj-color-primary-foreground="#ffffff"
  data-sj-color-background="#ffffff"
  data-sj-color-foreground="#000000"
  data-sj-color-gray="#e5e5e5"
  data-sj-corner-radius="0.5rem"
  data-sj-optional-email="true"
>
  Share Feedback
</button>
```

## Features

- **Seamless Integration**: Add the widget to your site with a single line of code
- **Customizable Widget**: Match your brand's look and feel
- **Screenshot Capture**: Let users include visual context
- **Email Collection**: Optional email collection for follow-ups
- **Reaction System**: Capture user sentiment
- **Real-time Notifications**: Stay updated with webhook integration
- **Team Collaboration**: Work together on feedback
- **Analytics Dashboard**: Track and analyze feedback trends
- **Security First**: HTTPS, CSRF protection, rate limiting
- **Privacy Focused**: Optional email collection, data protection

## Best Practices

- Place the widget where it's easily accessible
- Customize to match your brand
- Use appropriate email collection settings
- Implement proper error handling
- Monitor feedback analytics regularly
- Respond to feedback promptly
- Keep the widget up to date
- Follow security guidelines

## Security & Privacy

- HTTPS encryption
- CSRF protection
- Rate limiting
- Input sanitization
- Optional email collection
- Data encryption
- Regular security updates
- Privacy-first approach