Webflow Integration Guide

This guide shows you how to add Heyo to your Webflow website. Perfect for designers, agencies, and client projects.

Installation

Step 1: Access Project Settings

1. Open your Webflow project
2. Click the Settings icon (gear icon) in the left sidebar
3. Navigate to the Custom Code tab

Step 2: Add Heyo Script

In the Head Code section, add:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

Step 3: Publish

Click Save Settings and Publish your site. The chat widget will now appear!

Advanced Integration

Custom Trigger Button

Create a custom-designed button in Webflow to open the chat:

1. Add a Button element in Webflow
2. Give it a class name (e.g., chat-trigger)
3. In the Custom Code section (Footer Code), add:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const chatButton = document.querySelector('.chat-trigger');
  if (chatButton) {
    chatButton.addEventListener('click', function(e) {
      e.preventDefault();
      window.HEYO?.show();
    });
  }
});
</script>

Hide Default Widget Button

If you're using a custom button, hide the default Heyo button:

<style>
  #heyo-widget-button {
    display: none !important;
  }
</style>

Show Chat on Specific Pages Only

Use Webflow's page-specific embed feature:

1. Go to the specific page settings
2. Add the Heyo script in that page's custom code
3. The widget will only appear on that page

Or use conditional display with JavaScript:

<script>
window.addEventListener('load', function() {
  // Hide on checkout page
  if (window.location.pathname.includes('/checkout')) {
    const heyoWidget = document.querySelector('#heyo-widget-button');
    if (heyoWidget) {
      heyoWidget.style.display = 'none';
    }
  }
});
</script>

Pass Form Data to Chat

Capture Webflow form submissions and pass context to chat:

<script>
// Add to Footer Code
document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('[data-name="Contact Form"]');
  
  if (form) {
    form.addEventListener('submit', function(e) {
      const email = form.querySelector('[name="email"]').value;
      const name = form.querySelector('[name="name"]').value;
      
      if (window.HEYO) {
        window.HEYO.init({
          projectId: 'YOUR_PROJECT_ID',
          user: {
            name: name,
            email: email
          }
        });
      }
    });
  }
});
</script>

Webflow CMS Integration

Dynamic Pages

Heyo automatically works on all Webflow CMS pages. To pass CMS data:

<!-- Add to CMS Template Page Settings -->
<script>
window.addEventListener('load', function() {
  if (window.HEYO) {
    window.HEYO.trackEvent('viewing_content', {
      title: document.title,
      url: window.location.href
    });
  }
});
</script>

E-commerce

For Webflow e-commerce sites, help customers during checkout:

<script>
window.addEventListener('load', function() {
  // Track product views
  const productName = document.querySelector('.product-name')?.textContent;
  
  if (productName && window.HEYO) {
    window.HEYO.trackEvent('viewing_product', {
      product: productName
    });
  }
});
</script>

Customization

Match Your Webflow Design

Customize the widget colors in your Heyo dashboard:

1. Go to Project Settings > Appearance
2. Set colors to match your Webflow brand
3. Choose position (bottom-right or bottom-left)

Responsive Behavior

Control widget visibility on mobile:

<style>
  @media (max-width: 768px) {
    #heyo-widget-button {
      bottom: 80px; /* Adjust if needed */
    }
  }
</style>

Agency & Client Projects

Multi-Project Setup

For agencies managing multiple client sites:

1. Create a separate Heyo project for each client
2. Use different Project IDs for each Webflow site
3. Give clients access to their Heyo inbox

White-Label Option

With Heyo Pro, remove branding for a professional client deliverable.

Best Practices

• Add Heyo code to Head section for best performance
• Use custom buttons for better design control
• Leverage Webflow interactions for chat button animations
• Test on all breakpoints (desktop, tablet, mobile)
• Use Webflow's staging environment before publishing

Troubleshooting

Widget not appearing

• Verify you're on a paid Webflow site plan
• Check that custom code is saved and site is published
• Clear browser cache and check in incognito mode
• Look for JavaScript errors in browser console

Widget appearing twice

• Make sure you've only added the script once
• Check both site-wide and page-specific custom code sections

Conflicts with Webflow interactions

• Heyo shouldn't conflict, but if needed, adjust z-index:

<style>
  #heyo-widget-button {
    z-index: 9999 !important;
  }
</style>

Not showing on published site

• Ensure you've published, not just saved
• Wait a few minutes for Webflow's CDN to update
• Check if you're viewing the correct published domain

Next Steps

• Customize your widget
• Set up integrations
• Learn about visitor outreach