Documentation

Comprehensive guide for integrating and customizing the SayJet feedback widget.

Quick Start

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

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

Configuration Options

The widget can be customized using various data attributes. Here's a complete list of available options:

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	Primary color for buttons and accents
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
data-sj-screenshot-ignore	boolean	false	Prevent from item to include in screenshot (can be used on any element)

Examples

Basic Example

Customized Theme Example

Best Practices

Placement
Add the script tag in your website's header or footer for optimal loading.

Button Location
Place the feedback button where it's easily accessible but not intrusive.

Customization
Use the optional attributes to match your website's design and branding.

Email Collection
Consider using data-sj-optional-email to gather user contact information when appropriate.

Pre-fill Email
Use data-sj-pre-fill-email to pre-fill the email field with a specific value - this is useful for collecting feedback from logged in users in your application/dashboard/checkout page (e.g. data-sj-pre-fill-email="test@test.com").

Screenshot Ignore
Use data-sj-screenshot-ignore to prevent any element from being included in screenshots - this is useful to prevent sensitive information from being captured in screenshots.

Technical Details

Widget Loading

The widget is loaded asynchronously to prevent any impact on your website's performance. It uses a deferred script loading strategy

Data Collection

The widget collects the following information:

• User feedback message
• User reaction (if provided)
• Email address (if enabled and provided)
• Browser and device information
• Page URL and referrer

Security

All data is transmitted securely over HTTPS. The widget implements:

• CSRF protection
• Rate limiting
• Input sanitization
• Secure data transmission

Troubleshooting

Common Issues

Widget Not Loading

• Ensure the script tag is properly placed
• Check for JavaScript errors in the console
• Verify the channel ID is correct

Customization Not Working

• Verify attribute names are correct
• Check for typos in attribute values
• Ensure the script is loaded before the button

Form Submission Issues

• Check network connectivity
• Verify channel is active
• Ensure proper permissions are set

Support

For additional support or questions, please contact our team at hello@sayjet.com.

API Reference

The widget exposes a simple API through the global window.SayJet object for programmatic control. This can be useful for:

• Opening the feedback form in response to custom events
• Integrating with your application's error handling
• Creating custom feedback triggers
• Building more complex feedback flows

Available Methods

Usage Example

Here's a complete example of how to use the API:

TypeScript Support

If you're using TypeScript, the widget includes type definitions:

Best Practices

Check for API Availability

• The API is available after the widget script loads and initializes

Error Handling

• Wrap API calls in try-catch blocks for production code
• Provide fallbacks for when the API is not available

Performance

• The API methods are lightweight and safe to call frequently
• No need to debounce or throttle the calls
• Cache the channel ID and custom fields when making multiple calls

User Experience

• Consider when and why you're triggering the feedback form
• Don't interrupt the user's flow unnecessarily
• Provide clear context when opening the form programmatically
• Use appropriate custom fields to match your use case

Webhooks

Webhooks allow you to receive real-time notifications when new feedback is submitted. This feature is available for paid plans only.

Setting Up Webhooks

1. Navigate to the Webhooks section in your dashboard
2. Click "Add webhook" and fill in the following details:
   • Name: A descriptive name for your webhook
   • URL: The endpoint where you want to receive notifications
   • Channel: Select which channel's feedback you want to receive
   • Secret (optional): A secret key for verifying webhook requests

Webhook Payload

When new feedback is received, your webhook endpoint will receive a POST request with the following JSON payload:

Webhook Management

You can manage your webhooks through the dashboard:

• Enable/disable webhooks
• View delivery history
• Monitor last sent time and result
• Delete webhooks when no longer needed

Security

• Webhooks are only sent to HTTPS endpoints
• Optional secret key for request verification
• Rate limiting and error handling
• Delivery retries for failed attempts

Best Practices

1. Endpoint Security

   • Always use HTTPS endpoints
   • Implement secret verification
   • Set up proper error handling

2. Monitoring

   • Check the "Last sent" and "Last result" columns
   • Monitor your endpoint's response time
   • Set up alerts for failed deliveries

3. Performance

   • Keep your endpoint response time under 5 seconds
   • Handle webhook payloads asynchronously
   • Implement proper error logging

4. Testing

   • Test your webhook endpoint before going live
   • Verify payload structure and handling
   • Check error scenarios and retry logic

Version History

v1.0.0 (Current)

• Initial release
• Basic feedback collection
• Customization options
• Email collection
• Security features