Installing the Widget on Weebly

Overview

This guide will walk you through installing our JavaScript widget on your Weebly website. Weebly offers simple methods to add custom code to your site.

Method 1: Using Embed Code Element (Recommended)

This is the easiest method for adding the widget to your Weebly site.

Step 1: Access the Weebly Editor

1. Log in to your Weebly account
2. Click Edit Site on the website you want to modify
3. The Weebly drag-and-drop editor will open

Step 2: Add Embed Code Element

1. In the left sidebar, find the Basic or More section
2. Look for the Embed Code element
3. Drag and drop the Embed Code element onto your page
4. Place it at the bottom of your page (recommended) or wherever you prefer

Step 3: Add Your Widget Script

1. Click on the Embed Code element you just added
2. A popup window will appear with a text box
3. Click Edit Custom HTML
4. Paste your widget script:

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

5. Replace YOUR_API_KEY with your actual API key from your dashboard
6. Click Update or outside the popup to close

Step 4: Add to Other Pages

If you want the widget on multiple pages:

1. Copy the Embed Code element (Ctrl+C or Cmd+C)
2. Navigate to another page
3. Paste the element (Ctrl+V or Cmd+V)
4. Repeat for all desired pages

Step 5: Publish Your Site

1. Click Publish in the top right corner
2. Your widget is now live on your website!

Method 2: Using Footer Code (Site-Wide)

This method adds the widget to all pages at once.

Step 1: Access Settings

1. In the Weebly editor, click Settings in the top menu
2. Select SEO from the left sidebar
3. Scroll down to the Footer Code section

Step 2: Add Your Widget Script

1. Click in the Footer Code text box
2. Paste your widget script:

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

3. Replace YOUR_API_KEY with your actual API key

Step 3: Save and Publish

1. Click Save at the bottom of the settings
2. Exit settings by clicking the X or back arrow
3. Click Publish in the top right corner
4. Your widget will now appear on all pages of your site

Method 3: Using Header Code (Alternative)

Similar to Method 2, but adds code to the header section.

Step 1: Access Header Code

1. Click Settings in the top menu
2. Select SEO from the left sidebar
3. Scroll to the Header Code section

Step 2: Add Your Script

1. Paste your widget script in the Header Code box:

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

2. Replace YOUR_API_KEY with your actual API key

Step 3: Save and Publish

1. Click Save
2. Click Publish

Note: Footer Code (Method 2) is generally preferred for better page load performance.

Installing on Specific Pages Only

Using Embed Code Element

Follow Method 1 and only add the Embed Code element to the pages where you want the widget.

Using Page-Specific Settings

Weebly doesn't have built-in page-specific code injection, so use Method 1 (Embed Code) for page-specific installation.

Weebly E-Commerce Sites

For Weebly stores:

On All Pages

Use Method 2 (Footer Code) to add the widget site-wide.

On Product Pages Only

1. Edit a product page
2. Use Method 1 (Embed Code element) to add the widget
3. The widget will only appear on that specific product page
4. Repeat for other product pages as needed

On Checkout Page

Unfortunately, Weebly doesn't allow custom code on checkout pages for security reasons. The widget will work on all other pages using Method 2.

Weebly App Center

Check for Native Integration

1. Go to Apps in the Weebly editor
2. Search for our widget name
3. If available, click Add for easy one-click installation

Note: If our widget isn't in the Weebly App Center yet, use the manual installation methods above.

Troubleshooting

Widget Not Appearing

1. Publish your site:

   • Make sure you clicked Publish after adding the code
   • Changes don't appear until you publish

2. Clear cache:

   • Clear your browser cache
   • Use Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
   • Try viewing in an incognito/private browser window

3. Check element placement:

   • Make sure the Embed Code element is visible (not hidden)
   • Try moving it to a different location on the page

4. Verify API key:

   • Ensure you replaced YOUR_API_KEY with your actual key
   • Check for extra spaces or estimates
   • Confirm the key is correct in your dashboard

Widget Appears Multiple Times

• You may have added the code in multiple locations:
  • Both Footer Code (site-wide) AND Embed Code elements
  • Multiple Embed Code elements
• Remove duplicate installations

Embed Code Element Shows Raw Code

• Make sure you're using the Embed Code element, not a Text element
• The code should be invisible on your page
• If you see the actual code text, you're using the wrong element type

Widget Not Working After Theme Change

• Custom code should persist after theme changes
• If widget disappears, re-add it following the methods above
• Check that the Embed Code elements weren't removed

Best Practices

1. Use Method 2 (Footer Code) for site-wide installation - it's the most efficient
2. Use Method 1 (Embed Code) for page-specific installation
3. Always publish after changes to see them on your live site
4. Test on mobile - Weebly is mobile-responsive, but always verify
5. Keep your API key secure - don't share it publicly

Weebly Plan Comparison

Note: Free plans may have limited access to SEO settings and custom code features.

Important Notes

⚠️ Weebly Editor Versions:

• Weebly has updated their editor over time
• If your interface looks different, look for similar menu items
• The core functionality remains the same

⚠️ Code Limitations:

• Some advanced JavaScript features may have restrictions
• Weebly's platform has security measures that may limit certain code
• Our widget is designed to work within these limitations

⚠️ Mobile Responsiveness:

• The widget should automatically work on mobile devices
• Always test on both desktop and mobile after installation

Weebly vs Square Online

If you're using Square Online (formerly Weebly):

The same methods apply:

1. Embed Code Element - Works the same way
2. Footer Code - Found in Settings → SEO
3. Header Code - Also in Settings → SEO

Square Online uses the same platform as Weebly, so all instructions above are applicable.

Advanced Tips

Checking if Code is Working

1. Right-click on your published site
2. Select View Page Source or Inspect
3. Press Ctrl+F (Cmd+F on Mac) to search
4. Search for "YourWidget" or your widget name
5. If found, the code is installed correctly

Positioning the Embed Code Element

• Bottom of page: Best for widgets that appear as overlays or pop-ups
• Specific section: If your widget needs to appear in a certain location
• Footer area: Use the Weebly footer section for consistent placement

Compatibility

The widget is compatible with:

• All Weebly themes (standard and premium)
• Weebly drag-and-drop editor
• Weebly e-commerce features
• Square Online stores
• Mobile and desktop views

Need Help?

If you encounter any issues:

• Check our FAQ at [your-support-url]
• Contact support at [your-support-email]
• Mention that you're using Weebly or Square Online
• Include your plan type (Free, Starter, Pro, or Business)
• Take screenshots of any error messages

Removing the Widget

To remove the widget from your Weebly site:

If using Embed Code Element:

1. Open your site in the Weebly editor
2. Click on the Embed Code element
3. Press Delete on your keyboard, or
4. Click the trash can icon that appears
5. Repeat for all pages where you added it
6. Click Publish

If using Footer Code:

1. Go to Settings → SEO
2. Scroll to Footer Code
3. Delete the widget script
4. Click Save
5. Click Publish

If using Header Code:

1. Go to Settings → SEO
2. Scroll to Header Code
3. Delete the widget script
4. Click Save
5. Click Publish

Quick Reference

Fastest Installation: Method 2 (Footer Code) for site-wide Most Flexible: Method 1 (Embed Code) for specific pages Best Performance: Method 2 (Footer Code)

Remember to always Publish your site after making changes!