Sign Up

Webflow

Install the widget on your Webflow website

Installing the Widget on Webflow

Overview

This guide will show you how to install our JavaScript widget on your Webflow website. Webflow provides flexible options for adding custom code both site-wide and on individual pages.

Method 1: Site-Wide Installation (Recommended)

This method adds the widget to all pages of your website.

Step 1: Access Project Settings

  1. Log in to your Webflow account
  2. Open your project dashboard
  3. Click on the project name or Settings icon (⚙️) in the top left
  4. Select Custom Code from the left sidebar

  1. You'll see three sections:

    • Head code - Loads in the <head> of every page
    • Footer code - Loads before the closing </body> tag (recommended)
    • Custom attributes

  2. Scroll down to the Footer code section

  3. Paste your widget script:

<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
  1. Replace YOUR_API_KEY with your actual API key from your dashboard

Step 3: Save and Publish

  1. Click Save Changes at the top right
  2. Go back to your Designer
  3. Click Publish in the top right corner
  4. Select your domain and click Publish to selected domains

Step 4: Verify Installation

  1. Visit your live website in a new browser tab
  2. The widget should appear on all pages
  3. Clear browser cache if needed (Ctrl+Shift+R or Cmd+Shift+R)

Method 2: Page-Specific Installation

Add the widget to individual pages only.

Step 1: Open Designer

  1. Open your project in the Webflow Designer
  2. Navigate to the Pages panel (left sidebar)

Step 2: Access Page Settings

  1. Click on the gear icon (⚙️) next to the page name where you want to add the widget
  2. Select Custom Code from the page settings panel

Step 3: Add Page Footer Code

  1. In the page settings, you'll see:

    • Head code
    • Before </body> tag (recommended)

  2. Click in the Before </body> tag text box

  3. Paste your widget script:

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

Step 4: Save and Publish

  1. Click outside the custom code panel or click the X to close
  2. Click Save if prompted
  3. Click Publish and publish your site

Note: Repeat for each page where you want the widget.

Method 3: Using Embed Element

Add the widget to a specific section or location on a page.

Step 1: Open Designer

  1. Open your project in the Webflow Designer
  2. Navigate to the page where you want to add the widget

Step 2: Add Custom Code Embed

  1. Click the Add Elements button (+) in the left toolbar
  2. Scroll down to Components section
  3. Drag the Embed element onto your page
  4. Place it where you want the widget (bottom of page recommended)

Step 3: Add Your Code

  1. Double-click the Embed element or click the Settings icon
  2. An HTML Embed settings panel will open
  3. Paste your widget script:
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
  1. Replace YOUR_API_KEY with your actual API key
  2. Click Save & Close

Step 4: Publish Changes

  1. Click Publish in the top right
  2. The widget will appear in that specific location on the page

Installing on Multiple Pages with Same Template

If you have multiple pages using the same template:

Step 1: Edit Template

  1. Go to the Pages panel
  2. Find your template page (usually named like "Blog Post Template", "CMS Template", etc.)
  3. Open that template in the Designer

Step 2: Add Embed Element

  1. Add an Embed element to the template (Method 3 above)
  2. Add your widget script to the embed element
  3. The widget will automatically appear on all pages using that template

Step 3: Publish

  1. Click Publish to update all pages using this template

Webflow E-Commerce Installation

For Webflow e-commerce sites:

On All Pages (Including Cart/Checkout)

Use Method 1 (Site-Wide Installation) - it works on all pages including commerce pages.

On Product Pages Only

  1. Create or edit your Product Template
  2. Use Method 3 (Embed Element) to add the widget
  3. It will appear on all product pages

On Order Confirmation Page

  1. Go to E-commerce settings
  2. Click on Order Confirmation
  3. Add your widget script to the page using an Embed element

Webflow CMS Integration

For sites using Webflow CMS:

On All Collection Pages

  1. Edit your Collection Template
  2. Add an Embed element with your widget script
  3. All collection items will include the widget

With Dynamic Content

You can pass dynamic values to your widget:

<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY',
    pageTitle: '{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}',
    pageId: '{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}'
  });
</script>

Troubleshooting

