Widget Installation Guide
Integrate Suggesto feedback widget into your application in minutes. Choose your framework below for specific instructions.
Quick Start
The Suggesto widget requires only a single script tag with your unique board-id. Here's the basic installation:
<!DOCTYPE html><html><head> <!-- Performance optimization (recommended) --> <link rel="preconnect" href="https://suggesto.io" crossorigin> <!-- Suggesto Widget Script --> <script src="https://suggesto.io/widget" data-board-id="your-board-id" async> </script></head><body> <!-- Your content --></body></html>💡 Performance Tip: Using the async attribute allows the script to load in parallel without blocking page rendering. Placing it in the <head> starts the download earlier, and the preconnect hint reduces latency by 100-300ms on slower connections.
Get Your Board ID
- 1Log in to your Suggesto Dashboard
- 2Find your board in the "Your Feedback Boards" section
- 3Click the three dots menu (
⋮) on the board card - 4Select "Copy Board ID" from the dropdown menu
- 5The Board ID will be automatically copied to your clipboard.
💡 Pro Tip
It's a UUID that looks like this: a1b2c3d4-e5f6-7890-abcd-ef1234567890
Framework Integration
ReactHooks
Use the useEffect hook to dynamically load the script when your component mounts.
import { useEffect } from 'react';function App() { useEffect(() => { const script = document.createElement('script'); script.src = 'https://suggesto.io/widget'; script.setAttribute('data-board-id', 'your-board-id'); script.async = true; document.body.appendChild(script); return () => { // Cleanup on unmount if (document.body.contains(script)) { document.body.removeChild(script); } }; }, []); return <div>Your App</div>;}export default App;Next.jsRecommended
Use the Next.js Script component with afterInteractive strategy for optimal performance.
import Script from 'next/script';export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( <html lang="en"> <body> {children} <Script src="https://suggesto.io/widget" data-board-id="your-board-id" strategy="afterInteractive" /> </body> </html> );}Vue 3Recommended
Use the Composition API's onMounted and onUnmounted lifecycle hooks, or the Options API's mounted and beforeUnmount hooks to manage the script.
<script setup>import { onMounted, onUnmounted } from 'vue';let scriptElement = null;onMounted(() => { scriptElement = document.createElement('script'); scriptElement.src = 'https://suggesto.io/widget'; scriptElement.setAttribute('data-board-id', 'your-board-id'); scriptElement.async = true; document.body.appendChild(scriptElement);});onUnmounted(() => { if (scriptElement && document.body.contains(scriptElement)) { document.body.removeChild(scriptElement); }});</script><template> <div>Your App</div></template>Nuxt 3Recommended
Use Nuxt's useScript composable (recommended) or useHead for script management.
<script setup lang="ts">// NOTE: Requires @nuxt/scripts module installation// Install with: npm install -D @nuxt/scripts// Then add to nuxt.config.ts: modules: ['@nuxt/scripts']useScript('https://suggesto.io/widget', { 'data-board-id': 'your-board-id'});</script><template> <div> <NuxtPage /> </div></template>LaravelBlade
Use Blade's @push and @stack directives to add the script to your layout.
<!DOCTYPE html><html><head> <title>@yield('title')</title></head><body> @yield('content') {{-- Scripts stack --}} @stack('scripts') {{-- Suggesto Widget --}} @push('scripts') <script src="https://suggesto.io/widget" data-board-id="your-board-id" async> </script> @endpush</body></html>WordPressPHP
Use WordPress's wp_enqueue_script function to properly load the widget script.
<?php/** * Enqueue Suggesto Widget Script */function suggesto_widget_script() { wp_enqueue_script( 'suggesto-widget', 'https://suggesto.io/widget', array(), null, array( 'strategy' => 'defer', 'in_footer' => true ) );}add_action('wp_enqueue_scripts', 'suggesto_widget_script');/** * Add data-board-id attribute to Suggesto Widget script tag */function suggesto_add_board_id_attribute($tag, $handle, $src) { if ('suggesto-widget' === $handle) { $tag = str_replace(' src', ' data-board-id="your-board-id" src', $tag); } return $tag;}add_filter('script_loader_tag', 'suggesto_add_board_id_attribute', 10, 3);Additional Resources
Customize your widget's appearance, position, colors, and behavior from the dashboard widget settings.
Go to Dashboard →Having trouble with installation? We're here to help! Reach out to our support team.
Contact Support →Best Practices
✅Load the script asynchronously
Always use the async attribute to prevent blocking page rendering. The script will load in parallel with page parsing and execute as soon as it's ready.
✅Place in head with async for best performance
When using async, place the script in the <head> section. This starts the download earlier while still being non-blocking. Alternatively, use framework-specific loading strategies.
✅Add preconnect for faster loading
Add <link rel="preconnect" href="https://suggesto.io" crossorigin> in your <head> to reduce latency by 100-300ms on slower connections.
✅Use environment variables
Store your board ID in environment variables for better security and easier management across different environments.
✅Test in development first
Always test the widget integration in your development environment before deploying to production.