Configuration

Configuration Options

Feedaura offers extensive customization options to match your application’s design and functionality needs. Below is a comprehensive reference of all available configuration properties.

Core Settings

projectSecret

string

required

Your unique project secret key (required). Get this from your Feedaura dashboard after creating a project.

position

string

default:"bottom-right"

Position of the feedback button on the screen.Options: bottom-right, bottom-left, top-right, top-left

Style of the feedback widget.Options:

floating - Appears as a modal on top of your content
inline - Appears inline with your page content

autoCloseAfterSubmit

boolean

default:"true"

Whether to automatically close the feedback widget after successful submission.

animated

boolean

default:"true"

Whether to show animations when opening/closing the feedback widget and during interactions.

zIndex

number

default:"9999"

Z-index of the feedback widget. Adjust this if you have other floating elements that conflict.

apiEndpoint

string

API endpoint for submitting feedback. Generally, you should not need to change this unless directed by Feedaura support.

Visual Customization

theme

string

default:"light"

Widget theme appearance.Options: light, dark

primaryColor

string

default:"#fb2c36"

Primary color for the feedback button and UI accents. Accepts any valid CSS color value (hex, rgb, hsl).Example: #0F8CFF, rgb(15, 140, 255), hsl(207, 100%, 53%)

secondaryColor

string

default:"#fb2c36"

Secondary color for hover states and gradients. Accepts any valid CSS color value.

themeColor

string

default:"#fb2c36"

Legacy property that maps to primaryColor. For backward compatibility only - use primaryColor instead.

textColor

string

default:"#333333"

Color of text in the feedback widget. Accepts any valid CSS color value.

backgroundColor

string

default:"#FFFFFF"

Background color of the feedback widget. Accepts any valid CSS color value.

Button Customization

buttonText

string

default:""

Text to display on the feedback button. Leave empty to show only the icon.Note: When text is provided, the button will expand to accommodate it.

buttonIcon

string

default:"feedaura"

Icon to display on the feedback button.Options: feedaura, or any custom icon identifier supported by your implementation.

iconColor

string

default:"#FFFFFF"

Color of the icon on the feedback button. Accepts any valid CSS color value.

buttonSize

string

default:"medium"

Size of the feedback button.Options:

small - 52px × 52px
medium - 60px × 60px
large - 65px × 65px

buttonRadius

string

default:"50%"

Border radius of the feedback button. Use any valid CSS border-radius value.Examples: 50% (circle), 8px (rounded square), 0 (square)

Text Customization

productName

string

default:"product"

Name of your product, used in the feedback form text. This will replace the word “product” in the default question text.

headerText

string

default:"Give us your feedback"

Header text displayed at the top of the feedback form.

questionText

string

Question text displayed in the feedback form. Customize this to ask specific questions relevant to your product.

feedbackLabelText

string

default:"Write your feedback"

Label text for the feedback input field.

placeholder

string

default:"Please write here"

Placeholder text for the feedback input field. This appears when the field is empty.

submitText

string

default:"Submit"

Text for the submit button in the feedback form.

Configuration Examples

Basic Configuration (Next.js)

// components/feedaura-widget.tsx
'use client'

import Script from 'next/script'
import React from 'react'

const FeedauraWidget = () => {
  return (
    <Script
      strategy='lazyOnload'
      type='module'
      onLoad={() => {
        window.FeedbackWidget?.({
          projectSecret: process.env.NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET!,
          position: "bottom-right",
          theme: "light",
        })
      }}
      src="https://cdn.jsdelivr.net/npm/@feedaura/feedback-widget/dist/feedback-widget.min.js"
    />
  )
}

export default FeedauraWidget

Custom Branding (React)

// components/FeedauraWidget.jsx
import React, { useEffect } from 'react';

const FeedauraWidget = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/@feedaura/feedback-widget/dist/feedback-widget.min.js';
    script.type = 'module';
    script.async = true;
    
    script.onload = () => {
      if (window.FeedbackWidget) {
        window.FeedbackWidget({
          projectSecret: process.env.REACT_APP_FEEDAURA_PROJECT_SECRET,
          position: "bottom-right",
          primaryColor: "#FF5733",
          secondaryColor: "#E04422",
          buttonText: "Feedback",
          buttonIcon: "feedaura",
          iconColor: "#FFFFFF",
          buttonSize: "large",
          buttonRadius: "8px",
          theme: "light",
        });
      }
    };

    document.body.appendChild(script);
    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, []);

  return null;
};

