WordPress Installation

Install Notedis on your WordPress site in minutes. Three installation methods available.

Method 1: Code Snippets Plugin (Recommended)

The easiest and safest method. Survives theme updates.

Step 1: Install Code Snippets Plugin

  1. Go to Plugins → Add New in your WordPress admin
  2. Search for "Code Snippets" or "Insert Headers and Footers"
  3. Install and activate the plugin

Recommended plugins:

Step 2: Add Notedis Code

For Code Snippets plugin:

  1. Go to Snippets → Add New
  2. Title: "Notedis Feedback Widget"
  3. Code:
add_action('wp_footer', function() {
    ?>
    <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>
    <?php
});
  1. Location: Select "Run snippet everywhere"
  2. Save Changes and Activate

For Insert Headers and Footers plugin:

  1. Go to Settings → Insert Headers and Footers
  2. Paste this code in the Footer section:
<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>
  1. Save

Method 2: Theme Functions File

Add directly to your theme's functions.php file.

Step 1: Access functions.php

Via WordPress Admin:

  1. Go to Appearance → Theme File Editor
  2. Select functions.php from the right sidebar

Via FTP:

  1. Connect to your site via FTP
  2. Navigate to /wp-content/themes/your-theme/
  3. Edit functions.php

Step 2: Add the Code

Paste this code at the end of functions.php:

<?php
// Notedis Feedback Widget
add_action('wp_footer', 'notedis_feedback_widget');

function notedis_feedback_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>
    <?php
}
?>

Step 3: Save

Click Update File (Admin) or save and upload (FTP).

⚠️ Warning: Theme updates will overwrite this change. Use Method 1 or Method 3 instead.

Method 3: Child Theme (Best for Custom Themes)

Safest method if you're using a custom theme.

Step 1: Create Child Theme

If you don't have a child theme:

  1. Create a folder: /wp-content/themes/your-theme-child/
  2. Create style.css:
/*
Theme Name: Your Theme Child
Template: your-parent-theme
*/
  1. Create functions.php:
<?php
// Enqueue parent theme styles
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');
function child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
?>
  1. Activate the child theme in Appearance → Themes

Step 2: Add Notedis Code

Add to your child theme's functions.php:

<?php
// Notedis Feedback Widget
add_action('wp_footer', 'notedis_feedback_widget');

function notedis_feedback_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>
    <?php
}
?>

Conditional Loading (Advanced)

Show Only to Logged-In Users

add_action('wp_footer', function() {
    // Only show for logged-in users
    if (is_user_logged_in()) {
        ?>
        <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>
        <?php
    }
});

Hide on Specific Pages

add_action('wp_footer', function() {
    // Don't show on checkout or cart pages
    if (is_checkout() || is_cart()) {
        return;
    }
    ?>
    <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>
    <?php
});

Show Only on Staging Site

add_action('wp_footer', function() {
    // Only show on staging environment
    if (strpos(site_url(), 'staging') !== false) {
        ?>
        <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>
        <?php
    }
});

Testing

  1. Clear cache - If using a caching plugin (WP Rocket, W3 Total Cache, etc.), clear the cache
  2. View your site in a browser
  3. Look for the feedback button (bottom-right by default)
  4. Submit a test feedback
  5. Check your dashboard at notedis.com/admin/feedback

Compatibility

Works with:

  • ✅ All WordPress themes (Astra, GeneratePress, Divi, Elementor, etc.)
  • ✅ Page builders (Elementor, Divi Builder, Beaver Builder, etc.)
  • ✅ WooCommerce
  • ✅ Caching plugins (WP Rocket, W3 Total Cache, WP Super Cache)
  • ✅ Multisite installations
  • ✅ WordPress 5.0+

Troubleshooting

Widget doesn't appear

  1. Clear WordPress cache (if using caching plugin)
  2. Check site key - Verify it's correct
  3. Check theme compatibility - Some themes may override footer
  4. Disable plugins temporarily - Rule out plugin conflicts
  5. Try Method 1 - Code Snippets plugin is most reliable

Widget appears but styling is off

  1. Check theme CSS - Your theme may have conflicting styles
  2. Adjust z-index - Add custom CSS (see Customization)
  3. Change position - Try a different corner

Widget not loading on all pages

  1. Check conditional logic - Make sure you're not excluding pages unintentionally
  2. Verify hook - Ensure wp_footer() is called in your theme
  3. Check caching - Clear page cache and browser cache

See Troubleshooting for more help.

Next Steps

HTML / StaticShopify