Widget Installation

Install and configure the Saylo feedback widget on your website to start collecting user feedback.

What you'll get

  • Easy-to-install feedback widget
  • Customizable appearance and behavior
  • Real-time feedback collection
  • Integration with your dashboard

Setup

Step 1: Get your installation code

  1. Go to your Saylo dashboard
  2. Navigate to Settings → Widget
  3. Generate an API key if you don't have one
  4. Copy the installation code provided

Step 2: Add to your website

Add the code to your website's <head> section:

<script defer src="https://saylo.io/widget.js" data-project-id="YOUR_PROJECT_ID" data-token="YOUR_API_TOKEN"></script>

Step 3: Test the widget

  1. Refresh your website
  2. Look for the feedback widget (usually bottom-right corner)
  3. Click the widget to test the feedback form
  4. Submit a test feedback
  5. Check your dashboard to confirm it appears

Configuration

API Key setup

  1. Go to Settings → Widget
  2. Click "Generate API Key" if you don't have one
  3. Copy the generated token
  4. Use the token in your installation code

Widget customization

Configure your widget appearance:

  • Colors: Customize primary and secondary colors
  • Position: Set widget position (bottom-right, bottom-left, etc.)
  • Text: Customize button text and labels
  • Categories: Set up feedback categories

Platform-specific installation

WordPress

  1. Go to your WordPress admin
  2. Navigate to Appearance → Theme Editor
  3. Edit your theme's header.php file
  4. Add the installation code before the closing </head> tag
  5. Save the file

Shopify

  1. Go to your Shopify admin
  2. Navigate to Online Store → Themes
  3. Click "Actions" → "Edit code"
  4. Open theme.liquid
  5. Add the installation code in the <head> section

React/Next.js

Add the script to your _document.js or _app.js:

import Head from 'next/head'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <script
          defer
          src="https://saylo.io/widget.js"
          data-project-id="YOUR_PROJECT_ID"
          data-token="YOUR_API_TOKEN"
        />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

Testing

Local testing

  1. Install the widget on your local development environment
  2. Test the widget appearance and functionality
  3. Verify feedback submission works
  4. Check that data appears in your dashboard

Production testing

  1. Deploy to staging/production
  2. Test on different devices and browsers
  3. Verify widget appears correctly
  4. Test feedback submission
  5. Check dashboard integration

Best practices

Widget placement

  • Bottom-right: Most common and expected location
  • Bottom-left: Alternative for right-to-left languages
  • Top-right: For important announcements
  • Center: For modal popups

User experience

  • Clear Call-to-Action: Use clear, action-oriented text
  • Minimal Intrusion: Don't interfere with user experience
  • Fast Loading: Ensure widget loads quickly
  • Mobile Friendly: Test on mobile devices

Troubleshooting

Widget not appearing

  1. Check your project ID is correct
  2. Verify your API token is valid
  3. Check for JavaScript errors in browser console
  4. Ensure the widget script loads successfully

Styling issues

  1. Check for CSS conflicts with your theme
  2. Verify widget colors are set correctly
  3. Test on different screen sizes
  4. Check browser compatibility

Form submission issues

  1. Verify network connectivity
  2. Check browser console for errors
  3. Ensure API token has proper permissions
  4. Test with different browsers

Need help?

Contact our support team through your dashboard or visit our help center for additional resources.