Installation Guide

HelpWidget can be integrated into any website or application. Choose the method that works best for your tech stack.

Method 1: Script Tag (Universal)

Works with any website - WordPress, static HTML, or any CMS:

<script 
  src="https://feedbackview.io/api/widget/YOUR_PROJECT_ID"
  async>
</script>

💡 Best Practice: Add this script tag just before the closing </body> tag for optimal performance.

Method 2: React Component

For React applications, use our dedicated component with TypeScript support:

npm install @feedbackview/react

// In your app
import { Feedbackview } from '@feedbackview/react'

function App() {
  return (
    <div>
      <Feedbackview
        projectId="YOUR_PROJECT_ID"
      />
    </div>
  )
}

React Props

Prop	Type	Default	Description
`projectId`	string	-	Your project ID (required)
`language`	string	auto	Language code or 'auto'
`userId`	string	auto	User ID
`userEmail`	string	-	User Email
`metadata`	object	auto	User Metadata
`data-feedbackview-*`	string	-	Any additional metadata

Method 3: Vue Integration

For Vue.js applications with composition API support:

npm install @feedbackview/vue

// In your main.js
import { createApp } from 'vue'
import Feedbackview from '@feedbackview/vue'
import App from './App.vue'

const app = createApp(App)
app.use(Feedbackview, {
  projectId: 'YOUR_PROJECT_ID'
})
app.mount('#app')

Method 4: Next.js Integration

For Next.js applications with proper SSR handling:


"use client"

import { FeedbackWidget } from "@feedbackview/react";

export const WidgetWrapper = () => {
    return (
        <>
            <FeedbackWidget projectId="your-project-id"
                userId="123"
                userEmail="[email protected]"
                lang="en"
                metadata={{
                    plan: "prmium",
                    pageSection: "checkout",
                    feature: "payment-flow"
                }}
            />

            // Or with a fully customizable button!
            <FeedbackWidget
                projectId="your-project-id"
            >
                <button>
                    Give Feedback
                </button>
            </FeedbackWidget>
        </>
    );
}

Platform-Specific Instructions

WPWordPress

Add the script to your theme's footer.php file or use a plugin:

Location: wp-content/themes/your-theme/footer.php
Plugin: "Insert Headers and Footers" (recommended)
Admin: Appearance → Theme Editor → footer.php

SHShopify

Add the script to your theme's theme.liquid file:

Online Store → Themes → Actions → Edit Code
Open theme.liquid
Add script before closing </body> tag

SQSquarespace

Add via Code Injection (Business plan or higher required):

Settings → Advanced → Code Injection
Paste script in Footer section
Save and publish changes

WXWix

Add using the HTML Element or Custom Code:

Add → More → HTML Embed
Paste the script tag
Position the element off-screen (widget will float)

Verification

After installation, verify the widget is working:

✅ Installation Checklist

1
Refresh your website and look for the feedback button
2
Click the button to open the feedback modal
3
Submit a test feedback to verify it reaches your dashboard
4
Check that the widget appears correctly on mobile devices

Next Steps

Your First Feedback

Learn how to submit and manage feedback

Documentation