UGC widget for WooCommerce and WordPress: install, tag, measure

Three ways to place the gallery

1. A header-and-footer plugin (most teams)

Plugins such as WPCode or Insert Headers and Footers let you add a script to every page without touching the theme. Paste the loader into the footer slot. Then, on any page, add a Custom HTML block containing the placeholder div. Theme updates never touch it.

2. functions.php (developer-maintained sites)

add_action( 'wp_footer', function () {
  echo '<script async src="https://widget.idukki.io/idukki.js"></script>';
} );

Use a child theme so the hook survives updates. The placeholder div still goes in the page content or template where the gallery belongs.

3. A shortcode you write once

add_shortcode( 'idukki', function ( $atts ) {
  $a = shortcode_atts( [ 'guid' => '', 'pid' => '' ], $atts );
  $pid = $a['pid'] ? ' data-filter-pid="' . esc_attr( $a['pid'] ) . '"' : '';
  return '<div data-ugc="idukki" data-guid="' . esc_attr( $a['guid'] ) . '"' . $pid . '></div>';
} );

With the shortcode in place, editors drop [idukki guid="…"] into any post or product description. On a WooCommerce single product template, pass the product id so the gallery filters to that product: [idukki guid="…" pid="{product id}"], or in a template file use get_the_ID() to fill it.

Getting WooCommerce products into the tagger

WooCommerce ships a product exporter (Products, then Export) that writes a CSV with SKU, name, price, image and permalink. Import that file in the Idukki dashboard and map the columns once. Stores that already run a Google Shopping feed plugin can paste the feed URL instead and schedule a re-sync, which keeps prices honest when a sale starts.

Variable products are the one wrinkle. Tag the parent product only. If the shopper has not picked a variation in the gallery, the product page opens. WooCommerce handles the choice there as it always does.

Add to cart and measurement on Woo, honestly

The widget spots WooCommerce from the settings WooCommerce puts on the page. It then adds to cart through the WooCommerce Store API. If the Store API is off, it uses the classic AJAX add. If an add fails, the gallery opens the product page. Some optimisation plugins strip those page settings. Then the widget cannot tell it is on WooCommerce, and product buttons open the product page. The early-access Idukki plugin names the platform on the gallery. Then detection needs none of them.

Measurement follows the same shape as the BigCommerce guide. Impressions, post clicks, product clicks and add-to-cart intent are tracked on every platform. Attributing an order to a post needs the platform's order webhook. WooCommerce has one, and each order is matched to posts on arrival. The early-access Idukki plugin saves the gallery visitor id on each order for an exact match. Without it, a match comes from a salted ip and browser fingerprint. Those matches are marked estimated.

The plugin you should remove

Most WordPress stores that come to us already have a social-feed plugin. The typical one injects its own copy of jQuery, loads every image at full size, and fetches the feed on the client on every page view. Replacing it with a single deferred loader is usually the largest Largest Contentful Paint improvement available on the site, before any UGC benefit is counted. Measure before and after with PageSpeed Insights; the widget speed programme post shows what to look for.