Widget RumX pour ton site
Ajoute des évaluations, avis et conseils de dégustation fiables à ta boutique en ligne, ton blog ou ton site — et aide tes visiteurs à choisir la bonne bouteille. Gratuit, sans clé API ni compte.
Pourquoi intégrer le widget RumX
Instaurer la confiance
Affiche de vraies notes communautaires basées sur 287 000+ notes de dégustation de passionnés de rhum
Aide les clients à se décider
Mets en avant les meilleurs avis et impressions de dégustation pour aider les visiteurs à choisir
Pour tous les goûts
La section "Parfait pour" indique à qui chaque rhum convient, du débutant à l'expert
Toujours à jour
Les notes et les avis se synchronisent automatiquement, aucune mise à jour manuelle n'est nécessaire
Léger
Le widget se charge de manière asynchrone et ne ralentit pas ta page
C'est gratuit, sans aucune limite
Pas besoin de clé API, pas besoin de compte, pas de limite d'utilisation
Générateur de code
Guides d'intégration des plateformes
Des instructions étape par étape pour les plateformes les plus populaires. Le widget fonctionne sur n'importe quel site web prenant en charge le HTML personnalisé.
Ajoute le widget RumX à tes pages de produits Shopify à l'aide d'un bloc Liquid personnalisé.
{%- assign ean = product.selected_or_first_available_variant.barcode -%}
{%- if ean != blank -%}
<div class="rumx-widget"
data-ean="{{ ean }}"
data-lang="en">
<a href="https://rumx.com/en/rums/">RumX Rum Rating</a>
</div>
<script src="https://rumx.com/api/widget/v1/embed.js"></script>
{%- endif -%}Ajoute le widget RumX aux pages de produits WooCommerce. Tu peux coller le code pour chaque produit ou utiliser un extrait de code PHP pour une intégration automatique.
// Add to functions.php or a code snippets plugin
add_action('woocommerce_single_product_summary', function() {
global $product;
$ean = $product->get_global_unique_id(); // WooCommerce 9.2+
if (!$ean) return;
echo '<div class="rumx-widget" data-ean="' . esc_attr($ean) . '" data-lang="en">';
echo '<a href="https://rumx.com/en/rums/">RumX Rum Rating</a>';
echo '</div>';
echo '<script src="https://rumx.com/api/widget/v1/embed.js"></script>';
}, 35);Ajoute le widget RumX à n'importe quel article ou page WordPress à l'aide de l'éditeur de blocs.
// Add to functions.php
function rumx_widget_shortcode($atts) {
$atts = shortcode_atts(['rxid' => '', 'ean' => '', 'lang' => 'en'], $atts);
$id_attr = $atts['ean'] ? 'data-ean="' . esc_attr($atts['ean']) . '"'
: 'data-rxid="' . esc_attr($atts['rxid']) . '"';
return '<div class="rumx-widget" ' . $id_attr . ' data-lang="' . esc_attr($atts['lang']) . '">'
. '<a href="https://rumx.com/en/rums/">RumX Rum Rating</a></div>'
. '<script src="https://rumx.com/api/widget/v1/embed.js"></script>';
}
add_shortcode('rumx_widget', 'rumx_widget_shortcode');Le widget fonctionne sur n'importe quel site web : il suffit de coller le bout de code HTML là où tu veux qu'il s'affiche.
Guide de configuration
Personnalise le widget en utilisant ces attributs de données sur la balise div du widget.
| Attribute | Values | Default | Description |
|---|---|---|---|
data-rxid | Number | — | L'identifiant RumX du rhum à afficher. Tu le trouveras sur n'importe quelle page consacrée au rhum sur rumx.com. |
data-ean | Number | — | Recherche un rhum à l'aide de son code EAN/code-barres plutôt que de son RXID. Utile pour les intégrations automatiques avec les boutiques en ligne. |
data-shopify-id | Number | — | Recherche un rhum à l'aide de son ID de produit ou de variante Shopify (pour les boutiques partenaires de Shopify). |
data-lang | en, de, fr | en | Langue d'affichage de l'interface du widget. |
data-variant | full, badge | full | Variantes de mise en page du widget. « full » affiche le widget dans son intégralité, « badge » affiche un badge de notation compact. |
data-reviews | true, false | true | Afficher ou masquer la section des extraits d'avis (version complète uniquement). |
data-perfect-for | true, false | true | Afficher ou masquer la section « Idéal pour » contenant des conseils de dégustation (version complète uniquement). |
data-theme | light, dark | light | Thème de couleurs. Utilise « sombre » sur les arrière-plans sombres. |