Title: Saito Navi
Author: Troteseil Lucas
Published: <strong>September 7, 2026</strong>
Last modified: September 7, 2026

---

Search plugins

![](https://ps.w.org/saito-navi/assets/banner-772x250.png?rev=3684502)

![](https://ps.w.org/saito-navi/assets/icon-256x256.png?rev=3684502)

# Saito Navi

 By [Troteseil Lucas](https://profiles.wordpress.org/lucastsl/)

[Download](https://downloads.wordpress.org/plugin/saito-navi.0.7.2.zip)

 * [Details](https://test.wordpress.org/plugins/saito-navi/#description)
 * [Reviews](https://test.wordpress.org/plugins/saito-navi/#reviews)
 *  [Installation](https://test.wordpress.org/plugins/saito-navi/#installation)
 * [Development](https://test.wordpress.org/plugins/saito-navi/#developers)

 [Support](https://wordpress.org/support/plugin/saito-navi/)

## Description

Saito Navi gathers several customer engagement modules for WooCommerce
 behind **
a single floating button** (gear icon, corner of the screen):

 * **Cookie consent** — GDPR banner, Google Consent Mode V2, preferences
    modal,
   logo auto-detected from the site identity if no URL is set.
 * **Accessibility** — language switcher (WPML-compatible, falls back to
    GTranslate
   if WPML is absent), text size, high contrast, enlarged cursor, underlined links.
 * **Sticky add-to-cart** — a panel that follows the visitor on the
    WooCommerce
   product page, works with simple and variable products, a keyboard-accessible 
   swatch selector, compatible with WCBoost Variation Swatches, and a custom CSS
   selector setting for themes not covered by the built-in fallback chain.
 * **Stories** — up to 4 video bubbles per product (YouTube or an
    uploaded MP4),
   a dedicated tab on the WooCommerce product page, a desktop panel with a pure-
   CSS phone mockup (no external image), and a mobile full-screen stories-style 
   view. Displayed by default after the product gallery, or wherever you like via
   the `[navi_stories]` shortcode.

Built from the ground up to welcome new modules without touching the
 core: each
module registers itself and talks to the central button through a generic event,
and no module knows about the others.

Everything is configurable from the Back Office (**Navi** menu): colors,
 corner
radius, button position, and for each module its own “Show on desktop” / “Show on
mobile” setting.

Sibling of [Navi for PrestaShop](https://github.com/Lucas-tsl/navi-prestashop)
 —
same name, same spirit (one hub rather than independent widgets), two separate implementations
adapted to each ecosystem.

#### External services and embedded content

 * **Google Consent Mode V2**: the Cookie consent module pushes the
    visitor’s choices
   into `window.dataLayer` (the standard Google Tag Manager/gtag.js mechanism). 
   The plugin itself never sends any request to a Google server — the site must 
   already have gtag.js/GTM in place for this signal to be used.
 * **YouTube (“no-cookie” mode)**: the Stories module displays configured
    videos
   via `youtube-nocookie.com` in an iframe, only on product pages where a YouTube
   story has been configured by the site administrator. See the [YouTube privacy policy](https://policies.google.com/privacy).
 * **YouTube thumbnails**: when an administrator sets a YouTube story
    without a
   custom preview, the plugin makes a server-side `HEAD` request (3s timeout, no
   data sent beyond the request itself, no account or API key involved) to `img.
   youtube.com` to check whether the HD thumbnail (`maxresdefault.jpg`) exists for
   that video, falling back to a lower resolution (`hqdefault.jpg`) if it doesn’t—
   this avoids storing a broken image URL for videos (mostly YouTube Shorts) that
   only have the lower-resolution thumbnail. This request only happens when a product
   is saved with a YouTube story configured, never on a visitor’s page load.

## Screenshots

[⌊Navi > Navi, General tab: floating button position, plugin language,
appearance(
colors, corner radius).⌉⌊Navi > Navi, General tab: floating button position, plugin
language,
appearance (colors, corner radius).⌉[

Navi > Navi, General tab: floating button position, plugin language, appearance (
colors, corner radius).

[⌊Cookie consent tab: banner settings, with concrete Google Tag Manager /
Consent
Mode V2 setup instructions.⌉⌊Cookie consent tab: banner settings, with concrete 
Google Tag Manager /
Consent Mode V2 setup instructions.⌉[

Cookie consent tab: banner settings, with concrete Google Tag Manager / Consent 
Mode V2 setup instructions.

[⌊Accessibility tab: module activation and per-device visibility.⌉⌊Accessibility
tab: module activation and per-device visibility.⌉[

Accessibility tab: module activation and per-device visibility.

[⌊Sticky add-to-cart tab: module activation and custom CSS selectors for
themes 
not covered by the built-in fallback.⌉⌊Sticky add-to-cart tab: module activation
and custom CSS selectors for
themes not covered by the built-in fallback.⌉[

Sticky add-to-cart tab: module activation and custom CSS selectors for themes not
covered by the built-in fallback.

[⌊Stories tab, Bubbles: display options and a live bubble appearance
preview.⌉⌊Stories
tab, Bubbles: display options and a live bubble appearance
preview.⌉[

Stories tab, Bubbles: display options and a live bubble appearance preview.

[⌊Stories tab, Mockup: phone mockup colors with a live preview.⌉⌊Stories tab, Mockup:
phone mockup colors with a live preview.⌉[

Stories tab, Mockup: phone mockup colors with a live preview.

[⌊Stories tab on the WooCommerce product edit page: up to 4 configurable
video stories.⌉⌊
Stories tab on the WooCommerce product edit page: up to 4 configurable
video stories
.⌉[

Stories tab on the WooCommerce product edit page: up to 4 configurable video stories.

[⌊Sticky add-to-cart panel on a variable product page, swatch selector
(front-end).⌉⌊
Sticky add-to-cart panel on a variable product page, swatch selector
(front-end)
.⌉[

Sticky add-to-cart panel on a variable product page, swatch selector (front-end).

[⌊Accessibility panel: text size, contrast, cursor, underlined links
(front-end).⌉⌊
Accessibility panel: text size, contrast, cursor, underlined links
(front-end).⌉[

Accessibility panel: text size, contrast, cursor, underlined links (front-end).

[⌊Cookie preferences modal (GDPR, Google Consent Mode V2) on the visitor
side.⌉⌊
Cookie preferences modal (GDPR, Google Consent Mode V2) on the visitor
side.⌉[

Cookie preferences modal (GDPR, Google Consent Mode V2) on the visitor side.

[⌊Story video bubble and desktop panel (phone mockup) on the product
page.⌉⌊Story
video bubble and desktop panel (phone mockup) on the product
page.⌉[

Story video bubble and desktop panel (phone mockup) on the product page.

## Blocks

This plugin provides 1 block.

 *   Navi Stories

## Installation

 1. Upload the `saito-navi` folder to `/wp-content/plugins/`, or install directly from**
    Plugins > Add New**.
 2. Activate the plugin from the **Plugins** menu.
 3. WooCommerce must be installed and active (required for the Sticky add-to-cart and
    Stories modules; the Cookie consent and Accessibility modules work without it).
 4. Configure the modules from the new **Navi** menu in the Back Office.

## FAQ

### Is WooCommerce required?

The core and the Cookie consent / Accessibility modules work without
 WooCommerce.
The Sticky add-to-cart and Stories modules are tied to the WooCommerce product page
and therefore require it to be active — a notice is shown in the Back Office if 
WooCommerce is missing or inactive.

### Where are uploaded MP4 story videos stored?

Story preview videos are picked or uploaded through the standard
 WordPress Media
Library (the same picker used everywhere else in the admin), so they’re stored like
any other media file, never inside the plugin folder — the latter can be overwritten
on every plugin update, unlike the uploads folder.

### Does the Accessibility module’s language switcher work without WPML?

Yes: if it detects the GTranslate plugin installed, it falls back to it;
 otherwise
the language switcher simply doesn’t appear (the other accessibility settings remain
available).

### Does the sticky add-to-cart work with my theme?

A fallback chain of CSS selectors covers standard WooCommerce markup and
 the most
common themes. If your theme has an unusual structure, a “custom CSS selector” setting
per field (price, name, image) is available under Navi > Cart.

### Does the sticky add-to-cart work with block themes (Site Editor)?

Yes: WooCommerce’s default block-based Single Product template still
 renders the
classic variations form under the hood, which the sticky cart already detects. The
one exception is WooCommerce’s own experimental “Add to Cart + Options (Beta)” block(
fully JavaScript- driven, no classic form) — not supported while it remains in beta.

### Can I place the story bubbles as a block instead of a shortcode?

Yes: the “Navi Stories” block does the same thing as `[navi_stories]`,
 with a “
Product ID” field in the block settings.

### Can I control where the story bubbles are displayed?

By default they appear right after the product gallery. Use the
 [navi_stories] 
shortcode to place them anywhere else instead (post content, a page builder, or 
a theme template) — add id=”123″ to target a specific product, or leave it empty
to use the current product page. To avoid showing the bubbles twice, turn off “Afficher
automatiquement” under Navi > Stories if you use the shortcode exclusively.

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“Saito Navi” is open source software. The following people have contributed to this
plugin.

Contributors

 *   [ Troteseil Lucas ](https://profiles.wordpress.org/lucastsl/)

[Translate “Saito Navi” into your language.](https://translate.wordpress.org/projects/wp-plugins/saito-navi)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/saito-navi/), check
out the [SVN repository](https://plugins.svn.wordpress.org/saito-navi/), or subscribe
to the [development log](https://plugins.trac.wordpress.org/log/saito-navi/) by 
[RSS](https://plugins.trac.wordpress.org/log/saito-navi/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 0.7.2

 * Stories now integrates with the companion Navi FAQ plugin when it’s
    active: 
   both share a single “Navi” panel on the product edit screen (one internal tab
   per feature) instead of each adding its own separate entry under “Product data”.
   Without Navi FAQ, Stories keeps its own “Stories (Navi)” tab under “Product data”
   as before.

#### 0.7.1

 * WordPress.org review: replaced every inline `<script>`/`<style>` block
    with `
   wp_register_script()`/`wp_enqueue_script()`/`wp_localize_script()` and `wp_enqueue_style()`/`
   wp_add_inline_style()` (hash-preserving referer field, Google Consent Mode injection,
   admin dashboard tabs, Stories settings live preview, Stories product tab). No
   behavior change.
 * Documented the `wp_remote_head()` call to `img.youtube.com` (YouTube
    HD thumbnail
   availability check) in the “External services and embedded content” section.

#### 0.7.0

 * Story preview video is now picked directly from the WordPress Media
    Library (
   restricted to MP4 files) instead of a raw file upload field — no more dedicated
   upload folder to manage or clean up on uninstall.
 * Fixed: YouTube fallback thumbnail could stay broken for Shorts
    (vertical videos
   without a `maxresdefault.jpg`) — now falls back to hqdefault.jpg automatically.
 * Expanded PHPUnit test suite (Stories validation, Accessibility language
    fallback,
   module registry).

#### 0.6.0

 * “Navi Stories” block (Gutenberg), alongside the `[navi_stories]`
    shortcode.
 * Onboarding: one-time redirect to Navi > Navi after activation, “First
    steps”
   card on the General tab.
 * Verified compatibility with WooCommerce’s default block-based Single
    Product
   template (see FAQ).

#### 0.5.0

 * Shortcode `[navi_stories]`, configurable bubble appearance (solid or
    gradient
   border, size), WordPress.org submission readiness.

#### 0.4.0

 * New Stories module: product video bubbles (YouTube/MP4), desktop
    panel, mobile
   full-screen view, appearance settings under Navi > Stories.

#### 0.3.0

 * Appearance parity with Navi for PrestaShop: configurable corner
    radius, per-
   module visibility by device, plugin logo as the admin menu icon.

#### 0.2.0

 * Sticky add-to-cart module: simple and variable products, swatch
    selector, custom
   CSS selector settings.

#### 0.1.0

 * Initial release: core (3-state floating button), Cookie consent and
    Accessibility
   modules.

## Meta

 *  Version **0.7.2**
 *  Last updated **2 days ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 6.0 or higher **
 *  Tested up to **7.1**
 *  PHP version ** 7.4 or higher **
 *  Language
 * [English (US)](https://wordpress.org/plugins/saito-navi/)
 * Tags
 * [accessibility](https://test.wordpress.org/plugins/tags/accessibility/)[cookie consent](https://test.wordpress.org/plugins/tags/cookie-consent/)
   [sticky add to cart](https://test.wordpress.org/plugins/tags/sticky-add-to-cart/)
   [stories](https://test.wordpress.org/plugins/tags/stories/)[woocommerce](https://test.wordpress.org/plugins/tags/woocommerce/)
 *  [Advanced View](https://test.wordpress.org/plugins/saito-navi/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/saito-navi/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/saito-navi/reviews/)

## Contributors

 *   [ Troteseil Lucas ](https://profiles.wordpress.org/lucastsl/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/saito-navi/)