Wix Integration Guide

This guide shows you how to add Heyo to your Wix website. Works with all premium Wix plans.

Prerequisites

You need a Wix Premium plan to add custom code to your site.

Installation

Step 1: Access Custom Code

1. In your Wix Editor, click Settings in the top menu
2. Click Custom Code in the Advanced settings section
3. Click + Add Custom Code

Step 2: Add Heyo Script

1. Paste this code:

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

2. Set these options:
   • Name: Heyo Chat Widget
   • Add Code to Pages: All pages (or specific pages)
   • Place Code in: Head
   • Load code once: Checked
3. Click Apply

That's it! The chat widget will now appear on your Wix site.

Show Chat on Specific Pages Only

When adding custom code, select "Choose specific pages" instead of "All pages":

1. Click + Add Custom Code
2. Paste the Heyo script
3. Under "Add Code to Pages", select Choose specific pages
4. Select the pages where you want chat to appear
5. Click Apply

Wix Stores Integration

For e-commerce sites, consider these strategies:

Show Chat on Product Pages

Add custom code to product pages only:

1. Add custom code
2. Select "Choose specific pages"
3. Select all your product pages
4. This helps customers with product questions

Hide Chat on Checkout

You may want to hide chat during checkout to avoid distractions:

1. Add a second custom code block
2. Add this code:

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

3. Apply only to checkout pages

Advanced Usage

Custom Trigger Button

Create a button in Wix that opens the chat:

1. Add a button to your Wix page
2. Click the button and select Link
3. Select Anchor and create an anchor if needed
4. Add this to your custom code (in Body - end of page):

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find buttons with specific text
  const buttons = document.querySelectorAll('button, a');
  buttons.forEach(button => {
    if (button.textContent.includes('Chat with us')) {
      button.addEventListener('click', function(e) {
        e.preventDefault();
        window.HEYO?.show();
      });
    }
  });
});
</script>

Then label your button "Chat with us".

Match Your Wix Design

Customize the widget in your Heyo dashboard:

1. Go to Project Settings > Appearance
2. Match colors to your Wix site theme
3. Choose position (bottom-right or bottom-left)

Wix Multilingual Support

If using Wix's multilingual feature:

The chat widget will appear on all language versions. You can set the widget language in Heyo settings to match your primary language.

Best Practices

• Add code to Head for best performance
• Use "Load code once" to avoid duplicate loading
• Test on both desktop and mobile
• Customize colors to match your Wix theme
• Consider page-specific visibility for better UX

Troubleshooting

Chat widget not appearing

• Verify you have a Wix Premium plan
• Check that custom code is set to "All pages" or includes current page
• Ensure code is set to Head, not Body
• Try clearing browser cache

Widget showing multiple times

• Check you haven't added the code multiple times
• Ensure "Load code once" is checked
• Remove duplicate custom code blocks

Not working in Wix Editor

• Custom code only works on published sites
• Click "Preview" or "Publish" to test
• Some features may not work in Editor mode

Widget position conflicts

• If chat button overlaps with Wix elements, adjust position in Heyo settings
• Use custom CSS to fine-tune positioning:

<style>
  #heyo-widget-button {
    bottom: 20px !important;
    right: 20px !important;
  }
</style>

Wix ADI Compatibility

Heyo works with both Wix Editor and Wix ADI (Artificial Design Intelligence). The installation process is the same regardless of which builder you used.

Wix Apps Compatibility

Heyo works alongside other Wix apps without conflicts. Compatible with:

• Wix Stores / eCommerce
• Wix Bookings
• Wix Forms
• Wix Restaurants
• All other Wix apps

Next Steps

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