Intégration WordPress

Ajoutez les widgets audio Ekoo sur votre site WordPress via des shortcodes, blocs Gutenberg, ou un plugin de script. Choisissez la méthode qui correspond le mieux à votre workflow et niveau de confort technique.

Chargement du script

Premièrement, chargez le script du widget Ekoo pour qu'il se charge sur chaque page (ou seulement sur les pages où vous en avez besoin). Ajoutez ce qui suit au functions.php de votre thème :

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

Méthode 1 : Shortcode personnalisé

Enregistrez un shortcode qui affiche l'élément widget. Cela vous permet de placer le widget n'importe où en utilisant [ekoo_widget] dans l'éditeur d'article :

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

Utilisez-le dans n'importe quel article ou page :

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

Méthode 2 : Bloc HTML personnalisé Gutenberg

Dans l'éditeur Gutenberg, ajoutez un bloc HTML personnalisé et collez l'élément widget directement :

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>

Cette approche est rapide mais nécessite de saisir manuellement l'ID du produit pour chaque page. La méthode shortcode est plus flexible pour le contenu dynamique.

IDs produit dynamiques

Si vous utilisez WooCommerce, vous pouvez afficher automatiquement l'ID du produit dans votre template de produit. Par exemple, dans un template de produit unique WooCommerce :

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; ?>

Pour les articles ou pages WordPress standard, vous pouvez utiliser l'ID de l'article :

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

Approche par plugin

Si vous préférez ne pas éditer les fichiers du thème, vous pouvez utiliser un plugin comme Header Footer Code Manager ou Insert Headers and Footers pour ajouter le script Ekoo globalement. Collez simplement la balise script dans la section header du plugin :

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

Bonnes pratiques

• Chargez le script en utilisant wp_enqueue_script plutôt que de le coder en dur dans le template — cela évite le chargement en double et suit les conventions WordPress.
• Échappez toujours les valeurs d'attributs avec esc_attr() dans les templates PHP pour éviter les vulnérabilités XSS.
• Testez à la fois sur le front-end et l'aperçu de l'éditeur Gutenberg pour vérifier le placement du widget.
• Si vous mettez à jour votre thème WordPress, n'oubliez pas de ré-ajouter toute personnalisation au functions.php — ou utilisez un thème enfant pour garder les changements en sécurité lors des mises à jour.
• Assurez-vous que vos IDs produit Ekoo correspondent exactement aux identifiants utilisés dans votre catalogue WordPress ou WooCommerce.