Widget Not Appearing

  1. Publish your site:

    • Changes in the Designer don't take effect until published
    • Make sure you've published to your live domain

  2. Clear cache:

    • Use Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
    • Try viewing in an incognito/private browser window
    • Wait a few minutes for Webflow's CDN to update

  3. Check code placement:

    • Verify you added the code to Footer/Before </body> tag
    • Make sure you clicked Save Changes

  4. Verify API key:

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

Widget Appears Multiple Times

  • You may have added the code in multiple locations:
    • Site-wide custom code
    • Page-specific custom code
    • Multiple embed elements
  • Remove duplicate installations

Widget Not Working in Preview/Designer

  • Custom JavaScript doesn't execute in the Webflow Designer
  • Custom code has limited functionality in preview mode
  • Always test on your published live site

Embed Element Shows Code

  • Make sure you're using an Embed element, not a Text or Code element
  • The embed element should render the code, not display it as text

Best Practices

  1. Use Method 1 (Site-Wide Footer Code) for most cases - it's the cleanest approach
  2. Always publish after changes - changes don't take effect until published
  3. Test on published site - the Designer and preview have limitations
  4. Use Footer code instead of Head code for better performance
  5. Keep your API key secure - never expose it in public repositories

Webflow Plan Requirements

FeatureFree PlanLite/Pro PlansHosting Required
Custom Code✅ Yes✅ Yes✅ Yes
Site-wide Code✅ Yes✅ Yes✅ Yes
Page-level Code✅ Yes✅ Yes✅ Yes
Embed Elements✅ Yes✅ Yes✅ Yes

Note: You need to have a site plan (hosting) to publish and see custom code on your live site.

Advanced Configuration

Loading Widget After Webflow Interactions

If your widget conflicts with Webflow interactions:

<script>
  window.Webflow = window.Webflow || [];
  window.Webflow.push(function() {
    // Webflow interactions are ready
    var script = document.createElement('script');
    script.src = 'https://your-domain.com/widget.js';
    script.onload = function() {
      YourWidget.init({
        apiKey: 'YOUR_API_KEY'
      });
    };
    document.body.appendChild(script);
  });
</script>

Conditional Loading by Breakpoint

Load widget only on desktop:

<script>
  if (window.innerWidth > 991) {
    var script = document.createElement('script');
    script.src = 'https://your-domain.com/widget.js';
    script.onload = function() {
      YourWidget.init({
        apiKey: 'YOUR_API_KEY'
      });
    };
    document.body.appendChild(script);
  }
</script>

Important Notes

⚠️ Publishing is Required:

  • Custom code only works on published sites
  • Changes in Designer/Preview won't show the widget
  • Always publish to see your widget in action

⚠️ CDN Caching:

  • Webflow uses a CDN that may cache your pages
  • Changes can take a few minutes to appear
  • Use incognito mode for immediate testing

⚠️ Export Code:

  • If you export your Webflow site, custom code from Project Settings is included
  • Page-specific code and Embed elements are also included

Webflow Designer Tips

  1. Embed elements are invisible in Designer - this is normal
  2. Use Comments - Add HTML comments in your embed to remember what it's for
  3. Preview limitations - Some JavaScript won't work in preview mode
  4. Interactions - Test that your widget doesn't interfere with Webflow interactions

Need Help?

If you encounter any issues:

  • Check our FAQ at [your-support-url]
  • Contact support at [your-support-email]
  • Include your Webflow site URL and plan type
  • Mention if you're using CMS or E-commerce features
  • Take screenshots of any error messages

Removing the Widget

To remove the widget from your Webflow site:

If using Site-Wide Custom Code:

  1. Go to Project Settings → Custom Code
  2. Find and delete your widget code from the Footer section
  3. Click Save Changes
  4. Publish your site

If using Page-Specific Code:

  1. Go to Pages panel
  2. Click the gear icon next to the page
  3. Select Custom Code
  4. Delete the widget code
  5. Close settings and publish

If using Embed Element:

  1. Open the page in Designer
  2. Select the Embed element containing the widget
  3. Press Delete on your keyboard
  4. Publish your site

Version Control & Backups

  • Webflow automatically saves versions of your site
  • You can restore previous versions from Settings → Backups
  • If something breaks, you can roll back to before adding the widget