Get early access
Menu
Docs

Install Wayhint on WordPress

Pepper works on any WordPress theme because it reads the page the browser renders, not your theme files.

Coming soon The Wayhint plugin is not in the WordPress.org directory yet. It works today if you build the zip from the source repository; otherwise use a footer snippet (options B and C).

You need a site key, and your domain on its allowlist. See before you start. Replace YOUR-GUIDE-HOST and YOUR_SITE_KEY in the snippets.

  1. Option A: the Wayhint plugin

    Build the plugin zip from the source repository with npm run zip:wordpress (it writes dist/wayhint-wordpress.zip), then upload it under Plugins, Add New, Upload Plugin and activate it. In Settings, Wayhint, paste your site key, pick the character (3D or Lite) and list any paths to skip, such as /checkout/*. The plugin adds the tag in the footer, async, with the attributes optimisers respect.

  2. Option B: a header and footer code plugin

    If you already use a plugin that adds code to the site footer (WPCode, Insert Headers and Footers, or your theme's own setting), paste the script tag into its Footer box and save.

    html
    <script src="https://YOUR-GUIDE-HOST/widget/guide.js" data-site-key="YOUR_SITE_KEY" async></script>

  3. Option C: your child theme

    Add this to functions.php in a child theme, so a theme update does not remove it.

    functions.php
    add_action('wp_footer', function () {
  echo '<script src="https://YOUR-GUIDE-HOST/widget/guide.js" data-site-key="YOUR_SITE_KEY" async></script>';
});

  4. Clear caches and check

    If you use a caching or optimisation plugin, clear its cache. Some optimisers combine or delay scripts; exclude guide.js and character- (the 3D chunk the widget loads itself) from combining and delaying if Pepper does not appear or stays 2D.

The WordPress admin (/wp-admin) is not covered by wp_footer. The plugin has an option to load Pepper there too (never in the block editor).

With a Content Security Policy, allow the guide host in script-src: it serves both guide.js and the 3D chunk. See the CSP section of the install overview.

Check it works

Open the page. An Ask Pepper button appears in the bottom corner and Pepper waves. In the browser console, window.Wayhint should be defined. If nothing appears, check the console for [web-assistant] messages: an unknown site key or a domain missing from the allowlist are the usual causes.

Next