Embedding the Widget

Learn different ways to embed the HelpWidget feedback button on your website or application.

Basic Installation

The simplest way to add HelpWidget is with our script tag:

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

Advanced Configuration

You can configure the widget by adding data attributes to the script tag:

<script 
  src="https://feedbackview.io/api/widget/YOUR_PROJECT_ID"
  data-position="bottom-left"
  data-primary-color="#FF6B6B"
  data-language="es"
  data-hide-on-mobile="true"
  async>
</script>

Available Configuration Options

Dynamic Loading

Load the widget programmatically when needed:

// Load widget on demand
function loadHelpWidget() {
  const script = document.createElement('script');
  script.src = 'https://feedbackview.io/api/widget/YOUR_PROJECT_ID';
  script.async = true;
  document.body.appendChild(script);
}

// Load after user action
document.getElementById('load-feedback').addEventListener('click', loadHelpWidget);

// Load after page interaction
setTimeout(loadHelpWidget, 5000); // Load after 5 seconds

Single Page Applications (SPA)

For SPAs, you may need to reinitialize the widget after route changes:

// React Router example
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  
  useEffect(() => {
    if (window.HelpWidget) {
      window.HelpWidget.init();
    }
  }, [location]);
}

// Vue Router example
router.afterEach(() => {
  if (window.HelpWidget) {
    window.HelpWidget.init();
  }
});

Content Security Policy (CSP)

If your site uses CSP headers, add these directives:

Content-Security-Policy: 
  script-src 'self' https://feedbackview.io;
  frame-src 'self' https://feedbackview.io;
  connect-src 'self' https://api.feedbackview.io;
  img-src 'self' https://feedbackview.io data:;

Common Platforms

WordPress

Shopify

Squarespace

Troubleshooting