WordPress Integration

Add Ekoo audio widgets to your WordPress site using shortcodes, Gutenberg blocks, or a script plugin. Choose the method that best matches your workflow and technical comfort level.

Script Loading

First, enqueue the Ekoo widget script so it loads on every page (or only on pages where you need it). Add the following to your theme's functions.php:

1function ekoo_enqueue_widget_script() {
2    wp_enqueue_script(
3        'ekoo-widget',
4        'https://app.ekoo.co/widgets/widget-4.0.0-standalone.js',
5        array(),
6        '4.0.0',
7        array( 'strategy' => 'defer', 'in_footer' => false )
8    );
9}
10add_action( 'wp_enqueue_scripts', 'ekoo_enqueue_widget_script' );

Method 1: Custom Shortcode

Register a shortcode that outputs the widget element. This lets you place the widget anywhere using [ekoo_widget] in the post editor:

1function ekoo_widget_shortcode( $atts ) {
2    $atts = shortcode_atts( array(
3        'website_id' => '',
4        'product_id' => '',
5        'locale'     => '',
6    ), $atts, 'ekoo_widget' );
7
8    if ( empty( $atts['website_id'] ) || empty( $atts['product_id'] ) ) {
9        return '<!-- Ekoo: website_id and product_id are required -->';
10    }
11
12    $locale_attr = ! empty( $atts['locale'] )
13        ? ' data-ekoo-locale="' . esc_attr( $atts['locale'] ) . '"'
14        : '';
15
16    return sprintf(
17        '<div data-ekoo="%s" data-ekoo-product-id="%s"%s></div>',
18        esc_attr( $atts['website_id'] ),
19        esc_attr( $atts['product_id'] ),
20        $locale_attr
21    );
22}
23add_shortcode( 'ekoo_widget', 'ekoo_widget_shortcode' );

Use it in any post or page:

1[ekoo_widget website_id="YOUR_WEBSITE_ID" product_id="YOUR_PRODUCT_ID" locale="en"]

Method 2: Gutenberg Custom HTML Block

In the Gutenberg editor, add a Custom HTML block and paste the widget element directly:

1<ekoo-widget
2  data-ekoo="YOUR_WEBSITE_ID"
3  data-ekoo-product-id="YOUR_PRODUCT_ID"
4  data-ekoo-locale="en"
5></ekoo-widget>
6
7<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"</script>

This approach is quick but requires manually entering the product ID for each page. The shortcode method is more flexible for dynamic content.

Dynamic Product IDs

If you are using WooCommerce, you can output the product ID automatically in your product template. For example, in a WooCommerce single product template:

1<?php
2global $product;
3if ( $product ) :
4?>
5<ekoo-widget
6  data-ekoo="YOUR_WEBSITE_ID"
7  data-ekoo-product-id="<?php echo esc_attr( $product->get_id() ); ?>"
8></ekoo-widget>
9<?php endif; ?>

For standard WordPress posts or pages, you can use the post ID:

1<ekoo-widget
2  data-ekoo="YOUR_WEBSITE_ID"
3  data-ekoo-product-id="<?php echo esc_attr( get_the_ID() ); ?>"
4></ekoo-widget>

Plugin Approach

If you prefer not to edit theme files, you can use a plugin such as Header Footer Code Manager or Insert Headers and Footers to add the Ekoo script globally. Simply paste the script tag into the plugin's header section:

1<script src="https://app.ekoo.co/widgets/widget-4.0.0-standalone.js"></script>

Best Practices

• Enqueue the script using wp_enqueue_script rather than hardcoding it in the template — this prevents duplicate loading and follows WordPress conventions.
• Always escape attribute values with esc_attr() in PHP templates to prevent XSS vulnerabilities.
• Test on both the front end and the Gutenberg editor preview to verify widget placement.
• If you update your WordPress theme, remember to re-add any customizations to functions.php— or use a child theme to keep changes safe during updates.
• Ensure your Ekoo product IDs match the identifiers used in your WordPress or WooCommerce catalog exactly.