Webflow Widget Integration

Webflow makes it easy to add custom code blocks. Here's the complete process.

[!IMPORTANT] You need a paid Webflow Site Plan (Basic or higher) to use the Embed element. It's not available on free Starter plans.

Step-by-Step Instructions

1. Copy your embed code

   • Log in to GizmoSauce
   • Open your widget and click Get Code
   • Copy the entire <script> tag

2. Open the Webflow Designer

   • Go to your project in Webflow
   • Open the Designer (visual editor)

3. Add an Embed element

   • Press A to open the Add panel (or click the + icon)
   • Search for Embed in the search bar
   • Drag the Embed element to your desired location on the canvas

4. Paste your code

   • A code editor modal will appear
   • Paste your GizmoSauce embed code
   • Click Save & Close

5. Publish to see the widget

   • ⚠️ Webflow does NOT execute scripts in the Designer for security
   • You'll see a gray placeholder box in the editor
   • Click Publish and view your .webflow.io staging URL to see the live widget

Tip: If the widget doesn't appear after publishing, try a hard refresh (Ctrl+Shift+R).

For widgets that should appear on every page of your Webflow site (like WhatsApp Chat or Cookie Consent), use the Project Settings method.

Method A: Project Settings (Recommended)

1. Click the gear icon in the left sidebar to open Project Settings
2. Navigate to the Custom Code tab
3. Scroll down to Footer Code
4. Paste your GizmoSauce embed code
5. Click Save Changes
6. Publish your site

✅ Your widget will now appear on every page automatically.

Method B: Using Symbols/Components

If you want to see the widget placeholder in the Designer:

1. Add the Embed element to your site
2. Wrap it in a Symbol (right-click → Create Symbol)
3. Name it 'GizmoSauce Widget'
4. Place this Symbol in your Footer or Navbar (which appears on all pages)

Important: Make sure the parent container doesn't have overflow: hidden set, or the widget may be cut off.