How to create an interactive product guide on WordPress without a developer

By Andrey Davydov · updated September 18, 2026

A help guide that shows instead of tells on WordPress: a checklist of how-to topics, each opening the right page and walking the user through it with tooltips.

Time: ● 30 minutes
Price: 14-day free trial, no card
Who does it: WordPress administrator

Example: an interactive guide on WordPress

A WordPress agency hands sites to clients who forget how to publish. On the /docs page a guide lists topics; “Publish a post” opens /wp-admin/post-new.php?tutorial=publish-post with a tour of the editor.

This format is part of the Pro plan. Every new account starts with a 14-day free trial with all formats and audience rules, no card required. When the trial ends nothing is deleted and published items keep showing; the Free plan keeps tours and tooltips free.

How to build the interactive guide on WordPress, step by step

Step 01
Copy your Clew snippet
Create a free account (or sign in), add your site and open Admin → Overview. Click the line in the “No signal from the widget yet.” card to copy it — it carries your real site key instead of the placeholder.
```

<script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" async></script>
```
Step 1 · schematic illustration
Step 02
Install a header code plugin
In Plugins → Add New install and activate the free WPCode plugin (or use your theme’s own “header scripts” option). Don’t edit header.php: theme updates overwrite it.
Step 2 · schematic illustration
Step 03
Paste the line into the Header box
Open Code Snippets → Header & Footer, paste the Clew line into Header and press Save Changes.
Step 3 · schematic illustration
Step 04
Purge the cache
If you use WP Rocket, LiteSpeed Cache, W3 Total Cache or a CDN, purge the cache. In “delay JavaScript” settings, exclude tryclew.io/widget.
Step 4 · schematic illustration
Step 05
Create the tours, then the guide checklist
First build one Step-by-step tooltips tour per topic with Edit on your site and Pick element, and note each tour’s Slug (used in links). Then create a Onboarding checklist: one item per topic, and in Link URL the page address plus ?tutorial= and the tour slug.
Step 5 · schematic illustration

Step 06

Choose where, when and for whom it shows

In the same editor, set Where to show (page URL), When to show, Audience targeting and Frequency. These are the settings of the example above:

Setting	Value
Checklist
Format	Onboarding checklist
Where to show (page URL)	Section by prefix `/docs`
When to show	Right on page load
Audience targeting	No rules — everyone who opens the page
Frequency	Every visit
Product tour
Format	Step-by-step tooltips
Where to show (page URL)	Section by prefix `/wp-admin/post-new.php`
When to show	Right on page load
Audience targeting	No rules — everyone who opens the page
Frequency	Once per visitor

Clew tour editor with the format, page URL rule, trigger and audience rule fields (interactive product guide on WordPress) — Step 6 · schematic illustration

Step 07
Publish and check it on the live site
Set Status to Published and save. Open the page in a private window — Clew remembers who has already seen a “once” item, so your usual browser may skip it. Views, completions and drop-offs appear in the tour stats.
Step 7 · schematic illustration

Pitfalls: interactive product guide on WordPress

“Delay JavaScript” hides the interactive product guide until interaction

WP Rocket, LiteSpeed and Perfmatters can postpone scripts until the first scroll or click. The widget then starts late and a Right on page load item looks broken. Add tryclew.io/widget to the exclusions.

Logged-in pages are often uncached — and different

Member areas (WooCommerce /my-account, LMS course pages) render other markup than what anonymous visitors see. Build steps while logged in as a typical member, not as an administrator with extra toolbars.

Keep query parameters intact

Some sites redirect and drop query strings (for example, forcing a trailing slash). Open each topic link once: if ?tutorial= disappears in the address bar, link to the final URL instead.

The help button needs a stable selector

On click on an element listens for clicks on the selector you enter. Use an id or a data-tour attribute on the help button, not a class that styling changes may rename.

Questions and answers

Does the tour run inside wp-admin?

Only if the line is also loaded in the admin area — add it with an admin-side snippet in WPCode.

Does it work on WordPress.com?

Plugins such as WPCode need a WordPress.com Business plan or higher. Self-hosted WordPress works on any hosting.

Will it show in wp-admin?

Header plugins usually add code to the public site only. For guides inside /wp-admin, add the line with an admin-side snippet (WPCode can target the admin area).

What does it cost?

Tours are free; the guide checklist is part of Pro. Every new account gets a 14-day trial with both, no card.

Can the same tour also run for new users automatically?

Yes. A tour opened with ?tutorial= ignores its rules, so the same tour can also have its own URL rule and Once per visitor for first-time visitors.

What else you can add on WordPress

Interactive guide on other platforms

Google Tag ManagerHow to create an interactive product guide via Google Tag Manager without a developer

How to create an interactive product guide on WordPress without a developer

Example: an interactive guide on WordPress

How to build the interactive guide on WordPress, step by step

Copy your Clew snippet

Install a header code plugin

Paste the line into the Header box

Purge the cache

Create the tours, then the guide checklist