HTML / Static Sites Installation

Install Notedis on any static HTML website, including Jekyll, Hugo, 11ty, or plain HTML files.

Perfect For

  • Static HTML websites
  • Jekyll sites
  • Hugo sites
  • 11ty (Eleventy) sites
  • GitHub Pages
  • Netlify sites
  • Vercel static sites
  • Any site with HTML files

Installation Steps

Step 1: Get Your Site Key

  1. Log in to your Notedis dashboard
  2. Navigate to Sites
  3. Click the Edit button on your site (or create a new one)
  4. Copy your Site Key (starts with site_)

Step 2: Add the Widget Code

Copy this code and paste it before the closing </body> tag in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>

  <!-- Your website content -->
  <h1>Welcome to My Website</h1>
  <p>Your content here...</p>

  <!-- Notedis Feedback Widget - Place before closing </body> tag -->
  <script>
    window.notedisConfig = {
      siteKey: 'your-unique-site-key-here',
      apiUrl: 'https://notedis.com',
      position: 'bottom-right',
      color: '#3B82F6'
    };
  </script>
  <script src="https://notedis.com/js/widget.js" defer></script>

</body>
</html>

Important: Replace your-unique-site-key-here with your actual site key from Step 1.

Step 3: For Template/Layout Files

If you're using a static site generator (Jekyll, Hugo, 11ty), add the code to your layout or template file so it appears on all pages:

Jekyll

Add to _layouts/default.html or your main layout file:

<!-- In _layouts/default.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- head content -->
  </head>
  <body>
    {{ content }}

    <!-- Notedis Widget -->
    <script>
      window.notedisConfig = {
        siteKey: 'your-unique-site-key-here',
        apiUrl: 'https://notedis.com',
        position: 'bottom-right',
        color: '#3B82F6'
      };
    </script>
    <script src="https://notedis.com/js/widget.js" defer></script>
  </body>
</html>

Hugo

Add to layouts/_default/baseof.html:

<!-- In layouts/_default/baseof.html -->
<!DOCTYPE html>
<html>
  <head>
    <!-- head content -->
  </head>
  <body>
    {{ block "main" . }}{{ end }}

    <!-- Notedis Widget -->
    <script>
      window.notedisConfig = {
        siteKey: 'your-unique-site-key-here',
        apiUrl: 'https://notedis.com',
        position: 'bottom-right',
        color: '#3B82F6'
      };
    </script>
    <script src="https://notedis.com/js/widget.js" defer></script>
  </body>
</html>

11ty (Eleventy)

Add to _includes/layout.njk or your base template:

<!-- In _includes/layout.njk -->
<!DOCTYPE html>
<html>
  <head>
    <!-- head content -->
  </head>
  <body>
    {{ content | safe }}

    <!-- Notedis Widget -->
    <script>
      window.notedisConfig = {
        siteKey: 'your-unique-site-key-here',
        apiUrl: 'https://notedis.com',
        position: 'bottom-right',
        color: '#3B82F6'
      };
    </script>
    <script src="https://notedis.com/js/widget.js" defer></script>
  </body>
</html>

Step 4: Test the Installation

  1. Build your site (if using a static site generator)
  2. Deploy or open your HTML file in a browser
  3. Look for the feedback button (bottom-right corner by default)
  4. Click the button to open the feedback modal
  5. Submit a test feedback
  6. Check your dashboard to verify

Configuration Options

Customize the widget appearance and behavior:

<script>
  window.notedisConfig = {
    siteKey: 'your-site-key',
    apiUrl: 'https://notedis.com',

    // Position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
    position: 'bottom-right',

    // Button color (any hex color)
    color: '#3B82F6',

    // Optional: Custom button text
    buttonText: 'Feedback',

    // Optional: Hide default button (use custom trigger)
    hideButton: false,
  };
</script>

See the Configuration guide for all available options.

Tips & Best Practices

Single Page vs Multiple Pages

If you have one HTML file:
Add the code directly to that file before </body>.

If you have multiple HTML files:
Add the code to a shared template/layout file, or include it in a footer file that's included on all pages.

Performance

The widget loads asynchronously and won't block your page load:

  • Uses defer attribute for non-blocking script loading
  • Widget initializes after page is fully loaded
  • No impact on PageSpeed scores

Local Testing

The widget works on localhost for testing:

http://localhost:8000
http://localhost:3000
file:///path/to/your/file.html

HTTPS vs HTTP

The widget works on both HTTP and HTTPS sites. For production, HTTPS is recommended for security.

Troubleshooting

Widget doesn't appear

  1. Check the site key - Make sure you copied it correctly
  2. Check placement - Code must be before </body> tag
  3. Check browser console - Press F12 and look for JavaScript errors
  4. Clear cache - Hard refresh with Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)
  5. Disable extensions - Try in incognito/private mode to rule out browser extensions

Widget appears but feedback doesn't submit

  1. Check network tab - Look for failed requests in browser DevTools
  2. Verify site is active - Check your dashboard to ensure the site isn't paused
  3. Check trial status - Ensure your trial or subscription is active

See Troubleshooting for more help.

Next Steps

OverviewWordPress