Wix Widget Integration

Adding widgets to Wix is straightforward, but there's one important step most people miss: resizing the embed container.

How to Add a Widget to Wix

1. Open the Wix Editor

   • Log in to your Wix account
   • Click Edit Site on your dashboard

2. Add an Embed HTML element

   • Click the + button on the left sidebar (Add Elements)
   • Navigate to: Embed Code → Popular Embeds → Embed HTML
   • Click or drag it onto your page

3. Enter your widget code

   • A gray box will appear on your page
   • Click Enter Code (or double-click the box)
   • Delete any placeholder text
   • Paste your complete GizmoSauce embed code
   • Click Update

4. ⚠️ IMPORTANT: Resize the container

   • Wix displays embeds inside an iframe
   • You MUST resize the box to fit your widget
   • Drag the corner handles to make the box large enough
   • If you see scrollbars, make it bigger
   • Recommended: At least 400px wide × 300px tall for most widgets

5. Publish your site

   • Click Publish in the top-right corner
   • View your live site to confirm the widget works

Tip: Widgets may not render in the Wix editor—always check the published site.

Wix handles desktop and mobile layouts separately, so you need to configure both.

Steps for Mobile Optimization

1. Switch to Mobile View

   • Click the phone icon at the top of the editor
   • This shows how your site looks on mobile devices

2. Adjust the widget position

   • Your widget may have moved or resized
   • Drag it to the correct location
   • Resize the container if needed

3. Consider mobile-specific settings

   • Right-click the widget and select Hide on Mobile if it doesn't work well on small screens
   • Alternatively, use the Mobile Editor to create a mobile-specific layout

Tip: Test on a real mobile device after publishing to ensure everything works correctly.

Floating widgets (like chat buttons or popups) have limitations on Wix due to iframe sandboxing.

The Problem

Wix runs embed code inside an iframe, which means floating elements cannot escape the iframe boundaries to float over your entire site.

Workaround for Chat Widgets

1. Resize the Wix HTML element to be 100% width and height of the viewport
2. Right-click the element and select Pin to Screen
3. Position it in the bottom-right corner

⚠️ Warning: This workaround may block clicks on your site content beneath the iframe.

Recommended Alternative

For best results on Wix, use inline-style widgets instead of floating ones:

• Review Grids
• Testimonial Sliders
• Social Feed Galleries
• FAQ Accordions

These work perfectly within Wix's iframe limitations.