Upfeedback Docs

Introduction

Welcome to the Upfeedback documentation. Here you'll find everything you need to integrate our feedback widget into your website and leverage our powerful analytics capabilities.

Upfeedback is a comprehensive feedback and analytics solution designed to help you:

• • Collect valuable user feedback seamlessly through a customizable widget
• • Track user behavior to identify patterns and pain points
• • Generate AI-powered insights gathered from your website visitors usage patterns and behavior
• • Make data-driven decisions to enhance your product

Getting Started

Get the Upfeedback widget running on your site in just a few minutes by following these three simple steps.

Installation

Installing the Upfeedback widget is as simple as copying a single code snippet from your dashboard and adding it to your website.

Script Tag Installation

From the Embed Widget page, copy the generated HTML code block and paste it anywhere before the closing </body> tag of your HTML pages.

<script src="https://upfeedback.com/widget.js" 
  data-key="YOUR_API_KEY"
  data-project-id="YOUR_PROJECT_ID"
  data-theme="light"
  data-position="bottom-right"
  data-color="#db2777"
></script>

The snippet from your dashboard will already have your Project ID and customizations included. Remember to replace YOUR_API_KEY with the actual API key from your API Keys page.

How the Widget Works

Our widget uses a Shadow DOM to ensure that its styles don't interfere with your website's existing CSS. This means:

• • The widget's appearance remains consistent across all websites
• • Your website's styles won't affect the widget
• • The widget won't affect your website's styling

When loaded, the widget creates a floating button (if configured to do so) that users can click to open the feedback form. All user interactions are contained within the widget's interface.

<!-- First, add the widget script with manual trigger -->
<script 
  src="https://upfeedback.com/widget.js" 
  data-key="YOUR_API_KEY"
  data-project-id="YOUR_PROJECT_ID"
  data-trigger="manual"
  data-theme="light"
  data-position="bottom-right"
  data-color="#db2777"
></script>

<!-- Then, add your custom button anywhere in your site -->
<button id="custom-feedback-button">Send Feedback</button>

<!-- Finally, add the JavaScript to connect your button -->
<script>
  document.getElementById('custom-feedback-button').addEventListener('click', function() {
    // Check if the widget is loaded
    if (window.UpFeedback && typeof window.UpFeedback.open === 'function') {
      // Open the feedback widget
      window.UpFeedback.open();
    } else {
      console.error('UpFeedback widget not loaded yet');
    }
  });
</script>

import Script from 'next/script';

// In your layout or page component
<Script
  src="https://upfeedback.com/widget.js"
  strategy="afterInteractive"
  data-key="YOUR_API_KEY"
  data-project-id="YOUR_PROJECT_ID"
  data-theme="light"
  data-position="bottom-right"
  data-color="#db2777"
/>

Configuration

All widget configuration is handled through data attributes in the script tag. You can set these easily from the Embed Widget page.

Analytics & AI Insights

Premium Feature Our analytics and AI insights system provides powerful tools to understand user behavior and improve your website experience.

How It Works

The analytics system works in five stages:

Enabling Analytics

To enable user behavior analytics:

1. Go to the Embed Widget page
2. Check the "Enable User Behavior Analytics" option
3. Save your changes and update your widget code if you've already embedded it

<script src="https://upfeedback.com/widget.js" 
  data-key="YOUR_API_KEY"
  data-project-id="YOUR_PROJECT_ID"
  data-behavior-analytics-enabled="true"
  ...
></script>

Viewing Insights

AI-generated insights are available in the AI Insights section of your dashboard. New insights are generated daily, analyzing patterns in user behavior and providing actionable recommendations.

Each insight includes:

• Observation: What pattern the AI has identified
• Recommendation: A specific, actionable suggestion to address the observation
• Supporting Data: The evidence behind the insight

Frequently Asked Questions

Find answers to common questions about Upfeedback.

<Script
  src="https://upfeedback.com/widget.js"
  strategy="afterInteractive"
  data-key="YOUR_API_KEY"
  data-project-id="YOUR_PROJECT_ID"
  // other attributes
/>