undefined Logo
Docs

WordPress Integration Guide

Add Heyo live chat to your WordPress website with no coding required. Works with any theme and WooCommerce.
Try Heyo for WordPress →

This guide shows you how to add Heyo to your WordPress website. No coding knowledge required.

Installation

Method 1: Using a Plugin (Recommended)

  1. Install a header/footer code injection plugin (e.g., "Insert Headers and Footers" or "WPCode")
  2. Go to the plugin settings in your WordPress admin
  3. Add this code to the Header section:
<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
  1. Save changes and the chat widget will appear on all pages

Method 2: Edit Theme Files

If you're comfortable editing theme files:

  1. Go to Appearance > Theme File Editor
  2. Select your active theme
  3. Open header.php
  4. Add this code before the closing </head> tag:
<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
  1. Click Update File
Theme updates will overwrite this change. Consider using a child theme or method 1 instead.

Method 3: Using functions.php

Add this code to your theme's functions.php:

function heyo_chat_widget() {
    ?>
    <script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
    <?php
}
add_action('wp_head', 'heyo_chat_widget');

WooCommerce Integration

Heyo works perfectly with WooCommerce out of the box. Here are some tips:

Show Chat Only on Store Pages

function heyo_chat_widget() {
    // Only show on WooCommerce pages
    if (is_woocommerce() || is_cart() || is_checkout()) {
        ?>
        <script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
        <?php
    }
}
add_action('wp_head', 'heyo_chat_widget');

Pass Customer Data

Pass logged-in customer data to Heyo:

function heyo_chat_widget() {
    $current_user = wp_get_current_user();
    ?>
    <script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
    <script>
    window.addEventListener('load', function() {
        if (window.HEYO) {
            window.HEYO.init({
                projectId: 'YOUR_PROJECT_ID',
                user: {
                    name: '<?php echo esc_js($current_user->display_name); ?>',
                    email: '<?php echo esc_js($current_user->user_email); ?>'
                }
            });
        }
    });
    </script>
    <?php
}
add_action('wp_head', 'heyo_chat_widget');

Advanced Usage

Hide Chat on Specific Pages

Using WordPress conditional tags:

function heyo_chat_widget() {
    // Don't show on thank you page
    if (is_page('thank-you')) {
        return;
    }
    
    // Don't show in admin
    if (is_admin()) {
        return;
    }
    
    ?>
    <script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
    <?php
}
add_action('wp_head', 'heyo_chat_widget');

Show Chat Only for Logged-Out Users

function heyo_chat_widget() {
    if (!is_user_logged_in()) {
        ?>
        <script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>
        <?php
    }
}
add_action('wp_head', 'heyo_chat_widget');

Custom Trigger Button

Add a custom button anywhere in your theme:

<button onclick="window.HEYO?.show()">
    Need Help? Chat with us!
</button>

Page Builder Integration

Elementor

  1. Open your page in Elementor
  2. Add an HTML widget
  3. Paste the Heyo script code
  4. Publish your page

Alternatively, use Elementor's Theme Builder to add it to your header template site-wide.

Divi

  1. Go to Divi > Theme Options
  2. Find the Integrations tab
  3. Add the Heyo script to the Head code section
  4. Save changes

Gutenberg

Add an HTML block to any page and paste the script code.

Performance Optimization

Caching Compatibility

Heyo works with all major caching plugins:

  • WP Rocket
  • W3 Total Cache
  • WP Super Cache
  • LiteSpeed Cache

The widget loads asynchronously and won't be affected by page caching.

Lazy Loading

For even better performance, load Heyo only when needed:

function heyo_lazy_load() {
    ?>
    <script>
    // Load chat when user scrolls or after 5 seconds
    let loaded = false;
    function loadChat() {
        if (!loaded) {
            const script = document.createElement('script');
            script.src = 'https://heyo.so/embed/script';
            script.defer = true;
            script.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
            document.head.appendChild(script);
            loaded = true;
        }
    }
    
    window.addEventListener('scroll', loadChat, { once: true });
    setTimeout(loadChat, 5000);
    </script>
    <?php
}
add_action('wp_footer', 'heyo_lazy_load');

Troubleshooting

Chat widget not appearing

  • Check that your Project ID is correct
  • Ensure there are no JavaScript errors (check browser console)
  • Verify the script is loading (check Network tab in dev tools)
  • Try clearing your cache

Conflicts with other plugins

  • Disable other chat plugins that might conflict
  • Check for JavaScript errors in console
  • Try switching to a default theme temporarily to isolate the issue

Not working with certain themes

  • Make sure you're adding the script to <head>, not <body>
  • Some themes might have custom header structures - use method 1 instead

Best Practices

  • Use a child theme if editing theme files directly
  • Test on different pages (blog, shop, checkout) after installation
  • Use conditional tags to control where the widget appears
  • Pass customer data for personalized support
  • Monitor performance impact (Heyo is already optimized, but good to check)

Next Steps

Wix Integration Guide

Add Heyo live chat to your Wix website. Works with Wix Stores and all Wix plans with custom code.