ID, '_proto_share_token', true); if (empty($token)) { $token = bin2hex(random_bytes(16)); } $player_url = home_url('/?proto_preview=1&project_id=' . $post->ID); ?>

Launch this project directly inside the full-screen InVision review player.

πŸš€ Open InVision Player β†—
Live Active
ID, '_proto_assigned_users', true); if (!is_array($assigned_users)) { $current_u = get_current_user_id(); $assigned_users = $current_u ? [$current_u] : [1]; } $notification_emails = get_post_meta($post->ID, '_proto_notification_emails', true); $enable_notifications = get_post_meta($post->ID, '_proto_enable_notifications', true); if ($enable_notifications === '') { $enable_notifications = '1'; } $client_name = get_post_meta($post->ID, '_proto_client_name', true); if (empty($client_name)) { $client_terms = wp_get_post_terms($post->ID, 'proto_client', ['fields' => 'names']); $client_name = !empty($client_terms) ? $client_terms[0] : ''; } $all_users = get_users(['orderby' => 'display_name', 'order' => 'ASC']); ?>

The client organization or company this prototype belongs to.

Sends instant, branded email alerts when someone leaves a review pin or replies.

ID, '_proto_user_project_roles', true) ?: []; ?> ID, $assigned_users); $current_role = $user_project_roles[$u->ID] ?? ($u->ID == 1 ? 'Designer' : ($u->user_email === 'rian@rian.ca' ? 'Project Manager' : (user_can($u->ID, 'manage_options') ? 'Designer' : 'Client Reviewer'))); ?>

No users found.

Add external client team members, emails, and their review role.

ID, '_proto_client_stakeholders', true); if (!is_array($client_stakeholders) || empty($client_stakeholders)) { $notification_emails_raw = get_post_meta($post->ID, '_proto_notification_emails', true); if (!empty($notification_emails_raw)) { $raw_list = explode(',', $notification_emails_raw); $client_stakeholders = []; foreach ($raw_list as $em) { $em_clean = trim($em); if (!empty($em_clean)) { $client_stakeholders[] = [ 'name' => ucwords(str_replace(['.', '_', '-'], ' ', explode('@', $em_clean)[0])), 'email' => $em_clean, 'role' => 'Client Reviewer' ]; } } } else { $client_stakeholders = []; } } ?>
ID, '_proto_screens', true); $plugin_url = PROTO_PREVIEW_PLUGIN_URL; if (!is_array($screens) || empty($screens)) { $screens = [ [ 'id' => 1, 'name' => 'Homepage', 'slug' => 'home', 'layouts' => [ [ 'id' => 1, 'version' => 'Option 1', 'name' => 'Homepage 1 (Modern SaaS)', 'file_path' => $plugin_url . 'layouts/saas-v1.html', 'badge' => 'Clean & High Conversion', 'color' => 'red', 'is_selected_choice' => 1 ], [ 'id' => 2, 'version' => 'Option 2', 'name' => 'Homepage 2 (Dark Cyber AI)', 'file_path' => $plugin_url . 'layouts/dark-v2.html', 'badge' => 'Dark Mode & High Tech', 'color' => 'cyan', 'is_selected_choice' => 0 ] ] ] ]; } ?>
InVision Workflow

How Prototype Presentations Work

1. Define user journey screens (e.g. Homepage, Pricing) βž” 2. Attach design options (Option A, Option B) with prototype HTML files βž” 3. Share client link for interactive playback, visual pin commenting, and 1-click option approval.

$screen) : $screen_name = $screen['name'] ?? 'Screen'; $screen_slug = $screen['slug'] ?? 'screen'; $layouts = $screen['layouts'] ?? []; ?>
πŸ“ SCREEN #
/
$layout) : $v_name = $layout['name'] ?? 'Variation'; $v_ver = $layout['version'] ?? ('Option ' . ($l_idx + 1)); $v_file = $layout['file_path'] ?? ''; $v_badge = $layout['badge'] ?? ''; $v_chosen = !empty($layout['is_selected_choice']); ?>
Option #
🌐 HTML Prototype
ID, '_proto_story_steps', true); $player_url = home_url('/?proto_preview=1&project_id=' . $post->ID . '&mode=story'); if (!is_array($steps) || empty($steps)) { $steps = [ [ 'title' => 'Welcome & High-Impact Value Proposition', 'content' => 'We kept the headline bold and concise above the fold so clients immediately understand the core service offerings within 3 seconds.', 'target_selector' => 'h1, .hero-title, header', 'action_type' => 'pulse_beacon', 'tip' => 'Notice the high-contrast typography hierarchy.' ], [ 'title' => 'Streamlined Primary Action', 'content' => 'Positioned this primary call-to-action with clear visual affordance to maximize direct user conversions without friction.', 'target_selector' => 'button, .cta-btn, .btn-primary', 'action_type' => 'virtual_hover', 'tip' => 'Try hovering over the button to see the micro-interaction.' ] ]; } ?>
Storytelling

Design Story & Client Walkthrough

Walk your client through the design step-by-step. Tell the story behind each section, decision, or feature. Clients can read your thoughts, view virtual hover/click interactions, and leave feedback.

πŸš€ Test Walkthrough in Player β†—
$step) : $title = $step['title'] ?? ''; $content = $step['content'] ?? ($step['description'] ?? ''); $target = $step['target_selector'] ?? ''; $action = $step['action_type'] ?? 'none'; $tip = $step['tip'] ?? ''; ?>
Step #

