Installing the Widget on WordPress

Overview

This guide will walk you through installing our JavaScript widget on your WordPress website. There are three methods available, ranging from beginner-friendly to more advanced.

Method 1: Using a Plugin (Recommended)

This is the easiest method and perfect for beginners.

Step 1: Install a Header/Footer Plugin

1. Log in to your WordPress admin dashboard
2. Navigate to Plugins → Add New
3. In the search box, type "Insert Headers and Footers"
4. Find the plugin by WPBeginner (or "WPCode" as an alternative)
5. Click Install Now
6. After installation, click Activate

Step 2: Add Your Widget Script

1. In your WordPress dashboard, go to Settings → Insert Headers and Footers
2. Scroll down to the Scripts in Footer section
3. Paste your widget script:

<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>

4. Replace YOUR_API_KEY with your actual API key from your dashboard
5. Click Save at the bottom of the page

Step 3: Verify Installation

1. Visit your website in a new browser tab
2. The widget should now appear on all pages
3. If you don't see it, try clearing your browser cache (Ctrl+Shift+R or Cmd+Shift+R)

Method 2: Using Theme Customizer

Some WordPress themes have built-in areas for custom code.

Step 1: Access Theme Customizer

1. Go to Appearance → Customize
2. Look for sections like:
   • Additional CSS
   • Custom Code
   • Footer Scripts
   • Tracking Code

Step 2: Add Your Script

1. If you find a "Footer Scripts" or "Custom Code" section, paste your widget script there
2. Click Publish to save your changes

Note: Not all themes have this feature. If you don't see these options, use Method 1 or Method 3.

Method 3: Direct Theme Editing (Advanced)

⚠️ Warning: This method requires editing theme files directly. Changes will be lost when you update your theme unless you're using a child theme.

Step 1: Access Theme Editor

1. Go to Appearance → Theme File Editor
2. You may see a warning message - click I understand to proceed

Step 2: Edit footer.php

1. In the right sidebar under "Theme Files", look for Theme Footer (footer.php)
2. Click on it to open the file
3. Scroll down to find the </body> tag (usually near the bottom)
4. Paste your widget script just before the </body> tag:

<!-- Your Widget Script -->
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
</body>

5. Replace YOUR_API_KEY with your actual API key
6. Click Update File

Step 3: Create a Child Theme (Recommended)

To prevent losing your changes during theme updates:

1. Install a child theme plugin like "Child Theme Configurator"
2. Create a child theme
3. Activate the child theme
4. Add your widget script to the child theme's footer.php

Troubleshooting

Widget Not Appearing

1. Clear your cache:

   • Browser cache: Press Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
   • WordPress cache: If using a caching plugin, clear it from the plugin settings

2. Check plugin conflicts:

   • Temporarily deactivate other plugins one by one to identify conflicts
   • Reactivate plugins after testing

3. Verify API key:

   • Make sure you've replaced YOUR_API_KEY with your actual API key
   • Check for extra spaces or estimates

Widget Appears Multiple Times

• Check that you've only added the script once
• Look in both plugin settings and theme files
• Remove duplicate installations

Widget Not Working on Specific Pages

• Some page builders (Elementor, Divi, etc.) may require different installation methods
• Contact our support team for page builder-specific instructions

Page Builder Compatibility

Elementor

The widget will work automatically if installed via Method 1. For page-specific installation:

1. Edit your page in Elementor
2. Add an HTML widget where you want the widget to appear
3. Paste your widget script into the HTML widget
4. Click Publish

Divi Builder

The widget will work automatically if installed via Method 1. For page-specific installation:

1. Edit your page in Divi
2. Add a Code module
3. Paste your widget script
4. Save and publish

WPBakery (Visual Composer)

The widget will work automatically if installed via Method 1. For page-specific installation:

1. Edit your page
2. Add a Raw HTML element
3. Paste your widget script
4. Save

Best Practices

1. Always use Method 1 (Plugin) unless you have a specific reason not to
2. Keep your API key secure - don't share it publicly
3. Test on a staging site before making changes to your live site
4. Use a child theme if you choose Method 3
5. Document your changes so you remember what you've done

Need Help?

If you encounter any issues:

• Check our FAQ at [your-support-url]
• Contact support at [your-support-email]
• Join our community forum at [your-forum-url]