INTERACTIVE MOCKUP — Click "Next" to walk through the onboarding tour. This simulates what a new user would see on their first login.
👤
📰
📄
👥
💬
📷
🎬
💾
🌍

Gilder/Coigney International Theatre Forum

[Hero Image Slider]
Our mission is to engage international theatre women and their allies in networking and activism by facilitating conversation and artistic collaboration on a global basis.
Rosamond Gilder and Martha Coigney were each unique in their ability to create a means for theatre professionals to exchange information free of government pressures.

Implementation Notes (for Rian/Adi):

Approach — Two options:

Option A: Lightweight custom build (~2-3 hrs)
- Build with vanilla JS in child theme custom.js
- Target real DOM elements using CSS selectors (e.g., .bb-buddypanel, #header-messages-dropdown-elem)
- Store completion state in localStorage + user meta via AJAX
- No external dependencies

Option B: Use a library (~1-2 hrs)
- Shepherd.js (free, 12kb) — most popular tour library
- Intro.js (free for personal use, $9.99 commercial)
- Driver.js (free, MIT license, 5kb) — lightweight, modern
- All support: multi-step tours, spotlight cutouts, positioning, skip/next/back, callbacks

Recommendation: Driver.js — smallest footprint, MIT licensed (free), modern API, great spotlight cutout effect. Can integrate in ~1 hour.

Tour steps for production:
Step 0: Welcome modal (center, no target)
Step 1: Target .bb-buddypanel → sidebar navigation
Step 2: Target #navForums or .menu-item-forums → forums link
Step 3: Target #header-messages-dropdown-elem → messaging
Step 4: Target #header-notifications-dropdown-elem → notifications
Step 5: Target avatar/profile menu → edit profile CTA
Step 6: Target .menu-item-upload → share your work
Step 7: Finish → CTA to "Introduce Yourself" or "Getting Started" page

Trigger: Check user meta gcif_tour_completed on page load. If not set, auto-start tour. On "Skip" or "Finish", set the meta via wp_ajax.
Re-trigger: Add a "Take the tour again" link in the BuddyPanel or profile settings.