Enter CSS selector for HTML elements, or leave empty for a centered story card.

Subtle hint shown to the client on this step.

Drag steps using the handle to reorder the walkthrough narrative.

$r_val) { $clean_roles[(int)$u_id] = sanitize_text_field($r_val); } update_post_meta($post_id, '_proto_user_project_roles', $clean_roles); } // Save Client Stakeholders Repeater & sync Notification Emails if (isset($_POST['proto_client_stakeholders']) && is_array($_POST['proto_client_stakeholders'])) { $clean_stakeholders = []; $all_emails = []; foreach ($_POST['proto_client_stakeholders'] as $s_item) { if (!is_array($s_item)) continue; $em = sanitize_email($s_item['email'] ?? ''); $nm = sanitize_text_field($s_item['name'] ?? ''); $rl = sanitize_text_field($s_item['role'] ?? 'Client Reviewer'); if (!empty($em) || !empty($nm)) { $clean_stakeholders[] = [ 'name' => $nm ?: (!empty($em) ? explode('@', $em)[0] : 'Client Reviewer'), 'email' => $em, 'role' => $rl ]; if (!empty($em)) { $all_emails[] = $em; } } } update_post_meta($post_id, '_proto_client_stakeholders', $clean_stakeholders); update_post_meta($post_id, '_proto_notification_emails', implode(', ', array_unique($all_emails))); } else { update_post_meta($post_id, '_proto_client_stakeholders', []); update_post_meta($post_id, '_proto_notification_emails', ''); } // Save Email Notification Preference $enable_notifications = isset($_POST['proto_enable_notifications']) ? '1' : '0'; update_post_meta($post_id, '_proto_enable_notifications', $enable_notifications); // Save Screens & Variations if (isset($_POST['proto_screens']) && is_array($_POST['proto_screens'])) { $sanitized_screens = []; foreach ($_POST['proto_screens'] as $s_idx => $s_data) { $clean_layouts = []; if (isset($s_data['layouts']) && is_array($s_data['layouts'])) { $l_count = 0; foreach ($s_data['layouts'] as $l_idx => $l_data) { $clean_layouts[] = [ 'id' => ($l_count + 1), 'version' => sanitize_text_field($l_data['version'] ?? ('Option ' . ($l_count + 1))), 'name' => sanitize_text_field($l_data['name'] ?? 'Variation'), 'file_path' => esc_url_raw($l_data['file_path'] ?? ''), 'badge' => sanitize_text_field($l_data['badge'] ?? ''), 'color' => 'red', 'is_selected_choice' => ($l_count === 0) ? 1 : 0 ]; $l_count++; } } $sanitized_screens[] = [ 'id' => ($s_idx + 1), 'name' => sanitize_text_field($s_data['name'] ?? 'Screen'), 'slug' => sanitize_title($s_data['slug'] ?? 'screen'), 'nav_group' => sanitize_text_field($s_data['nav_group'] ?? 'primary'), 'parent_name' => sanitize_text_field($s_data['parent_name'] ?? ''), 'dev_url' => esc_url_raw($s_data['dev_url'] ?? ''), 'status' => sanitize_text_field($s_data['status'] ?? 'mockup'), 'layouts' => $clean_layouts ]; } update_post_meta($post_id, '_proto_screens', $sanitized_screens); } // Save Story Steps (and sync to custom DB table wp_pp_story_steps) if (isset($_POST['proto_story_steps']) && is_array($_POST['proto_story_steps'])) { global $wpdb; $sanitized_steps = []; $table_story_steps = $wpdb->prefix . 'pp_story_steps'; $has_table = ($wpdb->get_var("SHOW TABLES LIKE '$table_story_steps'") === $table_story_steps); // Optional cleanup existing for this project in DB table if ($has_table) { $wpdb->delete($table_story_steps, ['project_id' => $post_id]); } $order = 1; foreach ($_POST['proto_story_steps'] as $step_raw) { if (!is_array($step_raw)) continue; $title = sanitize_text_field($step_raw['title'] ?? ''); $content = wp_kses_post($step_raw['content'] ?? ''); if (empty($title) && empty($content)) continue; $target = sanitize_text_field($step_raw['target_selector'] ?? ''); $action = sanitize_text_field($step_raw['action_type'] ?? 'none'); $tip = sanitize_text_field($step_raw['tip'] ?? ''); $clean_step = [ 'id' => $order, 'step_order' => $order, 'title' => $title, 'content' => $content, 'description' => $content, 'target_selector' => $target, 'action_type' => $action, 'tip' => $tip ]; $sanitized_steps[] = $clean_step; if ($has_table) { $wpdb->insert($table_story_steps, [ 'project_id' => $post_id, 'page_id' => 1, 'layout_id' => 1, 'step_order' => $order, 'title' => $title, 'description' => $content, 'category' => 'story', 'target_type' => !empty($target) ? 'selector' : 'modal', 'target_selector' => $target, 'rect_data' => null, 'action_type' => $action, 'action_target' => '', 'requires_approval' => 0, 'author_id' => get_current_user_id() ?: 1, 'created_at' => current_time('mysql') ]); } $order++; } update_post_meta($post_id, '_proto_story_steps', $sanitized_steps); } } }