Elementor Integration Guide

This guide shows you how to add Heyo to your WordPress site built with Elementor.

Installation

Since Elementor runs on WordPress, follow the WordPress installation guide for the complete setup.

Quick summary:

Method 1: WordPress Plugin

1. Install a header/footer code injection plugin (e.g., "Insert Headers and Footers")
2. Add the Heyo script to the Header section:

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

Method 2: Theme functions.php

Add 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');

Elementor-Specific Integration

Using Elementor's HTML Widget

For page-specific chat:

1. Edit your page in Elementor
2. Drag an HTML widget onto the page
3. Paste the Heyo script
4. The widget can be placed anywhere (it won't be visible, but chat will work)

In Elementor Theme Builder

For site-wide integration:

1. Go to Templates > Theme Builder
2. Edit your Header or Footer template
3. Add an HTML widget with the Heyo script
4. Save and apply the template

In Elementor Popups

To show chat trigger in a popup:

1. Create an Elementor popup
2. Add a Button widget
3. Set button action to Custom or Link
4. Add this to your page's HTML widget:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find Elementor buttons with specific class
  const buttons = document.querySelectorAll('.heyo-chat-button');
  buttons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      window.HEYO?.show();
    });
  });
});
</script>

5. Add class heyo-chat-button to your button's Advanced > CSS Classes

Advanced Integration

Custom Elementor Button

Create a beautiful custom button to open chat:

1. Add a Button widget in Elementor
2. Style it to match your design
3. In Link settings, set to #heyo-chat
4. Add this HTML widget on the same page:

<script>
jQuery(document).ready(function($) {
  $('a[href="#heyo-chat"]').on('click', function(e) {
    e.preventDefault();
    window.HEYO?.show();
  });
});
</script>

Hide Default Widget on Specific Pages

In Elementor, add an HTML widget:

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

Apply this on pages where you don't want the default chat button.

Dynamic Content Integration

If using Elementor Pro's dynamic content:

<script>
window.addEventListener('load', function() {
  if (window.HEYO) {
    window.HEYO.init({
      projectId: 'YOUR_PROJECT_ID',
      user: {
        // These would come from WordPress user data
        name: '<?php echo esc_js(wp_get_current_user()->display_name); ?>',
        email: '<?php echo esc_js(wp_get_current_user()->user_email); ?>'
      }
    });
  }
});
</script>

Elementor Pro Features

Works with:

• Elementor Forms (chat provides additional contact method)
• Elementor Popups
• Elementor Theme Builder
• Elementor Dynamic Tags
• WooCommerce Builder

Performance Optimization

Heyo is already optimized, but for best results:

• Use asset loading optimization in Elementor settings
• Enable Elementor's performance features
• Heyo won't impact Elementor's lazy loading

WooCommerce + Elementor

For e-commerce sites:

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

This shows chat only on WooCommerce pages.

Best Practices

• Use WordPress-level integration for site-wide chat
• Use Elementor HTML widgets for page-specific chat
• Leverage Theme Builder for consistent placement
• Style custom buttons to match your Elementor design
• Test on all breakpoints (mobile, tablet, desktop)
• Ensure chat doesn't overlap important Elementor elements

Troubleshooting

Widget not appearing

• Check WordPress integration is active
• Verify Elementor page is published (not draft)
• Clear Elementor cache (Elementor > Tools > Regenerate Files)
• Clear WordPress cache

Z-index conflicts

If chat button is behind Elementor elements:

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

Not working in Elementor editor

• Chat widget only works on published pages
• Preview the page or visit it live to test

Custom button not triggering

• Ensure jQuery is loaded
• Check browser console for JavaScript errors
• Verify button has correct href or class

Elementor Theme Compatibility

Heyo works with all Elementor themes:

• Hello Theme (Elementor's lightweight theme)
• Astra
• OceanWP
• GeneratePress
• Any WordPress theme with Elementor

Elementor Addons Compatibility

Compatible with popular Elementor addons:

• Essential Addons
• Unlimited Elements
• PowerPack
• Premium Addons
• JetElements

Next Steps

• WordPress integration guide
• Customize widget appearance
• Set up integrations