product_tours 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/AGENTS.md +149 -0
- data/CHANGELOG.md +27 -1
- data/README.md +278 -123
- data/docs/screenshots/01-walkthrough.jpg +0 -0
- data/docs/screenshots/02-dashboard.jpg +0 -0
- data/docs/screenshots/03-mobile.jpg +0 -0
- data/docs/screenshots/04-editor.jpg +0 -0
- data/lib/product_tours/version.rb +1 -1
- data/lib/product_tours/widget.rb +5 -1
- metadata +8 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fab25758d2c1f8d2c5671555ddfcc04a1c473c60271635ec1e1c191bf9791718
|
|
4
|
+
data.tar.gz: 42217e9e5f0f89d25c5bebafb93ad3918e77933707d98cd4d3277f9cc0e3920e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3f2943f106b77da806858a18c719bd63311ad744b1fe08f637a747cf4f0f6dddb89d5399afe53d121acd6bb81da0b9db5cf560c5a307de39d45fe1440c6adc0f
|
|
7
|
+
data.tar.gz: 75b8e54316db23fecbe7ab4398993afd616893bd8d2bd75e3c4bf0b0c834b65e29f6a6d97ff0d2302736e3067fe2952509677def0bc2abb607a167f0b98e375c
|
data/AGENTS.md
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
# AGENTS.md
|
|
2
|
+
|
|
3
|
+
Instructions for coding agents. Two audiences:
|
|
4
|
+
|
|
5
|
+
- **[Installing product_tours into a Rails app](#installing-into-a-rails-app)** — you are working in a host app and were asked to add product tours, onboarding guides, or video tutorials.
|
|
6
|
+
- **[Working on the gem itself](#working-on-the-gem-itself)** — you are working in this repository.
|
|
7
|
+
|
|
8
|
+
Requirements: Ruby >= 3.2, Rails >= 7.1. Active Storage only for uploaded videos, Action Text only for rich descriptions — both optional and both degrade rather than raise.
|
|
9
|
+
|
|
10
|
+
If you are in a host app and this file is not in front of you, it ships inside the gem: `cat "$(bundle show product_tours)/AGENTS.md"`.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## Installing into a Rails app
|
|
15
|
+
|
|
16
|
+
### 1. Install
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
bundle add product_tours
|
|
20
|
+
bin/rails generate product_tours:install
|
|
21
|
+
bin/rails db:migrate
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
The generator writes `config/initializers/product_tours.rb`, one migration (`product_tours_posts`), and `mount_product_tours at: "/product_tours"` into `config/routes.rb`. **In development the migration also inserts working demo tutorials**, so the modal has something to open before anyone has written content. Read the initializer it wrote — it is the source of truth over any summary of it, including this file.
|
|
25
|
+
|
|
26
|
+
### 2. Wire the three things the generator cannot
|
|
27
|
+
|
|
28
|
+
**a. The widget tag**, once, in the layout:
|
|
29
|
+
|
|
30
|
+
```erb
|
|
31
|
+
<%# app/views/layouts/application.html.erb, before </body> %>
|
|
32
|
+
<%= product_tours_tag %>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
The helper is injected into ActionView by the engine — no include, no import, no asset pipeline entry.
|
|
36
|
+
|
|
37
|
+
**b. A trigger**, wherever the tutorial is useful. This is the part that makes it different from a SaaS tour builder: nothing auto-attaches to DOM nodes, you put the button where it belongs.
|
|
38
|
+
|
|
39
|
+
```erb
|
|
40
|
+
<button data-product-tour="billing_setup">Watch the billing guide</button>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
The value is a tutorial **key**, and the key must exist and be **published** or the trigger does nothing.
|
|
44
|
+
|
|
45
|
+
**c. `authorize_admin` — do this before deploying.** The dashboard at `/product_tours` defaults to **development only**. It fails closed, so shipping without this is not an open dashboard — it is a 403 reading "Forbidden. Set ProductTours.config.authorize_admin to grant access."
|
|
46
|
+
|
|
47
|
+
```ruby
|
|
48
|
+
config.authorize_admin = ->(request) { request.env["warden"]&.user&.admin? }
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
> **`enabled` and `authorize_admin` receive the raw `request`, not a controller.** Writing `->(request) { current_user }` is the most common mistake here — that method does not exist in this scope. Resolve the user *from the request*: Warden env, a signed cookie, `Current.user` if middleware already set it.
|
|
52
|
+
|
|
53
|
+
```ruby
|
|
54
|
+
# Rails 8 built-in auth
|
|
55
|
+
config.authorize_admin = lambda do |request|
|
|
56
|
+
token = request.cookies["session_token"]
|
|
57
|
+
Session.find_signed(token)&.user&.admin? || false
|
|
58
|
+
end
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### 3. Verify
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
bin/rails routes | grep product_tours # engine mounted
|
|
65
|
+
bin/rails product_tours:seed_demo # refresh demo tutorials in every locale
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Then in the running app: open `/product_tours`, confirm the demo tutorials are listed, and click a `data-product-tour` button on one of your own pages.
|
|
69
|
+
|
|
70
|
+
### Tutorials are content, not code
|
|
71
|
+
|
|
72
|
+
A tutorial is a row in `product_tours_posts`, written and published in the mounted dashboard. **Do not create tutorials from host-app migrations, seeds, or fixtures** — that is not how this gem is meant to be used, and it puts editorial content in schema history. If the app needs sample content, `bin/rails product_tours:seed_demo` is the supported path.
|
|
73
|
+
|
|
74
|
+
What a tutorial carries: a `key`, a title, an optional rich description, an optional video, and at most one primary action (a URL, or the key of the next tutorial — that link is what makes a walkthrough). Keys must match `/\A[a-z0-9]+(?:[._-][a-z0-9]+)*\z/` — lowercase, digits, and `. _ -` as separators. `Billing Setup` and `billingSetup` are invalid; `billing_setup` and `billing.step-1` are fine. `status` is `draft` or `published`, and the key is unique **per locale**, which is how translations work: one row per language for the same key, with locale fallback at resolve time.
|
|
75
|
+
|
|
76
|
+
### Video providers
|
|
77
|
+
|
|
78
|
+
YouTube, Vimeo, Loom, Tella, Voomly, a direct MP4/WebM URL, or an uploaded file (needs Active Storage). Uploaded videos stream through the engine at `/product_tours/media/:id` — not a public blob URL. Do not build your own blob links.
|
|
79
|
+
|
|
80
|
+
**The engine edits the app's Content Security Policy.** It appends the providers' embed hosts to `frame-src` (or to `default-src` when `frame-src` is unset) in an initializer that runs after the host's own. That is deliberate — an embed silently blocked by CSP is a bad first five minutes — but know it happens, and do not hand-add those `frame-src` entries yourself. If the app sets its CSP somewhere unusual (a middleware, a per-controller override), that is where a blocked embed will come from.
|
|
81
|
+
|
|
82
|
+
### Lifecycle events
|
|
83
|
+
|
|
84
|
+
Subscribe in an initializer; there is no callback config to set.
|
|
85
|
+
|
|
86
|
+
```ruby
|
|
87
|
+
ActiveSupport::Notifications.subscribe("product_tours.completed") do |*, payload|
|
|
88
|
+
# payload has the tutorial key and request context
|
|
89
|
+
end
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Names: `product_tours.viewed`, `product_tours.dismissed`, `product_tours.completed`, and `product_tours.unresolved_trigger` — the last one fires when a `data-product-tour` button names a key that does not resolve. Subscribe to it in development; it turns "my button does nothing" into a log line naming the key.
|
|
93
|
+
|
|
94
|
+
### Do not
|
|
95
|
+
|
|
96
|
+
- **Do not copy the widget JavaScript into `app/javascript`, or add a `<script>` tag for it.** `product_tours_tag` renders what is needed and the engine serves the code. There is no build step and nothing for esbuild/importmap/Tailwind to know about.
|
|
97
|
+
- **Do not create or edit tutorials in code** (see above).
|
|
98
|
+
- **Do not add provider hosts to `frame-src` by hand** — the engine already does it.
|
|
99
|
+
- **Do not serve uploaded videos by blob URL** — the gated media route exists so a leaked signed URL cannot hand over your content.
|
|
100
|
+
- **Do not install Active Storage or Action Text "to make it work"** unless the app actually wants uploads or rich text. Both are optional; the gem checks for them (`Post.video_upload_supported?`, `Post.description_supported?`) and simply offers less.
|
|
101
|
+
|
|
102
|
+
### Configuration
|
|
103
|
+
|
|
104
|
+
There are five options. That is the whole surface.
|
|
105
|
+
|
|
106
|
+
| Option | Default | What it does |
|
|
107
|
+
| --- | --- | --- |
|
|
108
|
+
| `authorize_admin` | development only | **Who can read and edit tutorials. Set before deploying.** |
|
|
109
|
+
| `enabled` | everyone | Per-request gate for the widget and its endpoints |
|
|
110
|
+
| `admin_layout` | `product_tours/application` | Render the dashboard inside your admin shell |
|
|
111
|
+
| `mount_path` | `"/product_tours"` | Keep in sync with `mount_product_tours at:` |
|
|
112
|
+
| `storage_service` | app default | Active Storage service for uploaded video (a `storage.yml` key) |
|
|
113
|
+
|
|
114
|
+
26 locales ship with the gem, RTL included.
|
|
115
|
+
|
|
116
|
+
### Common failure modes
|
|
117
|
+
|
|
118
|
+
| Symptom | Cause |
|
|
119
|
+
| --- | --- |
|
|
120
|
+
| The trigger button does nothing | No tutorial with that key, or it is still a draft, or `product_tours_tag` is missing from the layout. Subscribe to `product_tours.unresolved_trigger` to see which |
|
|
121
|
+
| `/product_tours` returns 403 "Set ProductTours.config.authorize_admin to grant access" | Exactly what it says: still at the development-only default |
|
|
122
|
+
| Key rejected on save | It must match `/\A[a-z0-9]+(?:[._-][a-z0-9]+)*\z/` — no capitals, no spaces |
|
|
123
|
+
| Video area blank for an embed | CSP. The engine appends provider hosts to `frame-src`; a policy set outside `config.content_security_policy` will not have them |
|
|
124
|
+
| No upload option on the form | Active Storage not installed |
|
|
125
|
+
| No rich-text editor for the description | Action Text not installed |
|
|
126
|
+
| Duplicate-key error when adding a translation | The key is unique per locale — add the translation from the tutorial page rather than creating a second record by hand |
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## Working on the gem itself
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
bundle exec rake test # minitest, dummy app under test/dummy
|
|
134
|
+
bundle exec rubocop # must be clean
|
|
135
|
+
BUNDLE_GEMFILE=gemfiles/rails_7.1.gemfile bundle exec rake test # 7.1, 7.2, 8.0, 8.1 in gemfiles/
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Layout: `app/` controllers, `Post`, dashboard views · `lib/product_tours/` config, widget JS, seeds, engine, CSP patch · `lib/generators/product_tours/install/` the one generator · `config/locales/` 26 locales · `test/` minitest with `test/dummy` as the host app.
|
|
139
|
+
|
|
140
|
+
Conventions this codebase holds to — follow them rather than the first thing that works:
|
|
141
|
+
|
|
142
|
+
- **Optional dependencies are checked, never assumed.** `has_rich_text` is declared only `if respond_to?`, `has_one_attached` only `if defined?(::ActiveStorage)`, and the model exposes `description_supported?` / `video_upload_supported?` so views can offer less instead of raising. An app with neither gem must boot and work.
|
|
143
|
+
- **Triggers are explicit.** The gem never guesses at DOM nodes or auto-starts a tour; a host puts `data-product-tour="key"` where it wants it. A trigger naming a key that does not resolve is instrumented, not silently swallowed.
|
|
144
|
+
- **The widget is plain JS served by the engine** — no build step, no framework, no CDN.
|
|
145
|
+
- **Uploaded media streams through the engine's gate**, never a public blob URL.
|
|
146
|
+
- **The CSP patch is additive.** It appends to existing sources and drops `'none'` rather than replacing a host's policy — do not let it start overwriting directives.
|
|
147
|
+
- **The dummy app pins `config.active_job.queue_adapter = :test`.** Do not remove it or let it drift back to the `:async` default. Attaching a video enqueues Active Storage's analysis job, and `:async` runs it on a background thread that checks out its own connection — writes no test transaction covers, landing in the middle of whatever runs next. That is a suite that fails order-dependently in a test which never created a row, and it is miserable to trace back.
|
|
148
|
+
- Every user-facing change bumps `lib/product_tours/version.rb` and adds a `CHANGELOG.md` entry (Keep a Changelog format) that says what it costs, not only what it adds.
|
|
149
|
+
- Commit messages are prose that explains the tradeoff — read `git log` before writing one.
|
data/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
2
2
|
|
|
3
3
|
## [Unreleased]
|
|
4
4
|
|
|
5
|
+
## [0.1.2] - 2026-08-04
|
|
6
|
+
|
|
7
|
+
- Added `AGENTS.md`: install and integration instructions written for coding
|
|
8
|
+
agents — that tutorials are content managed in the dashboard rather than
|
|
9
|
+
created from migrations, the key format, the request-shaped config lambdas,
|
|
10
|
+
that the engine appends provider hosts to the app's `frame-src`, and the
|
|
11
|
+
`product_tours.unresolved_trigger` notification that turns "my button does
|
|
12
|
+
nothing" into a log line. It ships inside the gem, so
|
|
13
|
+
`cat "$(bundle show product_tours)/AGENTS.md"` works from a host app.
|
|
14
|
+
- The dummy app pins `queue_adapter = :test` for the test suite. Attaching a
|
|
15
|
+
video enqueues Active Storage's analysis job, and the default `:async` adapter
|
|
16
|
+
runs it on a background thread with its own database connection — writes no
|
|
17
|
+
test transaction covers, which is how a suite starts failing order-dependently
|
|
18
|
+
in a test that never created a row. No effect on the gem itself.
|
|
19
|
+
|
|
20
|
+
## [0.1.1] - 2026-08-04
|
|
21
|
+
|
|
22
|
+
- Reworked the README into an installation-first, skimmable product guide that
|
|
23
|
+
accurately documents walkthroughs, video providers, translations, demo data,
|
|
24
|
+
configuration, lifecycle events, security, and intentional non-goals.
|
|
25
|
+
- Replaced the implementation-era PRD with a concise contract for the shipped
|
|
26
|
+
product boundary and current behavior.
|
|
27
|
+
- Added real desktop dashboard, editor, walkthrough, and mobile screenshots from
|
|
28
|
+
the seeded dummy application.
|
|
29
|
+
|
|
5
30
|
## [0.1.0] - 2026-08-03
|
|
6
31
|
|
|
7
32
|
- Initial Rails engine, post dashboard, modal widget, video providers,
|
|
@@ -37,5 +62,6 @@
|
|
|
37
62
|
- Removed generic tutorial duplication now that translations provide the only
|
|
38
63
|
intentional content-copying workflow.
|
|
39
64
|
|
|
40
|
-
[Unreleased]: https://github.com/yshmarov/product_tours/compare/v0.1.
|
|
65
|
+
[Unreleased]: https://github.com/yshmarov/product_tours/compare/v0.1.1...HEAD
|
|
66
|
+
[0.1.1]: https://github.com/yshmarov/product_tours/compare/v0.1.0...v0.1.1
|
|
41
67
|
[0.1.0]: https://github.com/yshmarov/product_tours/releases/tag/v0.1.0
|
data/README.md
CHANGED
|
@@ -1,126 +1,203 @@
|
|
|
1
1
|
# product_tours
|
|
2
2
|
|
|
3
|
+
[](https://rubygems.org/gems/product_tours)
|
|
4
|
+
[](https://rubygems.org/gems/product_tours)
|
|
3
5
|
[](https://github.com/yshmarov/product_tours/actions/workflows/ci.yml)
|
|
4
|
-
[](MIT-LICENSE)
|
|
7
|
+
[](https://github.com/yshmarov/product_tours/stargazers)
|
|
5
8
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
**Self-hosted product tours and video tutorials for Rails.** Publish one useful
|
|
10
|
+
guide, open it from any button in your app, or link several guides into a
|
|
11
|
+
Next/Back walkthrough. Your content, videos, translations, and lifecycle events
|
|
12
|
+
stay in your Rails application.
|
|
9
13
|
|
|
10
|
-
|
|
14
|
+
No SaaS account. No third-party script. No visual page builder trying to attach
|
|
15
|
+
a tooltip to a DOM node that changed last Tuesday.
|
|
16
|
+
|
|
17
|
+

|
|
11
18
|
|
|
12
19
|
## Install
|
|
13
20
|
|
|
14
21
|
```ruby
|
|
22
|
+
# Gemfile
|
|
15
23
|
gem "product_tours"
|
|
16
24
|
```
|
|
17
25
|
|
|
18
26
|
```bash
|
|
27
|
+
bundle install
|
|
19
28
|
bin/rails generate product_tours:install
|
|
20
29
|
bin/rails db:migrate
|
|
21
30
|
```
|
|
22
31
|
|
|
23
|
-
The migration automatically creates ready-to-use demo tutorials in development.
|
|
24
|
-
Production databases are never populated with demo content.
|
|
25
|
-
|
|
26
|
-
Add the widget before `</body>` in your application layout:
|
|
27
|
-
|
|
28
32
|
```erb
|
|
33
|
+
<%# app/views/layouts/application.html.erb, before </body> %>
|
|
29
34
|
<%= product_tours_tag %>
|
|
30
35
|
```
|
|
31
36
|
|
|
32
|
-
|
|
37
|
+
Put a trigger wherever the tutorial is useful:
|
|
33
38
|
|
|
34
39
|
```erb
|
|
35
|
-
<button
|
|
36
|
-
Watch setup guide
|
|
37
|
-
</button>
|
|
40
|
+
<button data-product-tour="billing_setup">Watch the billing guide</button>
|
|
38
41
|
```
|
|
39
42
|
|
|
40
|
-
Create and publish `billing_setup`
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
and
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
43
|
+
That's it. Create and publish `billing_setup` at `/product_tours`, then click
|
|
44
|
+
your button.
|
|
45
|
+
|
|
46
|
+
The generator writes the initializer and migration, mounts the engine, and
|
|
47
|
+
prints copy-ready demo buttons. In development, the migration also creates a
|
|
48
|
+
small set of working tutorials so you can try the modal immediately.
|
|
49
|
+
|
|
50
|
+
> [!IMPORTANT]
|
|
51
|
+
> The dashboard defaults to **development only**. Set `authorize_admin` before
|
|
52
|
+
> deploying it — see [Configure](#configure).
|
|
53
|
+
|
|
54
|
+
Ruby >= 3.2 · Rails >= 7.1 · Active Storage only for uploaded videos · Action
|
|
55
|
+
Text only for rich descriptions.
|
|
56
|
+
|
|
57
|
+
Installing with a coding agent? Point it at [AGENTS.md](AGENTS.md) — the same
|
|
58
|
+
steps in the order an agent needs them, plus the gates it tends to get wrong and
|
|
59
|
+
the things it should not do. It ships inside the gem, so
|
|
60
|
+
`cat "$(bundle show product_tours)/AGENTS.md"` works from any app that bundles it.
|
|
61
|
+
|
|
62
|
+
## What you get
|
|
63
|
+
|
|
64
|
+
| | |
|
|
65
|
+
| --- | --- |
|
|
66
|
+
| **Tutorials** | Title, optional rich description, optional video, one clear primary action |
|
|
67
|
+
| **Walkthroughs** | Link any tutorial to another. Next opens it in place; Back uses modal history |
|
|
68
|
+
| **Video** | YouTube, Vimeo, Loom, Tella, Voomly, direct MP4/WebM, or an upload |
|
|
69
|
+
| **Dashboard** | Published/draft tabs, key search, live preview, explicit publish controls |
|
|
70
|
+
| **Translations** | One record per language, created from the tutorial page, with locale fallback |
|
|
71
|
+
| **Demo data** | Provider examples, a complete multi-step walkthrough, draft and missing-key cases |
|
|
72
|
+
| **Events** | `viewed`, `dismissed`, `completed` through `ActiveSupport::Notifications` |
|
|
73
|
+
| **Deps** | Rails only. Plain JS — no Tailwind, Stimulus, importmap, npm, CDN, or build step |
|
|
74
|
+
| **Auth** | Lambdas over the raw request — Devise, Rails 8 auth, anything |
|
|
75
|
+
| **i18n** | 26 bundled languages, including RTL |
|
|
76
|
+
| **Turbo/CSP** | Turbo Drive, nonce-based CSP, and supported iframe origins out of the box |
|
|
77
|
+
|
|
78
|
+
## The whole flow
|
|
79
|
+
|
|
80
|
+
1. A developer places `data-product-tour="some_key"` where help belongs.
|
|
81
|
+
2. An admin creates that key, adds text/video, chooses Draft or Published, and
|
|
82
|
+
decides what the main button does.
|
|
83
|
+
3. A visitor clicks the host app's button. The gem resolves the current locale,
|
|
84
|
+
opens its own modal, and emits `product_tours.viewed`.
|
|
85
|
+
4. The main action closes, opens an app page, or continues to another tutorial.
|
|
86
|
+
Linked tutorials stay in the same modal and get a Back button automatically.
|
|
87
|
+
|
|
88
|
+
| Product-tour dashboard | Tutorial editor |
|
|
89
|
+
| --- | --- |
|
|
90
|
+
|  |  |
|
|
91
|
+
| The default language is the canonical list. Preview, publish, translate, or edit without a deploy. | Paste a supported URL and the preview appears immediately. Choose URL or upload, then one action. |
|
|
92
|
+
|
|
93
|
+
<img src="docs/screenshots/03-mobile.jpg" alt="The product tutorial modal filling a mobile viewport with a video and primary action" width="390">
|
|
94
|
+
|
|
95
|
+
On screens up to 480px the modal becomes a full-screen sheet, respects safe
|
|
96
|
+
areas, and follows `visualViewport` while the mobile keyboard is open.
|
|
97
|
+
|
|
98
|
+
## Why a gem
|
|
99
|
+
|
|
100
|
+
| | `product_tours` | Hosted tour SaaS |
|
|
101
|
+
| --- | --- | --- |
|
|
102
|
+
| Cost | Free, MIT | Monthly, usually tied to MAU |
|
|
103
|
+
| Where content lives | Your database | The vendor's |
|
|
104
|
+
| Trigger placement | Your Rails views and product logic | A remote visual builder |
|
|
105
|
+
| Videos | Your URLs or Active Storage | Their upload/storage rules |
|
|
106
|
+
| User/account data | Not collected by the gem | Usually synced for targeting |
|
|
107
|
+
| Analytics | Events for the tool you already use | Another dashboard |
|
|
108
|
+
| Frontend | One same-origin plain-JS file | Third-party script and network calls |
|
|
109
|
+
| If you remove it | Delete the helper and mount | Untangle remote campaigns and targeting |
|
|
110
|
+
|
|
111
|
+
This is intentionally the reliable half of product tours: self-contained
|
|
112
|
+
guidance modals, not DOM-anchored tooltip choreography.
|
|
113
|
+
|
|
114
|
+
## Build a walkthrough
|
|
115
|
+
|
|
116
|
+
Every tutorial has one primary action:
|
|
117
|
+
|
|
118
|
+
| Choice | What visitors get |
|
|
119
|
+
| --- | --- |
|
|
120
|
+
| **Finish and close** | Emits `completed` and closes the modal |
|
|
121
|
+
| **Continue to another tutorial** | Opens that key in the same modal and adds Back history |
|
|
122
|
+
| **Open a page** | Emits `completed`, then follows a relative path or HTTP(S) URL |
|
|
123
|
+
|
|
124
|
+
Select **Continue to another tutorial** in the editor and pick a tutorial in the
|
|
125
|
+
same language. Draft targets are selectable while you assemble the walkthrough;
|
|
126
|
+
publish the complete chain before exposing its first trigger.
|
|
127
|
+
|
|
128
|
+
There is deliberately no Course, Tour, or Step model. Tutorials remain
|
|
129
|
+
independently invokable. The modal remembers only the path the current visitor
|
|
130
|
+
took, so opening a middle tutorial directly never shows a misleading Back
|
|
131
|
+
button.
|
|
132
|
+
|
|
133
|
+
## Video
|
|
134
|
+
|
|
135
|
+
Paste any supported HTTPS URL:
|
|
136
|
+
|
|
137
|
+
| Provider | Accepted examples |
|
|
138
|
+
| --- | --- |
|
|
139
|
+
| YouTube | `youtube.com/watch`, Shorts, Live, embed, `youtu.be` |
|
|
140
|
+
| Vimeo | Public and unlisted links; privacy hashes are preserved |
|
|
141
|
+
| Loom | Share and embed links |
|
|
142
|
+
| Tella | Video links |
|
|
143
|
+
| Voomly | Share, video, and embed links |
|
|
144
|
+
| Direct | URLs ending in `.mp4` or `.webm` |
|
|
145
|
+
|
|
146
|
+
YouTube, Vimeo, and Loom metadata comes from their oEmbed endpoints. Metadata is
|
|
147
|
+
best-effort: a timeout never prevents you from saving a valid URL. YouTube uses
|
|
148
|
+
`youtube-nocookie.com`; unsupported hosts and lookalike URLs fail closed.
|
|
149
|
+
|
|
150
|
+
Direct videos seek to an early frame for a useful preview instead of showing an
|
|
151
|
+
empty player.
|
|
152
|
+
|
|
153
|
+
<details>
|
|
154
|
+
<summary><b>Upload videos or add rich descriptions</b></summary>
|
|
155
|
+
|
|
156
|
+
Both are optional Rails features:
|
|
59
157
|
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
158
|
+
```bash
|
|
159
|
+
bin/rails active_storage:install
|
|
160
|
+
bin/rails action_text:install
|
|
161
|
+
bin/rails db:migrate
|
|
65
162
|
```
|
|
66
163
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
## Tutorials
|
|
72
|
-
|
|
73
|
-
A tutorial is stored internally as a `ProductTours::Post`. It has a title, key,
|
|
74
|
-
locale, `draft`/`published` status,
|
|
75
|
-
optional video, optional rich description, and one primary action. Video URLs
|
|
76
|
-
support YouTube, Vimeo, Loom, Tella, Voomly, and direct MP4/WebM files.
|
|
77
|
-
|
|
78
|
-
The dashboard previews a pasted video URL immediately. YouTube, Vimeo, and Loom
|
|
79
|
-
metadata is fetched through oEmbed; the other supported providers still get a
|
|
80
|
-
safe resolved preview. Direct videos seek to an early frame so they do not look
|
|
81
|
-
like an empty player before playback.
|
|
164
|
+
Once the tables exist, the editor offers **Use a video link / Upload a video**
|
|
165
|
+
and a compact rich-text description editor. Uploaded videos are reached through
|
|
166
|
+
the engine's gated media route.
|
|
82
167
|
|
|
83
|
-
|
|
84
|
-
The New product tour button always creates that default-language record. Open a
|
|
85
|
-
tutorial to see its existing languages or add another available locale; each
|
|
86
|
-
translation remains an ordinary draft/published `Post` with the same key.
|
|
168
|
+
</details>
|
|
87
169
|
|
|
88
|
-
|
|
89
|
-
existing `frame-src` entries and automatically adds the supported embed origins.
|
|
90
|
-
For a direct video hosted on a custom origin, the host remains responsible for
|
|
91
|
-
allowing that origin in `media-src` (or can allow HTTPS media generally).
|
|
170
|
+
## Translations
|
|
92
171
|
|
|
93
|
-
|
|
172
|
+
The dashboard sidebar shows only `I18n.default_locale`. Open a tutorial to see
|
|
173
|
+
every existing language and add another from `I18n.available_locales`.
|
|
94
174
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
175
|
+
- New product tours always start in the default locale.
|
|
176
|
+
- A translation copies the source into a new **draft** with the same key.
|
|
177
|
+
- The key and language become locked identity; translate, review, then publish.
|
|
178
|
+
- A trigger tries `I18n.locale`, then `I18n.default_locale` only when no current-
|
|
179
|
+
locale record exists.
|
|
180
|
+
- A draft translation does **not** silently fall back to published English. It
|
|
181
|
+
stays unavailable until you publish it.
|
|
99
182
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
directly never shows a misleading Back button.
|
|
183
|
+
This keeps one stable developer key while giving admins an obvious place to
|
|
184
|
+
manage every language.
|
|
103
185
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
```bash
|
|
107
|
-
bin/rails active_storage:install
|
|
108
|
-
bin/rails db:migrate
|
|
109
|
-
```
|
|
186
|
+
## Demo tutorials
|
|
110
187
|
|
|
111
|
-
|
|
188
|
+
Development installs seed the app's default locale automatically. Refresh the
|
|
189
|
+
full idempotent set in English, French, and Bulgarian whenever you like:
|
|
112
190
|
|
|
113
191
|
```bash
|
|
114
|
-
bin/rails
|
|
115
|
-
bin/rails db:migrate
|
|
192
|
+
bin/rails product_tours:seed_demo
|
|
116
193
|
```
|
|
117
194
|
|
|
118
|
-
The
|
|
119
|
-
|
|
120
|
-
|
|
195
|
+
The demo includes every video provider, a walkthrough through all of them, a
|
|
196
|
+
direct MP4, a normal URL action, an unpublished key, and an intentionally missing
|
|
197
|
+
key. Running the task again updates those records instead of duplicating them.
|
|
121
198
|
|
|
122
|
-
|
|
123
|
-
|
|
199
|
+
<details>
|
|
200
|
+
<summary><b>Copy-ready demo buttons</b></summary>
|
|
124
201
|
|
|
125
202
|
```erb
|
|
126
203
|
<div class="product-tours-demo">
|
|
@@ -138,48 +215,82 @@ prints into any ERB view to open every demo entry point immediately:
|
|
|
138
215
|
<%= product_tours_tag %>
|
|
139
216
|
```
|
|
140
217
|
|
|
141
|
-
|
|
142
|
-
YouTube, Vimeo, Loom, Tella, Voomly, and direct-video tutorials before its final
|
|
143
|
-
step. Every transition demonstrates the automatic Back button. The individual
|
|
144
|
-
provider buttons remain available so each video can also be opened directly.
|
|
145
|
-
The final two buttons deliberately exercise unresolved triggers: `demo_draft`
|
|
146
|
-
exists but remains unpublished, while `demo_missing_post` is never seeded.
|
|
147
|
-
|
|
148
|
-
Refresh the full idempotent demo set in English, French, and Bulgarian at any
|
|
149
|
-
time:
|
|
150
|
-
|
|
151
|
-
```bash
|
|
152
|
-
bin/rails product_tours:seed_demo
|
|
153
|
-
```
|
|
218
|
+
</details>
|
|
154
219
|
|
|
155
|
-
|
|
156
|
-
`demo_walkthrough_features`, `demo_walkthrough_finish`, and the unpublished
|
|
157
|
-
`demo_draft` in the default demo locales (`en`, `fr`, and `bg`). The missing-key
|
|
158
|
-
button intentionally has no matching record. Running the task again refreshes
|
|
159
|
-
the seeded records instead of duplicating them and prints the copy-ready block
|
|
160
|
-
again. To seed only one locale from application code, call
|
|
161
|
-
`ProductTours::Seeds.load!(locale: :fr)`.
|
|
220
|
+
## Configure
|
|
162
221
|
|
|
163
|
-
|
|
222
|
+
Everything is optional — a development install works with zero config. In
|
|
223
|
+
`config/initializers/product_tours.rb`:
|
|
164
224
|
|
|
165
|
-
|
|
225
|
+
| Option | Default | What it does |
|
|
226
|
+
| --- | --- | --- |
|
|
227
|
+
| `enabled` | everyone | Who can resolve and open published tutorials |
|
|
228
|
+
| `authorize_admin` | development only | **Who can manage content at the mount path** |
|
|
229
|
+
| `admin_layout` | gem layout | Render the dashboard inside your admin shell |
|
|
230
|
+
| `storage_service` | app default | Named Active Storage service for uploaded videos |
|
|
231
|
+
| `mount_path` | `/product_tours` | Keep in sync only when mounting the engine manually |
|
|
166
232
|
|
|
167
233
|
```ruby
|
|
168
234
|
ProductTours.configure do |config|
|
|
235
|
+
config.enabled = ->(request) { request.env["warden"]&.user.present? }
|
|
169
236
|
config.authorize_admin = ->(request) { request.env["warden"]&.user&.admin? }
|
|
237
|
+
config.admin_layout = "admin/application"
|
|
238
|
+
config.storage_service = :product_tours
|
|
170
239
|
end
|
|
171
240
|
```
|
|
172
241
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
242
|
+
Gates receive the **raw request**, so Devise, Rails 8 authentication, Flipper,
|
|
243
|
+
or your own session model all work without an adapter.
|
|
244
|
+
|
|
245
|
+
## Trigger it from your own UI
|
|
246
|
+
|
|
247
|
+
The gem ships no floating launcher. A trigger belongs in the navigation,
|
|
248
|
+
settings card, empty state, or success screen where it makes sense:
|
|
249
|
+
|
|
250
|
+
```erb
|
|
251
|
+
<a href="#" data-product-tour="invite_team">How team invitations work</a>
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
Keep `<%= product_tours_tag %>` in the layout when triggers appear across the
|
|
255
|
+
app. When `enabled` returns false, the helper renders nothing and the endpoints
|
|
256
|
+
also reject the request.
|
|
257
|
+
|
|
258
|
+
<details>
|
|
259
|
+
<summary><b>Open a tutorial after a redirect</b></summary>
|
|
260
|
+
|
|
261
|
+
The host owns timing. Rails flash plus a tiny Stimulus controller is enough:
|
|
262
|
+
|
|
263
|
+
```erb
|
|
264
|
+
<% if flash[:product_tour].present? %>
|
|
265
|
+
<button hidden
|
|
266
|
+
data-controller="product-tour-autoplay"
|
|
267
|
+
data-product-tour="<%= flash[:product_tour] %>"></button>
|
|
268
|
+
<% end %>
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
```js
|
|
272
|
+
// product_tour_autoplay_controller.js in your app
|
|
273
|
+
connect() {
|
|
274
|
+
this.element.click()
|
|
275
|
+
}
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
</details>
|
|
279
|
+
|
|
280
|
+
## Lifecycle events
|
|
176
281
|
|
|
177
|
-
|
|
282
|
+
The gem persists no analytics, user identity, cookies, progress, or completion
|
|
283
|
+
table. It emits three Rails notifications:
|
|
178
284
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
285
|
+
| Event | Meaning |
|
|
286
|
+
| --- | --- |
|
|
287
|
+
| `product_tours.viewed` | The modal became visible and focused |
|
|
288
|
+
| `product_tours.dismissed` | The visitor closed it before using the primary action |
|
|
289
|
+
| `product_tours.completed` | The visitor used the primary action |
|
|
290
|
+
|
|
291
|
+
Payload: `post_id`, `key`, `locale`, query-free `page_url`, and `source`.
|
|
292
|
+
|
|
293
|
+
Bridge them to Ahoy—or anything else—in your host app:
|
|
183
294
|
|
|
184
295
|
```ruby
|
|
185
296
|
ActiveSupport::Notifications.subscribe(/^product_tours\./) do |name, _start, _finish, _id, payload|
|
|
@@ -187,23 +298,67 @@ ActiveSupport::Notifications.subscribe(/^product_tours\./) do |name, _start, _fi
|
|
|
187
298
|
end
|
|
188
299
|
```
|
|
189
300
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
301
|
+
Your subscriber can attach `Current.user` or account context. That identity does
|
|
302
|
+
not need to become product-tour configuration.
|
|
303
|
+
|
|
304
|
+
## Broken triggers fail loudly, not publicly
|
|
305
|
+
|
|
306
|
+
`data-product-tour="key"` is a contract between code and dashboard content.
|
|
307
|
+
Invalid, missing, draft, or disabled keys open nothing for the visitor.
|
|
308
|
+
|
|
309
|
+
- Development/test: raises `ProductTours::UnresolvedTriggerError`.
|
|
310
|
+
- Production: reports through `Rails.error`, logs as a fallback, and emits
|
|
311
|
+
`product_tours.unresolved_trigger` with `invalid_key`, `missing`,
|
|
312
|
+
`unpublished`, or `disabled`.
|
|
193
313
|
|
|
194
|
-
|
|
314
|
+
No end user gets a Rails error page because somebody renamed a tutorial.
|
|
195
315
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
316
|
+
## Security
|
|
317
|
+
|
|
318
|
+
- Admin authorization runs server-side on every dashboard request.
|
|
319
|
+
- Public resolution returns only published tutorials allowed by `enabled`.
|
|
320
|
+
- Video providers are an HTTPS allowlist; unsupported URLs render no iframe.
|
|
321
|
+
- Action URLs accept relative app paths or HTTP(S), never script schemes.
|
|
322
|
+
- Widget/dashboard assets are same-origin and fingerprinted.
|
|
323
|
+
- Rails CSP nonces are preserved. Supported provider origins are merged into
|
|
324
|
+
`frame-src` without replacing the host policy.
|
|
325
|
+
- For direct videos on another origin, allow that origin in the host app's
|
|
326
|
+
`media-src` policy.
|
|
327
|
+
|
|
328
|
+
## What it doesn't do
|
|
329
|
+
|
|
330
|
+
No anchored tooltips, selector recorder, page-rule engine, automatic scheduler,
|
|
331
|
+
checklists, persisted progress, analytics dashboard, resource center, AI writer,
|
|
332
|
+
Segment/Mixpanel/Slack integration, or user/account sync.
|
|
333
|
+
|
|
334
|
+
The host app owns trigger timing and Help navigation. Ahoy or your analytics
|
|
335
|
+
stack owns persistence and reporting. The gem stays small enough to understand.
|
|
200
336
|
|
|
201
337
|
## Development
|
|
202
338
|
|
|
203
339
|
```bash
|
|
204
|
-
bundle install
|
|
205
340
|
bundle exec rake test
|
|
206
341
|
bundle exec rubocop
|
|
207
342
|
```
|
|
208
343
|
|
|
209
|
-
Rails 7.1
|
|
344
|
+
CI runs Rails 7.1 / 7.2 / 8.0 / 8.1 against Ruby 3.2 / 3.3 / 3.4.
|
|
345
|
+
|
|
346
|
+
Bug reports and pull requests are welcome. The most useful report is a real
|
|
347
|
+
Rails app and the exact point where installation or authoring felt confusing.
|
|
348
|
+
|
|
349
|
+
## Also by the same author
|
|
350
|
+
|
|
351
|
+
- [testimonials](https://github.com/yshmarov/testimonials) — testimonials,
|
|
352
|
+
video reviews, and NPS for Rails.
|
|
353
|
+
- [livechat](https://github.com/yshmarov/livechat) — in-app support messaging
|
|
354
|
+
for Rails.
|
|
355
|
+
- [ideasbugs](https://github.com/yshmarov/ideasbugs) — in-app bug reports and
|
|
356
|
+
feature requests.
|
|
357
|
+
- [i18n_proofreading](https://github.com/yshmarov/i18n_proofreading) — in-context
|
|
358
|
+
translation proofreading.
|
|
359
|
+
- [SupeRails](https://superails.com) — Rails screencasts.
|
|
360
|
+
|
|
361
|
+
## License
|
|
362
|
+
|
|
363
|
+
MIT. If it saved you a subscription, a
|
|
364
|
+
[⭐](https://github.com/yshmarov/product_tours) is a fair trade.
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
data/lib/product_tours/widget.rb
CHANGED
|
@@ -16,7 +16,11 @@ module ProductTours
|
|
|
16
16
|
def dashboard_stylesheet = @dashboard_stylesheet ||= File.read(DASHBOARD_STYLESHEET_SOURCE)
|
|
17
17
|
def fingerprint = @fingerprint ||= Digest::MD5.hexdigest(javascript)
|
|
18
18
|
def dashboard_fingerprint = @dashboard_fingerprint ||= Digest::MD5.hexdigest(dashboard_javascript)
|
|
19
|
-
|
|
19
|
+
|
|
20
|
+
# Not an endless def like its neighbours: the one-liner is 126 characters.
|
|
21
|
+
def dashboard_stylesheet_fingerprint
|
|
22
|
+
@dashboard_stylesheet_fingerprint ||= Digest::MD5.hexdigest(dashboard_stylesheet)
|
|
23
|
+
end
|
|
20
24
|
|
|
21
25
|
def snippet(locale:, nonce: nil)
|
|
22
26
|
nonce_attr = nonce ? %( nonce="#{ERB::Util.html_escape(nonce)}") : ''
|
metadata
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: product_tours
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Yaroslav Shmarov
|
|
8
|
-
autorequire:
|
|
9
8
|
bindir: bin
|
|
10
9
|
cert_chain: []
|
|
11
|
-
date:
|
|
10
|
+
date: 1980-01-02 00:00:00.000000000 Z
|
|
12
11
|
dependencies:
|
|
13
12
|
- !ruby/object:Gem::Dependency
|
|
14
13
|
name: rails
|
|
@@ -36,6 +35,7 @@ executables: []
|
|
|
36
35
|
extensions: []
|
|
37
36
|
extra_rdoc_files: []
|
|
38
37
|
files:
|
|
38
|
+
- AGENTS.md
|
|
39
39
|
- CHANGELOG.md
|
|
40
40
|
- MIT-LICENSE
|
|
41
41
|
- README.md
|
|
@@ -83,6 +83,10 @@ files:
|
|
|
83
83
|
- config/locales/product_tours.vi.yml
|
|
84
84
|
- config/locales/product_tours.zh-CN.yml
|
|
85
85
|
- config/routes.rb
|
|
86
|
+
- docs/screenshots/01-walkthrough.jpg
|
|
87
|
+
- docs/screenshots/02-dashboard.jpg
|
|
88
|
+
- docs/screenshots/03-mobile.jpg
|
|
89
|
+
- docs/screenshots/04-editor.jpg
|
|
86
90
|
- lib/generators/product_tours/install/install_generator.rb
|
|
87
91
|
- lib/generators/product_tours/install/templates/create_product_tours_posts.rb.tt
|
|
88
92
|
- lib/generators/product_tours/install/templates/initializer.rb
|
|
@@ -109,7 +113,6 @@ metadata:
|
|
|
109
113
|
changelog_uri: https://github.com/yshmarov/product_tours/blob/main/CHANGELOG.md
|
|
110
114
|
bug_tracker_uri: https://github.com/yshmarov/product_tours/issues
|
|
111
115
|
rubygems_mfa_required: 'true'
|
|
112
|
-
post_install_message:
|
|
113
116
|
rdoc_options: []
|
|
114
117
|
require_paths:
|
|
115
118
|
- lib
|
|
@@ -124,8 +127,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
124
127
|
- !ruby/object:Gem::Version
|
|
125
128
|
version: '0'
|
|
126
129
|
requirements: []
|
|
127
|
-
rubygems_version: 3.
|
|
128
|
-
signing_key:
|
|
130
|
+
rubygems_version: 3.6.9
|
|
129
131
|
specification_version: 4
|
|
130
132
|
summary: Self-hosted product tours and video tutorials for Rails apps.
|
|
131
133
|
test_files: []
|