Installing the Widget on Wix

Overview

This guide will walk you through installing our JavaScript widget on your Wix website. Wix offers multiple methods depending on your plan and needs.

Method 1: Using Custom Code (Recommended)

This method works for all Wix Premium plans and adds the widget to your entire site.

Step 1: Access Settings

1. Log in to your Wix account
2. Go to your Site Dashboard
3. Click on Settings in the left sidebar
4. Scroll down and click on Custom Code under Advanced Settings

Step 2: Add New Code

1. Click + Add Custom Code button at the top right
2. A popup window will appear

Step 3: Configure Your Widget

1. Paste your code in the text 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

3. Enter a name for your code (e.g., "My Widget Script")

4. Add code to pages: Select All Pages (or choose specific pages)

5. Place code in: Select Body - end

6. Load code once: Leave this option selected (recommended)

Step 4: Apply Changes

1. Click Apply button
2. Your widget is now installed!

Step 5: Publish Your Site

1. Click the Publish button in the top right corner of your editor
2. Wait for your site to publish
3. Visit your live site to see the widget in action

Method 2: Using Embed Code Element

This method lets you add the widget to specific pages or sections.

Step 1: Open the Wix Editor

1. Go to your Wix Dashboard
2. Click Edit Site to open the editor

Step 2: Add Embed Code Element

1. Click the Add Elements button (+) on the left sidebar
2. Click Embed Code
3. Select Embed HTML
4. Drag the embed element to where you want it on your page (you can position it anywhere, but bottom of page is recommended)

Step 3: Add Your Widget Code

1. Click Enter Code in the embed element
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
4. Click Update

Step 4: Configure Settings

1. Click Settings on the embed element
2. Under "What does this code do?":
   • Select Other
3. Click Apply

Step 5: Publish Your Changes

1. Click Publish in the top right
2. Your widget will now appear on that page

Note: You'll need to repeat this process for each page where you want the widget to appear.

Method 3: Using Tracking & Analytics

This method is ideal for site-wide installation and works with all Premium plans.

Step 1: Access Tracking Tools

1. Go to your Site Dashboard
2. Click Settings in the left sidebar
3. Scroll to Advanced section
4. Click Tracking & Analytics

Step 2: Add New Tool

1. Click + New Tool button
2. Select Custom from the list

Step 3: Add Your Code

1. Give your tool a name (e.g., "My Widget")

2. Paste your widget script in the Paste the code snippet here box:

<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

4. Under Add Code to Pages: Select All pages (or choose specific pages)

5. Under Place Code in: Select Body - end

6. Click Apply

Installing on Specific Pages Only

Using Custom Code for Specific Pages

When adding custom code (Method 1):

1. In step 3, under Add code to pages, select Choose specific pages
2. Check the boxes next to the pages where you want the widget
3. Click Apply

Page Selection Options

You can choose to add the widget to:

• All pages
• Homepage only
• Specific pages (select from list)
• All pages except specific pages

Wix ADI (Artificial Design Intelligence) Sites

If you created your site with Wix ADI:

1. You'll need to switch to the Wix Editor to add custom code
2. Go to your Dashboard
3. Click Edit Site
4. Select Switch to the Wix Editor
5. Once switched, follow Method 1 or Method 2 above

Note: Switching from ADI to the Editor is permanent and cannot be undone.

Wix Editor X / Wix Studio

For Wix Editor X or Wix Studio users:

Using Page Code

1. Open your site in Editor X/Studio
2. Click on the page menu (looks like stacked papers) on the left sidebar
3. Hover over the page you want to edit
4. Click the three dots (...)
5. Select Page Code
6. Paste your widget script in the Body - End section
7. Click Apply

Troubleshooting

Widget Not Appearing

1. Verify you have a Premium plan:

   • Custom code features require a Wix Premium plan
   • Free Wix sites cannot add custom code
   • Upgrade at wix.com if needed

2. Check code placement:

   • Make sure you selected "Body - end" as the placement
   • Verify the code is set to load on the correct pages

3. Clear cache and refresh:

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

4. Republish your site:

   • Go to the Wix Editor
   • Click Publish again
   • Wait a few minutes for changes to propagate

5. Verify API key:

   • Make sure you've replaced YOUR_API_KEY with your actual key
   • Check for extra spaces or estimates
   • Verify the key is correct in your dashboard

Widget Appears Multiple Times

• You may have added the widget in multiple places
• Check Custom Code, Tracking & Analytics, and Embed elements
• Remove duplicate installations

Widget Only Works on Some Pages

• Review your page selection settings in Custom Code
• Make sure "All Pages" is selected, or verify specific pages are checked
• Check if you have different settings in Tracking & Analytics

Error Messages

If you see "Invalid Code" or similar errors:

• Check that you've copied the entire script
• Make sure there are no missing < or > characters
• Verify estimates are straight estimates (") not curly estimates ("")
• Try removing and re-adding the code

Important Notes

⚠️ Premium Plan Required:

• Custom code features require a Wix Premium plan
• Free Wix sites do not support custom code
• Upgrade your plan to use this feature

⚠️ Preview vs. Published:

• Custom code may not work in Preview mode
• Always test on your published live site

⚠️ Mobile Responsiveness:

• The widget will automatically adapt to mobile devices
• Test on both desktop and mobile after installation

Best Practices

1. Use Method 1 (Custom Code) for site-wide installation
2. Test before going live - preview your changes
3. Keep your API key secure - don't share it publicly
4. Document your installation - note which method you used
5. Check after major Wix updates - custom code usually persists but verify

Wix Plan Comparison

Note: Embed HTML on free plans is limited and may not work for all widgets.

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 Wix and include your plan type
• Take screenshots of any error messages

Removing the Widget

To remove the widget from your Wix site:

If using Custom Code:

1. Go to Settings → Custom Code
2. Find your widget code
3. Click the three dots (...)
4. Select Delete
5. Confirm deletion
6. Republish your site

If using Embed Element:

1. Open the Wix Editor
2. Click on the embed element containing the widget
3. Press Delete on your keyboard
4. Publish your site

If using Tracking & Analytics:

1. Go to Settings → Tracking & Analytics
2. Find your widget tool
3. Click Delete
4. Confirm deletion