export default FeedauraWidget;

Custom Text (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
</head>
<body>
  <!-- Your content here -->

  <script type="module">
    import('https://cdn.jsdelivr.net/npm/@feedaura/feedback-widget/dist/feedback-widget.min.js')
      .then(() => {
        window.FeedbackWidget({
          projectSecret: 'your_project_secret_here',
          position: 'bottom-right',
          productName: 'Acme App',
          headerText: "We'd love to hear from you!",
          questionText: 'How was your experience with Acme App today?',
          feedbackLabelText: 'Share your thoughts',
          placeholder: 'Tell us what you think...',
          submitText: 'Send Feedback',
        });
      });
  </script>
</body>
</html>

Dark Theme Configuration (Vue)

<!-- components/FeedauraWidget.vue -->
<template>
  <div></div>
</template>

<script>
export default {
  name: 'FeedauraWidget',
  mounted() {
    this.loadFeedauraWidget();
  },
  methods: {
    loadFeedauraWidget() {
      const script = document.createElement('script');
      script.src = 'https://cdn.jsdelivr.net/npm/@feedaura/feedback-widget/dist/feedback-widget.min.js';
      script.type = 'module';
      script.async = true;
      
      script.onload = () => {
        if (window.FeedbackWidget) {
          window.FeedbackWidget({
            projectSecret: process.env.VUE_APP_FEEDAURA_PROJECT_SECRET,
            position: 'bottom-right',
            theme: 'dark',
            primaryColor: '#8C52FF',
            secondaryColor: '#7443E0',
            textColor: '#FFFFFF',
            backgroundColor: '#222222',
          });
        }
      };

      document.body.appendChild(script);
      this.script = script;
    }
  }
};
</script>

// components/feedaura-widget/feedaura-widget.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { environment } from '../../../environments/environment';

@Component({
  selector: 'app-feedaura-widget',
  template: '',
  standalone: true
})
export class FeedauraWidgetComponent implements OnInit, OnDestroy {
  private script?: HTMLScriptElement;

  ngOnInit(): void {
    this.loadFeedauraWidget();
  }

  ngOnDestroy(): void {
    if (this.script && document.body.contains(this.script)) {
      document.body.removeChild(this.script);
    }
  }

  private loadFeedauraWidget(): void {
    this.script = document.createElement('script');
    this.script.src = 'https://cdn.jsdelivr.net/npm/@feedaura/feedback-widget/dist/feedback-widget.min.js';
    this.script.type = 'module';
    this.script.async = true;
    
    this.script.onload = () => {
      if (window.FeedbackWidget) {
        window.FeedbackWidget({
          projectSecret: environment.feedauraProjectSecret,
          widgetStyle: 'inline',
          theme: 'light',
          animated: false,
        });
      }
    };

    document.body.appendChild(this.script);
  }
}

Complete Customization Example

window.FeedbackWidget({
  // Core Settings
  projectSecret: 'your_project_secret_here',
  position: 'bottom-left',
  widgetStyle: 'floating',
  autoCloseAfterSubmit: true,
  animated: true,
  zIndex: 10000,
  
  // Visual Customization
  theme: 'light',
  primaryColor: '#0F8CFF',
  secondaryColor: '#0066CC',
  textColor: '#1a1a1a',
  backgroundColor: '#ffffff',
  
  // Button Customization
  buttonText: 'Feedback',
  buttonIcon: 'feedaura',
  iconColor: '#FFFFFF',
  buttonSize: 'large',
  buttonRadius: '12px',
  
  // Text Customization
  productName: 'My Awesome App',
  headerText: 'Help us improve!',
  questionText: 'How can we make My Awesome App better?',
  feedbackLabelText: 'Your feedback',
  placeholder: 'Share your thoughts, ideas, or issues...',
  submitText: 'Send',
});

TypeScript Configuration

If you’re using TypeScript, use the type definitions to get autocomplete and type safety:

// global.d.ts
interface FeedbackConfig {
  // Core Settings (Required)
  projectSecret: string;
  
  // Core Settings (Optional)
  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
  widgetStyle?: "floating" | "inline";
  autoCloseAfterSubmit?: boolean;
  animated?: boolean;
  zIndex?: number;
  apiEndpoint?: string;
  
  // Visual Customization
  theme?: "light" | "dark";
  primaryColor?: string;
  secondaryColor?: string;
  textColor?: string;
  backgroundColor?: string;
  themeColor?: string; // Legacy
  
  // Button Customization
  buttonText?: string;
  buttonIcon?: string;
  iconColor?: string;
  buttonSize?: "small" | "medium" | "large";
  buttonRadius?: string;
  
  // Text Customization
  productName?: string;
  headerText?: string;
  questionText?: string;
  feedbackLabelText?: string;
  placeholder?: string;
  submitText?: string;
}

declare global {
  interface Window {
    FeedbackWidget?: (config: FeedbackConfig) => void;
  }
}

export {};

Visual Preview

Best Practices

Strategic Placement

Place the widget where it’s visible but doesn’t interfere with your core UX. Bottom-right is generally least intrusive for most layouts.

Brand Consistency

Match your widget’s colors to your brand’s palette for a seamless experience. Use your brand’s primary color for the button.

Clear Instructions

Use clear, concise wording in your feedback form to encourage quality responses. Avoid jargon and be specific about what feedback you’re seeking.

Mobile Optimization

Test your widget on mobile devices and adjust the size and position accordingly. Consider using small or medium button sizes on mobile.

Accessibility

Ensure sufficient color contrast between text and background colors. Use the textColor property to maintain readability.

Performance

Use the lazyOnload strategy (Next.js) or lazy loading to ensure the widget doesn’t impact your initial page load time.

Configuration Tips

Choosing Colors

When selecting colors for your widget:

Use your brand’s primary color for primaryColor
Choose a slightly darker or lighter shade for secondaryColor for hover effects
Ensure text color has sufficient contrast with background (WCAG AA minimum: 4.5:1)
Test both light and dark themes if your app supports theme switching

Customizing Text

Make your feedback form feel native to your product:

Replace “product” with your actual product name
Ask specific questions that will give you actionable feedback
Keep placeholder text short and friendly
Use action-oriented submit button text like “Send”, “Share”, or “Submit Feedback”

Button Sizing Guide

Choose button size based on your layout:

Small (52px): Best for dense UIs or mobile-first designs
Medium (60px): Good default for most applications
Large (65px): Use when you want the feedback option to be prominent

Z-Index Management

If the widget appears behind other elements:

Check z-index values of your navigation, modals, and overlays
Set zIndex higher than your highest z-index value
Most navigation bars use z-index around 1000-9000
Default value of 9999 works for most cases

All configuration settings are optional except for projectSecret. If you don’t specify a value, the default will be used. You can update any configuration value at any time without affecting existing feedback data.

Never expose your projectSecret in client-side code for public repositories. Always use environment variables to store sensitive configuration values.

Get Started

Configuration Options

Core Settings

Visual Customization

Button Customization

Text Customization

Configuration Examples

Basic Configuration (Next.js)

Custom Branding (React)

Custom Text (HTML)

Dark Theme Configuration (Vue)

Inline Widget (Angular)

Complete Customization Example

TypeScript Configuration

Visual Preview

Best Practices

Strategic Placement

Brand Consistency

Clear Instructions

Mobile Optimization

Accessibility

Performance

Configuration Tips

Get Started

​Configuration Options

​Core Settings

​Visual Customization

​Button Customization

​Text Customization

​Configuration Examples

​Basic Configuration (Next.js)

​Custom Branding (React)

​Custom Text (HTML)

​Dark Theme Configuration (Vue)

​Inline Widget (Angular)

​Complete Customization Example

​TypeScript Configuration

​Visual Preview

​Best Practices

Strategic Placement

Brand Consistency

Clear Instructions

Mobile Optimization

Accessibility

Performance

​Configuration Tips

Configuration Options

Core Settings

Visual Customization

Button Customization

Text Customization

Configuration Examples

Basic Configuration (Next.js)

Custom Branding (React)

Custom Text (HTML)

Dark Theme Configuration (Vue)

Inline Widget (Angular)

Complete Customization Example

TypeScript Configuration

Visual Preview

Best Practices

Configuration Tips