PageSourceSearch

https://www.showroompro.ai/assets/help-center-Cn30oq8a.js

js showroompro.ai collected 2026-10-05 12:40:12 UTC 95,572 bytes, 1 lines download raw bytes

1import{c as m,G as C,ah as I,q as T,M as A,aS as z,r as p,j as e,B as w,X as y,a7 as P,av as v,ac as x,I as N,d as f}from"./index-Cnu55KII.js";import{A as j,a as M,b as D,c as L}from"./accordion-BHeFmiLn.js";import{I as k}from"./info-B6PI74_R.js";import{a as W,C as R}from"./credit-card-w_gP5SrZ.js";import{S as E}from"./share-2-CcaFPL1F.js";import{C as G}from"./circle-dot-B9LA6MQw.js";import{I as Y}from"./image-BbE0BlWt.js";import{C as B}from"./camera-D0sQdDbd.js";import{P as U}from"./palette-SqxJZB-e.js";import{M as H}from"./megaphone-CbZB7CmM.js";import{U as K}from"./users-mLasUYzk.js";import{D as F}from"./dollar-sign-CfLpqmi2.js";import{W as O,L as $}from"./webhook-BUBx8Bf1.js";import{S as Q}from"./search-CVVnnKFn.js";import"./index-CsRttFsQ.js";const V=m("Grid3x3",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M3 9h18",key:"1pudct"}],["path",{d:"M3 15h18",key:"5xshup"}],["path",{d:"M9 3v18",key:"fh3hqa"}],["path",{d:"M15 3v18",key:"14nvp0"}]]);const J=m("Lightbulb",[["path",{d:"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",key:"1gvzjb"}],["path",{d:"M9 18h6",key:"x1upvd"}],["path",{d:"M10 22h4",key:"ceow96"}]]);const X=m("Rocket",[["path",{d:"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",key:"m3kijz"}],["path",{d:"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z",key:"1fmvmk"}],["path",{d:"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0",key:"1f8sc4"}],["path",{d:"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5",key:"qeys4"}]]);const Z=m("SquareKanban",[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}],["path",{d:"M8 7v7",key:"1x2jlm"}],["path",{d:"M12 7v4",key:"xawao1"}],["path",{d:"M16 7v9",key:"1hp2iy"}]]),_=["Getting Started","Your Quiz","Managing Clients","AI Design","AI Content Studio","Marketing & Branding","Analytics & Team","Pricing & Quoting","Integrations"],g=[{id:"what-is-showroompro",group:"Getting Started",title:"What is ShowroomPro?",icon:k,description:"A quick overview of what ShowroomPro does, who it's for, and how the platform fits into your jewelry business.",blocks:[{type:"paragraph",text:"ShowroomPro is a B2B platform built for jewelry designers and studios. It gives your clients an AI-powered ring design experience — they answer a short quiz about their dream ring and receive a photorealistic AI visualization within seconds. You get a new lead in your pipeline, a record of exactly what they want, and a ready-made starting point for the conversation."},{type:"heading",text:"Who is it for?"},{type:"bullets",items:["Independent jewelry designers who take custom commissions","Bridal studios and engagement ring specialists","Multi-designer studios that want a shared client pipeline","Any jeweler who wants to capture leads online or in-store and cut down on back-and-forth with clients"]},{type:"heading",text:"How it works"},{type:"steps",items:["You share your branded quiz link — via your website, Instagram bio, email, or an in-store iPad.","A client opens the link, picks their preferences (stone, shape, setting, metal, budget), and submits.","ShowroomPro generates an AI ring visualization and emails it to both you and the client automatically.","The client appears in your Customer Pipeline. You open their card, review the design, request changes if needed, and send it for official approval when it's ready.","Once the client approves, the design moves to your Approved queue with a manufacturing status tracker."]},{type:"heading",text:"Core features at a glance"},{type:"bullets",items:["Branded quiz — your logo, brand color, and welcome message on every client interaction","AI ring visualization — photorealistic images generated from quiz answers in seconds","Customer Pipeline — a Kanban-style CRM to track every client from lead to completion","Design iterations — clients can request changes; each session includes 3 redesigns by default","Approval workflow — clients approve designs via a dedicated link; you are notified instantly","Automated emails — design delivery, follow-ups, and approval notifications sent automatically","AI Content Studio — generate marketing imagery, lifestyle photos, and catalog shots from ring designs","Analytics — conversion rates, preference breakdowns, and pipeline velocity (Growth plans)","Team members — invite staff to share the dashboard (Growth and Enterprise plans)"]},{type:"heading",text:"What ShowroomPro is not"},{type:"bullets",items:["It is not a CAD tool or manufacturing platform — it produces design visualizations and approval records, not production-ready files. CAD export is coming soon.","It is not a storefront or e-commerce checkout — there is no payment processing for the end customer. It is a lead capture and design approval tool.","It is not a client-facing account — clients do not create accounts. They interact via a quiz link and a design approval link, with no login required."]},{type:"tip",text:"The fastest way to understand the product is to paste your own quiz link into a browser tab and complete the quiz as if you were a client. The whole thing takes about 3 minutes and you will see exactly what your clients experience."}],faqs:[{question:"Do my clients need to create an account to use the quiz?",answer:"No. Clients open a link, complete the quiz, and receive their design by email — no account, no login, no app to install. The only credential in the system is your designer account."},{question:"Can I use ShowroomPro alongside my existing website and CRM?",answer:"Yes. The quiz can be embedded on any website via an iframe, or shared as a standalone link. Lead data can be pushed to an external CRM or email platform via the Klaviyo integration or Webhooks (Settings → Integrations). ShowroomPro is designed to complement your existing tools, not replace them."},{question:"Does ShowroomPro work for wedding bands as well as engagement rings?",answer:"Yes, with the Wedding Band module enabled. The module is off by default — contact support to activate it for your account. Once on, clients can choose between an engagement ring and a wedding band at the start of the quiz, and the Wedding Band flow covers men's and women's bands 
1with full customization options."},{question:"Is the AI-generated image shown to the client automatically?",answer:"The client receives the initial AI design by email as soon as it is generated. Any redesigns you request on their behalf are not sent automatically — you choose when to share an iteration by clicking 'Send for Approval' or by copying the iteration's share link."}]},{id:"getting-started",group:"Getting Started",title:"Getting Started",icon:X,description:"Everything you need to go from registration to your first AI ring design in under 10 minutes.",blocks:[{type:"steps",title:"Setting up your account",items:["Go to showroompro.ai and click Get Started. Enter your name, email, and a password to create your account.","Check your inbox for a verification email from ShowroomPro. Click the link to verify your address — the link expires after 24 hours.","Once verified, you land on the Activation Wizard. This is a short guided setup that walks you through the three things clients will see: your logo, your brand color, and your welcome message.","After the wizard, you arrive at your Designer Dashboard. Your quiz link is ready to share immediately — no further configuration required.","Try pasting your quiz link into a browser tab to see exactly what your clients will experience."]},{type:"heading",text:"Understanding your 7-day free trial"},{type:"paragraph",text:'Your trial starts the moment you register and lasts 7 days. During the trial you can share your quiz with real clients, receive submissions, and generate up to 5 AI ring visualizations. The trial counter ("X of 5 designs used") appears as a banner across the top of your dashboard so you always know where you stand.'},{type:"bullets",title:"What you can do during the trial",items:["Share your quiz link with unlimited clients","Receive quiz submissions in your Customer Pipeline","Generate up to 5 AI ring designs (trial cap)","Customize your branding (logo, color, welcome message)","Send manual emails to clients from their customer card","Explore all dashboard tabs and settings"]},{type:"tip",text:"Make the most of your 5 trial designs by sending the quiz to real clients rather than testing it yourself. Real submissions give you the most accurate preview of how ShowroomPro fits into your workflow."}],faqs:[{question:"Do I need a credit card to start a trial?",answer:"No. You can register and run your full 7-day trial without entering payment details. A credit card is only required when you choose to upgrade to a paid plan."},{question:"What happens when my trial ends?",answer:"Your account is paused — not deleted. All your customers, designs, and settings are preserved. You can upgrade at any time to immediately restore full access."},{question:"I didn't receive my verification email. What should I do?",answer:"Check your spam folder first. If it's not there, go to the login page and click 'Resend verification email'. Make sure to verify before your first session so your quiz link is fully active."},{question:"Can I change my email address after registering?",answer:"Email changes currently require a support request. Your display name and studio name can be updated in Settings → General at any time."}]},{id:"billing-subscription",group:"Getting Started",title:"Billing & Subscription",icon:W,description:"Understand your plan, manage your payment method, and learn what each tier unlocks.",blocks:[{type:"heading",text:"Viewing your current plan"},{type:"paragraph",text:"Go to Settings (gear icon, top-right of your dashboard) and click the Billing tab. Your current plan name, next renewal date, and usage counters are shown at the top. Below that you can manage your payment method and switch plans."},{type:"heading",text:"Plan comparison"},{type:"table",headers:["","Starter","Growth","Enterprise"],rows:[["AI ring designs per month","Unlimited","Unlimited","Unlimited"],["Customer Pipeline","✓","✓","✓"],["Basic email automations","✓","✓","✓"],["Email template customization","—","✓","✓"],["AI Content Studio","—","✓","✓"],["Analytics Dashboard","—","✓ (after 10 sessions)","✓"],["Team Members","—","Up to 3","Custom"],["'Powered by ShowroomPro' badge","Shown","Hidden","Hidden"],["Priority support","—","—","✓"]]},{type:"heading",text:"Upgrading your plan"},{type:"steps",items:["Open Settings → Billing.","Click Upgrade Plan to see the plan selector.","Choose Growth or Enterprise and select Monthly or Annual billing (annual plans include a discount).","Enter your payment details and confirm. Your new plan activates immediately."]},{type:"heading",text:"Cancelling your subscription"},{type:"paragraph",text:"You can cancel at any time from Settings → Billing. Cancellation takes effect at the end of your current billing period — you keep access until then. After the peri
1od ends, your account reverts to a paused state and no further charges are made."},{type:"note",text:"Cancelling does not delete your data. Customers, designs, and settings remain intact so you can reactivate at any time without losing anything."}],faqs:[{question:"What is included in the Content Studio generation limit?",answer:"Design Canvas, Lifestyle Studio, and Catalog Studio share a single Content Studio counter. Trial accounts get 5 free Content Studio generations total. Paid Growth plans get a monthly allowance — the current count is always shown in the banner at the top of the Content Studio pages."},{question:"Can I switch between monthly and annual billing?",answer:"Yes. Go to Settings → Billing and use the billing cycle toggle. Switching to annual takes effect at your next renewal date and immediately applies the discounted rate to your upcoming invoice."},{question:"What happens if my payment fails?",answer:"ShowroomPro will retry failed payments automatically over the next few days and send you an email each time. If payment cannot be collected after several attempts, your account is paused until you update your payment method."},{question:"Is there an Enterprise plan?",answer:"Yes. Enterprise is designed for larger studios that need custom team member limits, custom sender domains, dedicated onboarding, and priority support. Contact us through the in-dashboard feedback button or at [email protected] to discu
1ss pricing."}]},{id:"sharing-your-quiz",group:"Your Quiz",title:"Sharing Your Quiz",icon:E,description:"Your quiz link is the entry point for every client. Here is how to share it, embed it, and use it in-store.",blocks:[{type:"paragraph",text:"When a client opens your quiz link, they are taken to a branded experience that shows your logo, brand color, and welcome message. They work through the quiz at their own pace — typically 3–5 minutes — and on submission an AI ring design is generated and emailed to them (and to you)."},{type:"heading",text:"Finding and copying your quiz link"},{type:"steps",items:["Log in to your dashboard. Your quiz link appears in the blue banner near the top of the Customers tab.","Click the copy icon next to the link. The URL is now on your clipboard.","Paste it wherever you want to share it: an Instagram bio link, a text message, an email, your Linktree, or your website."]},{type:"heading",text:"Embedding the quiz on your website"},{type:"paragraph",text:"You can embed the quiz directly in any webpage using an iframe. Go to Settings → Embed. You will find two ready-made code snippets: one for Shopify (paste into a Custom HTML block) and one for any other website (paste into your page's HTML)."},{type:"tip",text:"Set the iframe height to at least 800px for the best client experience. On mobile, the quiz is fully responsive and works inside an iframe without any extra configuration."},{type:"heading",text:"Using Kiosk Mode for in-store iPads"},{type:"paragraph",text:"Kiosk Mode is a version of your quiz designed for a shared device on a display counter. Add ?kiosk=true to the end of your quiz URL. In Kiosk Mode, the back button and browser navigation are suppressed, and after a client submits their quiz the screen automatically resets for the next visitor."},{type:"bullets",title:"Example",items:["Normal link: https://showroompro.ai/design/abc123","Kiosk link: https://showroompro.ai/design/abc123?kiosk=true"]},{type:"heading",text:"Getting your QR code"},{type:"paragraph",text:"Navigate to Marketing Kit in your dashboard. A QR code that links directly to your quiz is generated automatically. Download it as a PNG and print it on business cards, display stands, or in-store signage."}],faqs:[{question:"Can I use my own domain for the quiz link?",answer:"Custom domains are on the roadmap for Enterprise plans. Currently all quiz links use the showroompro.ai domain with your unique token."},{question:"Can multiple clients use the quiz at the same time?",answer:"Yes. Each client who opens your link starts a completely independent session. Their responses are tracked separately and show up as individual cards in your Pipeline."},{question:"What happens if a client starts the quiz but doesn't finish?",answer:"Progress is saved as soon as the client completes the first step (entering their name and email). They appear in your Pipeline with a drop-off indicator showing how far they got. You can follow up using the Inbox messaging tools."},{question:"How do I change my quiz link? Can I reset it?",answer:"Your quiz token is permanent and tied to your account. You cannot reset it, but you can update the branding, welcome message, and color at any time without affecting the URL."}]},{id:"engagement-ring-quiz",group:"Your Quiz",title:"Engagement Ring Quiz",icon:C,description:"A guided, step-by-step experience that captures every detail a client needs to visualize their dream ring.",blocks:[{type:"heading",text:"What clients experience — step by step"},{type:"steps",items:["Welcome screen: Your logo, brand color, and custom welcome message are shown before the quiz begins.","Customer info: The client enters their first name, last name, email address, phone number (optional), and country.","Shopping for: If you have Wedding Bands enabled, the client chooses between 'Engagement Ring' or 'Wedding Band'. If disabled, this step is skipped.","Intent: The client selects their reason for visiting — 'Planning a proposal', 'Hoping to be proposed to', 'Designing together', or 'Just exploring'.","Inspiration photo (optional): The client can upload a photo of a ring they love. The AI analyses the photo and pre-fills their stone, setting, and metal preferences. They can also skip and start from scratch.","Stone type: The client selects from Natural Diamond, Lab-Grown Diamond, Moissanite, or a colored gemstone (Sapphire, Emerald, Ruby, Morganite, and more).","Stone shape: Options include Round, Princess, Cushion, Oval, Pear, Marquise, Emerald, Radiant, Elongated Cushion, Asscher, Old Mine Cut, European Cut, Heart, and more. Each option shows a visual card with an illustration.","Setting style: Solitaire, Halo, Double Halo, Three Stone, Vintage/Milgrain, Bezel, Half Bezel, Cathedral, Tulip, Toi et Moi, or East-West. Available options adapt to the chosen stone shape.","Metal type: Platinum, White Gold, Yellow Gold, Rose Gold, or Two-Tone. Gold and Two-Tone choices also ask for 10K, 14K, 18K, or Not Sure.","Band style: Plain, Twisted, Split Shank, Knife Edge, Half Pavé, Full Pavé, French Pavé, or Side Stones.","Finishing touches: Optional details including setting height (Low Profile, Standard, High, Stacking), prong style (Claw, Button, Double Claw, Talon), inside engraving, outside engraving, hidden halo, diamond prongs, and birthstones.","Ring size and budget: Ring size (US sizes 3–10 with half sizes), budget range (Under $1,000 to Over $50,000), and shopping timeline.","Review: A full summary of every selection before final submission.","Submission and design generation: The client clicks 'Generate My Design'. The AI creates a photorealistic visualization and emails it to both the client and 
1you."]},{type:"tip",text:"Send yourself through the quiz once using your own quiz link so you know exactly what clients see. Pay attention to how the inspiration photo step works — clients often find this the most engaging part."},{type:"heading",text:"Stone type options"},{type:"table",headers:["Category","Options"],rows:[["Classic","Natural Diamond, Lab-Grown Diamond, Moissanite"],["Colored Gemstones","Sapphire, Emerald, Ruby, Morganite, Aquamarine, Alexandrite, Tourmaline, Tanzanite, Opal"],["Fancy Diamonds","Yellow Diamond, Pink Diamond, Brown (Champagne) Diamond, Blue Diamond"]]},{type:"heading",text:"Budget ranges"},{type:"bullets",items:["Under $1,000","$1,000 – $2,500","$2,500 – $5,000","$5,000 – $10,000","$10,000 – $20,000","$20,000 – $50,000","Over $50,000","Not sure yet"]}],faqs:[{question:"How does the inspiration photo feature work?",answer:"The client uploads any photo — a screenshot from Instagram, a photo of a ring at a competitor store, or a picture from a magazine. The AI analyses the image and automatically selects the most likely stone shape, setting style, and metal. The client can review and adjust any pre-filled choice before continuing."},{question:"Can I make phone number mandatory?",answer:"Phone number is optional by default and this cannot be changed in the UI. Clients can leave it blank and still complete the quiz. Most designers find that making it optional results in more completions overall."},{question:"What if a client selects Toi et Moi as their setting — what happens?",answer:"Toi et Moi rings feature two stones. When this setting is selected, an extra step appears asking the client to choose a second stone shape. The AI then generates a design with two stones side by side."},{question:"Do clients need to create an account to use the quiz?",answer:"No. Clients do not need to register or log in. They just open your link and go. Their contact information is captured as part of the quiz itself."},{question:"Does the quiz work on mobile?",answer:"Yes. The quiz is fully mobile-responsive and works on any smartphone or tablet browser. No app download is required."}]},{id:"wedding-band-quiz",group:"Your Quiz",title:"Wedding Band Quiz",icon:G,description:"An optional module that lets clients design men's and women's wedding bands through the same quiz experience.",blocks:[{type:"note",text:"The Wedding Band module is disabled by default. Contact ShowroomPro support to enable it for your account. Once enabled it applies to all clients who use your quiz link."},{type:"heading",text:"How clients access the wedding band flow"},{type:"paragraph",text:"When the module is enabled, the 'Shopping for' step appears at the beginning of your quiz. The client chooses between 'Engagement Ring' and 'Wedding Band'. If they select 'Wedding Band' they are routed into the wedding band flow instead of the engagement ring flow."},{type:"heading",text:"Men's band flow — step by step"},{type:"steps",items:["Metal type: Platinum, White Gold, Yellow Gold, Rose Gold, Two-Tone, Tungsten, or Titanium.","Band width: 2mm, 3mm, 4mm, 5mm, 6mm, 7mm, or 8mm+.","Band profile: Flat, Comfort Fit, Half Round, Euro, or Beveled.","Edge detail: Plain, Milgrain, Stepped, Rope, or Beveled Edge.","Surface finish: High Polish, Matte/Satin, Hammered, or Rock Finish.","Stone inlay (optional): The client can choose to add stones. If yes, they select stone placement (Single Stone, Multi Stone, Channel, or Pavé), stone type, and stone shape.","Band fit: Standard or Comfort Fit.","Personalizations: Inside engraving, outside engraving, or birthstone inlay.","Final details: Ring size, special date (optional), and budget range."]},{type:"heading",text:"Women's band flow — step by step"},{type:"steps",items:["Metal type: Platinum, White Gold, Yellow Gold, Rose Gold, or Two-Tone.","Surface style: Plain band or Diamond band (this determines the rest of the flow).","Band shape: Straight, Curved, Chevron, or Fitted to engagement ring.","Plain path — profile and width: Band profile (Flat, Half Round, Comfort Fit, etc.) and width (2mm–6mm).","Diamond path — diamond shape: Round, Oval, Princess, Marquise, Multi-Shape mix, or other.","Diamond path — coverage: Full Eternity, Three-Quarter, Half Eternity, Quarter, or Flush-Set (singles).","Diamond path — setting style: 4-Prong, Shared Prong, U-Prong, Bezel, or Channel.","Diamond path — width: 1.5mm–4mm depending on setting style.","Personalizations: Engraving, birthstone inlay, or milgrain edge.","Final details: Ring size, special date, and budget."]},{type:"heading",text:"Matching band CTA after ring approval"},{type:"paragraph",text:"After a client approves an engagement ring design, a 'Design a Matching Wedding Band' button appears on their approval confirmation screen. Clicking it launches the wedding band quiz pre-seeded with the same metal type and setting style as the approved ring, so the band is designed to complement it."},{type:"tip",text:"Use the matching band CTA as a natural upsell moment. Many clients don't initially plan to design a band through you, but the CTA plants the idea at exactly the right time — right after they've approved a ring they're excited about."}],faqs:[{question:"How do I enable the Wedding Band module?",answer:"The module is enabled per account by the ShowroomPro team. Send a message through the in-dashboard feedback button or email [email protected] and it will be switched on for your account."},{question:"Do wedding band designs count toward my AI design limit?",answer:"Yes. Each AI visualization generated for a wedding band session counts toward the same design generation counter as engagement ring sessions."},{question:"Can a client design a band without having first designed an engagement ring?",answer:"Yes. If wedding bands are enabled, the client can select 'Wedding Band' from the 'Shopping for' step and complete the band quiz entirely independently."},{question:"Do band sessions appear separately in my Pipeline?",answer:"Yes. Wedding band sessions appear as individual customer cards in your Pipeline, clearly labelled as 'Wedding Band' so you can distinguish them from engagement ring sessions at a glance."}]},{id:"customer-pipeline",group:"Managing Clients",title:"Customer Pipeline",icon:Z,description:"A Kanban board and list view for managing every client from first quiz submission to completed ring.",blocks:[{type:"heading",text:"The Pipeline board"},{type:"paragraph",text:"Every client who completes or starts your quiz appears as a card in the Pipeline. By default, there are five stages: New Lead, Consultation, Design Review, Approved, and Completed. Drag a card from one column to another to update the client's stage — the change saves instantly."},{type:"heading",text:"Pipeline tabs"},{type:"bullets",items:["Active — all clients who are currently in your pipeline. This is the default view.","Not Ready — clients who have been deprioritised but are not fully closed. Useful for clients waiting on a budget decision or a life event.","Archived — clients you have finished working with. Archived cards are hidden from the main board but remain fully accessible."]},{type:"heading",text:"Switching between Board and List view"},{type:"paragraph",text:"Use the toggle buttons (grid icon / list icon) at the top-right of the Pipeline tab to switch between Kanban board and table list. List view is useful for searching and filtering a large number of clients quickly. Both views show the same data."},{type:"heading",text:"Opening a customer card"},{type:"paragraph",text:"Click any customer card to open their full profile panel. Inside you will find their contact details, quiz preferences, all design sessions with status, message history, email log, and notes. Everything you need to manage a client relationship is in one place."},{type:"heading",text:"Customising your pipeline stages"},{type:"steps",items:["Click the Settings icon (gear, top-right of the dashboard).","Go to the Pipeline tab.","Use the stage editor to rename stages, change their colour, reorder them with the up/down arrows, or add new ones (up to 20 total).","Click Save Stages. Changes apply immediately to your board.","If you delete a stage that has customers in it, you will be asked to move those customers to another stage before the deletion is confirmed."]},{type:"table",title:"Stage colour options",headers:["Colour","Good for"],rows:[["Slate (default)","General / neutral stages"],["Blue","Active communication or design stages"],["Amber","Waiting on client response"],["Green","Approved / confirmed"],["Purple","VIP or high-value clients"],["Red","Urgent or requires action"],["Pink","Warm leads or referrals"],["Teal","Production or manufacturing stages"]]},{type:"tip",text:"Keep your stage names short (1–3 words). They appear as column headers on the Kanban board and long names truncate at smaller screen sizes."}],faqs:[{question:"How do I archive a client?",answer:"Open the customer card and click the three-dot menu (⋮) in the top-right corner. Select 'Archive'. The client moves to the Archived tab. You can unarchive at any time the same way."},{question:"What is the difference between Archived and Not Ready?",answer:"'Not Ready' means the client is still in your pipeline but paused — for example, they're waiting to save more money or are on hold for personal reasons. 'Archived' means the engagement is complete or closed and you don't expect to work with them again soon. Both statuses are reversible."},{question:"Can I search for a customer by name or email?",answer:"Yes. The search bar at the top of the Pipeline tab filters all visible cards in real time by name, email address, and phone number."},{question:"Can I add a customer manually without them going through the quiz?",answer:"Yes. Click the '+ Add Customer' button at the top of the Pipeline. Fill in the client's name and email to create a card manually. You can then add notes and start a design session from their card."}]},{id:"converting-leads",group:"Managing Clients",title:"Converting Leads into Sales",icon:I,description:"Actionable strategies for following up, booking appointments, and turning quiz submissions into paying clients.",blocks:[{type:"paragraph",text:"A quiz submission is a warm lead — the client has already told you exactly what they want. The difference between a lead and a sale usually comes down to how quickly and personally you follow up. These practices will help you turn more submissions into consultations and more consultations into closed orders."},{type:"heading",text:"Follow up within the first hour"},{type:"paragraph",text:"Research consistently shows that response speed is the single biggest driver of lead conversion. A client who submits a ring quiz is in a high-interest moment — if you reach out while they're still thinking about it, you're far more likely to book a call."},{type:"bullets",title:"What to do when a new submission arrives",items:["You receive an email notification the moment a client submits. Open their card in the Pipeline immediately.","Review their quiz answers — stone, shape, setting, metal, and budget are all captured. Read them before you reach out so your first message feels personal.","Send a short, warm reply within 60 minutes acknowledging their submission and inviting them to book a consultation. Clients who get a same-day response convert at a dramatically higher rate than those who wait 24+ hours.","Send a short, personal reply via the Inbox — mention one specific detail from their quiz (e.g. 'I loved seeing you're drawn to an oval cut — it's one of my favorites to work with')."]},{type:"tip",text:"Turn on browser notifications or set up email forwarding to your phone so new submissions don't sit unread. Being first to respond is often more important than what you say."}
1,{type:"heading",text:"Book the appointment in the first exchange"},{type:"paragraph",text:"Your goal in the first outreach is not to sell — it's to book a call or in-store appointment. Keep your first message short and end with a specific, low-friction ask."},{type:"bullets",title:"Tips for booking appointments",items:["Offer two specific time slots rather than asking 'when are you free?' — it reduces back-and-forth and makes it easy to say yes.","Give them options: video call, phone call, or in-store visit. Some clients are happy to decide over video; others want to see the studio before committing.","Include a booking link (Calendly, Cal.com, or similar) in your follow-up email so they can self-schedule without waiting for your reply.","If they don't respond to your first message, follow up once more after 48 hours. A simple 'Just checking in — happy to answer any questions before you decide' goes a long way.","Reference the AI design in your message: 'I've already generated a first look at your ring — I'd love to walk you through it together.' This creates urgency and gives them a reason to book."]},{type:"heading",text:"Manage your pipeline actively"},{type:"paragraph",text:"The Customer Pipeline is most powerful when you treat it as a living sales board, not just a log. A lead sitting in the same stage for more than a few days is a lead going cold."},{type:"bullets",title:"Pipeline habits that close more sales",items:["Review your pipeline every morning. Any card that hasn't moved in 3+ days needs an action — a follow-up email or a stage update.","Move cards through stages as you progress: New Lead → Contacted → Consultation Booked → Design Shared → Completed. The stage tells you at a glance where every client stands.","Use the Notes field on each customer card to log conversation context — what they mentioned on the call, their timeline, their partner's preferences, any constraints. The next time you reach out you'll sound like you've been thinking about them the whole time.","Mark leads as 'Not Ready' if the client says they're browsing for a future date. Plan to re-engage them closer to their timeline rather than letting the card go stale.","Archive leads that have gone completely cold (no response after 2–3 attempts) so your active pipeline only shows clients worth pursuing right now."]},{type:"heading",text:"Use the AI design as a sales tool"},{type:"bullets",items:["Share the design iteration link with clients before the formal approval step — it gives them something visual to react to and makes the consultation feel more concrete.","If a client is on the fence, offer a free redesign to get the ring closer to what they envisioned. The low friction of AI iteration (vs. manually redrawing) is your competitive advantage — use it.","During consultations, screen-share the design workspace and make changes in real time. Seeing the design update live is a powerful closer.","After the consultation, send the design for formal approval promptly while interest is high. Don't let days pass between a great call and the approval email."]},{type:"heading",text:"Automate the follow-up cadence"},{type:"paragraph",text:"ShowroomPro's automated email sequences handle the follow-up cadence for you — but they work best when you stay in the loop."},{type:"bullets",items:["Automated emails go out at key touchpoints (quiz submission, design delivery, approval reminder). Review these templates in Settings → Emails so they sound like you.","Watch your pipeline for stalled cards. A 30-second check-in email at the right moment often re-ignites a conversation that was fading.","Use the Outreach Automation tab to schedule a follow-up sequence for leads who haven't responded. A 3-touch sequence over 2 weeks (day 1, day 4, day 10) recovers a meaningful percentage of leads who went quiet."]},{type:"note",text:"The designers who convert the most leads treat every submission as a warm referral, not a cold inquiry. The client chose to share their dream ring with you — that's already a strong signal of intent."}],faqs:[{question:"How quickly should I respond to a new quiz submission?",answer:"Within the hour if possible, and within the same business day at a minimum. Speed of response is the strongest predictor of whether a lead converts. ShowroomPro sends you an email notification the moment a client submits — treat it like an incoming phone call."},{question:"What should my first follow-up message say?",answer:"Keep it short and personal. Acknowledge their quiz, mention one specific detail they shared (stone shape, setting style, budget range), tell them you've generated their design, and invite them to book a call. Avoid long templated o
1peners — clients can tell."},{question:"How many times should I follow up if a client doesn't respond?",answer:"Three touches spread over 10–14 days is a reasonable default: immediately after submission, again at 48–72 hours if no reply, and a final check-in around day 10. After that, move the card to 'Not Ready' or archive it. Chasing further rarely converts and risks leaving a bad impression."},{question:"A client approved the design but hasn't placed an order. What should I do?",answer:"Follow up within 24–48 hours of approval with clear next steps: a quote, a deposit request, or a link to book a production kickoff call. Approval is a strong buying signal but momentum can stall if the next step isn't obvious. Update the Pipeline stage to reflect where they are and send a follow-up message if you haven't heard back in 3 days."}]},{id:"ai-design-visualization",group:"AI Design",title:"AI Design Visualization",icon:T,description:"From quiz submission to photorealistic ring image — here is how the AI design workflow works end to end.",blocks:[{type:"heading",text:"How a design is generated"},{type:"paragraph",text:"When a client submits the quiz, their preferences (stone type, shape, setting, metal, band style, and finishing touches) are passed to Google Gemini's image generation model. The model renders a photorealistic ring image that reflects their choices as closely as possible. Generation typically takes 10–30 seconds."},{type:"heading",text:"Viewing a design in the dashboard"},{type:"steps",items:["Open the customer card from your Pipeline.","Click 'View Design' (or 'Open Design Session') to enter the design workspace for that client.","The design workspace shows the current AI-generated image alongside the client's full preference summary.","Scroll down to see previous design iterations — every version is saved and dated."]},{type:"heading",text:"Iterating on a design"},{type:"paragraph",text:"If the initial image doesn't perfectly capture the client's vision, you have two options: regenerate with the same preferences (produces a new variation) or adjust preferences and regenerate. Adjusted regenerations let you change any field — stone shape, setting style, metal — before generating a new image."},{type:"bullets",title:"What you can adjust between iterations",items:["Stone type, shape, and approximate carat size","Setting style (e.g. switch from Halo to Solitaire)","Metal type and finish","Band style","Finishing touches (engraving text, hidden halo, prong style)","Any free-text notes passed to the AI"]},{type:"note",text:"Each session starts with 3 redesigns included (4 total AI generations: the initial design plus 3 changes). You can control how many total designs any one client accumulates across all their sessions using the per-customer design cap in Settings → Quiz Settings."},{type:"heading",text:"Sending a design for client approval"},{type:"steps",items:["Inside the design workspace, click 'Send for Approval'.","The client receives an email with a link to a read-only approval page.","The approval page shows the AI design image and the full preference summary.","The client clicks 'Approve this Design'. This locks the design and notifies you instantly.","The approved design appears in the Approved section of your dashboard with a manufacturing status tracker."]},{type:"heading",text:"After a client approves"},{type:"paragraph",text:"Once approved, the design moves to your Approved tab. You can update the manufacturing status as the piece progresses through production: Pending → In Progress → Quality Check → Completed. The client's card in the Pipeline is also updated automatically."},{type:"heading",text:"Sharing a design with a client before formal approval"},{type:"paragraph",text:"Every design iteration has a shareable link — click the Share icon next to any iteration. The link takes the client to a view-only page where they can see the image and leave a comment. This is useful when you want informal feedback before presenting a design for official approval."}],faqs:[{question:"What if the AI image doesn't look like the ring the client described?",answer:"Try regenerating with the same preferences first — the AI produces slightly different results each time. If the output is still off, adjust the preferences (particularly the setting style and stone shape, which have the most visual impact) and regenerate. You can also add a free-text note to guide the AI, for example 'very delicate and minimal, thin band'."},{question:"Can I download the AI-generated images?",answer:"Yes. Every design iteration has a Download button that saves a high-resolution PNG to your device. You can share this with the client, save it to your own records, or use it in proposals."},{question:"Can a design be unapproved after the client approves?",answer:"Approval can be reversed by the designer from the design workspace. Open the approved design and click 'Revoke Approval' to return the session to draft status."},{question:"How many iterations can I create?",answer:"Each design session includes 3 redesigns by default, giving the client 4 total AI generations (the initial design plus 3 changes). You can set a per-customer design cap in Settings → Quiz Settings to limit how many total designs a single client can receive across all their sessions. When a client hits that cap, generation pauses and you get a notification — you can then grant additional designs from the pending designs queue on a per-client basis. During the free trial, every generation (including redesigns) counts toward your 5-design trial cap."},{question:"Does the client get notified every time I regenerate?",answer:"No. The client only receives an email notification when you explicitly click 'Send for Approval'. Iterations you create internally are not visible to the client unless you share the specific iteration link."}]},{id:"content-studio-canvas",group:"AI Content Studio",title:"Design Canvas",icon:Y,description:"Generate marketing-ready ring photography from scratch — no photoshoot, no props, no photographer.",blocks:[{type:"paragraph",text:"Design Canvas is available on Growth plans. Access it from your dashboard navigation: Content Studio → Design Canvas."},{type:"heading",text:"Generating your first image"},{type:"steps",items:["Navigate to Content Studio → Design Canvas.","Either select a completed ring session from the dropdown (which pre-fills the preferences from that client's quiz), or enter preferences manually using the selectors.","Choose an output mode: Dual-Angle Hero or Lifestyle.","Click Generate. The AI creates your image in 15–45 seconds.","If you like the result, click Save to Library to store it in your Content Library.","If you want a variation, click Regenerate — this produces a fresh version using the same inputs."]},{type:"heading",text:"Output modes explained"},{type:"table",headers:["Mode","What it produces","Best used for"],rows:[["Dual-Angle Hero","Two clean product shots on a white or neutral background, shot from different angles","E-commerce product listings, Shopify or Etsy, catalog pages"],["Lifestyle","The r
1ing placed in a styled, real-world context — on a hand, in a box, on a linen surface","Instagram posts, email campaigns, website hero sections"]]},{type:"heading",text:"Sketch Studio (Sketch to Design)"},{type:"paragraph",text:"Navigate to Content Studio → Sketch Studio. Upload a hand-drawn sketch, a rough diagram, or even a screenshot of a ring concept. The AI interprets the visual and renders a photorealistic version. This is particularly useful when a client brings in a drawing or a rough sketch from another jeweller."},{type:"heading",text:"Saving to and using the Content Library"},{type:"paragraph",text:"Every image you save from Design Canvas (or any other Content Studio module) goes into your Content Library. Navigate to Content Studio → Library to find all saved images. From the Library you can download images, copy their link, or delete ones you no longer need."},{type:"note",text:"Design Canvas, Lifestyle Studio, and Catalog Studio share a single Content Studio generation counter. The counter is shown in a banner at the top of each Content Studio page."}],faqs:[{question:"Can I pull preferences from a client's quiz submission?",answer:"Yes. Use the session picker at the top of the Design Canvas page. Select the client's name and the session you want to reference — all their quiz preferences are automatically loaded into the input fields."},{question:"Who owns the images I generate?",answer:"You do. All images generated from your account using your inputs belong to your studio and can be used commercially — on your website, social media, print materials, and advertising."},{question:"What resolution are the generated images?",answer:"Images are generated at 1024×1024 pixels or higher, suitable for social media, web use, and small-format print (e.g. business cards, postcards)."},{question:"Can I use Design Canvas images for a client I haven't taken through the quiz?",answer:"Yes. Preferences can be entered manually in Design Canvas without any linked quiz session. You can use it to create images for any ring concept."}]},{id:"content-studio-lifestyle",group:"AI Content Studio",title:"Lifestyle Studio",icon:B,description:"Place rings into styled, atmospheric scenes for social media, marketing campaigns, and your website.",blocks:[{type:"paragraph",text:"Lifestyle Studio is available on Growth plans. Navigate to Content Studio → Lifestyle Studio."},{type:"heading",text:"Generating a lifestyle image"},{type:"steps",items:["Navigate to Content Studio → Lifestyle Studio.","Enter the ring preferences (or pull from an existing session using the session picker).","Select a scene type from the available options.","Configure scene settings — skin tone (for hand scenes), lighting mood, and background style.","Click Generate. The image is created in 15–60 seconds.","Save to your Content Library or download immediately."]},{type:"heading",text:"Scene types"},{type:"table",headers:["Scene","Description","Skin tone option"],rows:[["Hand","Ring worn on a model's hand — elegant close-up photography style","Yes (multiple tones available)"],["Box","Ring presented inside an open jewelry box with velvet lining","No"],["Environment / Flat Lay","Ring placed on a styled surface — marble, linen, floral, seasonal","No"],["Natural / Outdoor","Ring in an outdoor or garden-style setting with natural light","No"]]},{type:"tip",text:"Hand scenes with diverse skin tone options resonate well with a broad audience and perform strongly on Instagram. Generate a few variations with different skin tones to build a more inclusive content library."},{type:"heading",text:"Lighting moods"},{type:"bullets",items:["Warm — golden-hour tone, luxurious and romantic feel","Neutral — clean, balanced light, versatile for any platform","Cool — bright, airy tone, modern and editorial"]}],faqs:[{question:"Can I choose a specific background colour or texture?",answer:"Scene configurations include preset background styles (marble, linen, velvet, floral, outdoor, etc.) that are selected as part of the scene type. Fully custom background colours are not available, but the variety of presets covers most marketing contexts."},{question:"How is Lifestyle Studio different from Design Canvas lifestyle mode?",answer:"Design Canvas lifestyle mode generates a lifestyle image as one of two output modes. Lifestyle Studio is a dedicated module with more granular scene controls — scene type, skin tone, lighting mood, and background style are all configurable separately."},{question:"Can I use lifestyle images in print?",answer:"Images are suitable for small-format print (business cards, brochures, social media ads). For large-format print (posters, banners over A3), we recommend consulting with a print specialist on resolution requirements."}]},{id:"content-studio-catalog",group:"AI Content Studio",title:"Catalog Studio",icon:V,description:"Create consistent, professional product photography for your e-commerce store or catalog pages.",blocks:[{type:"paragraph",text:"Catalog Studio is available on Growth plans. Navigate to Content Studio → Catalog Studio."},{type:"heading",text:"What Catalog Studio is for"},{type:"paragraph",text:"Catalog Studio generates clean, consistent product shots optimised for e-commerce. Think of it as the kind of photography you'd see on a major retailer's website — white or neutral background, professional lighting, ring centered in the frame. It is ideal for Shopify, Etsy, and catalog PDFs."},{type:"heading",text:"Generating a catalog shot"},{type:"steps",items:["Navigate to Content Studio → Catalog Studio.","Enter the ring preferences you want to photograph.","Select a background style: White Sweep, Light Grey, Soft Gradient, or Textured.","Choose a lighting preset: Soft Box (even, diffused), Studio (crisp highlights), or Natural (warm, window-light feel).","Click Generate.","Download the image or save it to your Content Library."]}
1,{type:"heading",text:"Background and lighting options"},{type:"table",headers:["Background","Best for"],rows:[["White Sweep","Shopify, Amazon, Etsy — meets most platform image guidelines"],["Light Grey","Catalog PDFs, look-books, press kits"],["Soft Gradient","Website hero sections, email banners"],["Textured","Lifestyle-leaning catalog content, social media"]]},{type:"note",text:"Catalog Studio images on a white background meet the image guidelines for Shopify, Etsy, and most major e-commerce platforms without any further editing."}],faqs:[{question:"Can I generate multiple catalog shots for the same ring in one go?",answer:"Currently images are generated one at a time. After generating one shot, you can change the background or lighting and generate again. Each click of Generate counts as one Content Studio generation."},{question:"Is Catalog Studio different from Design Canvas dual-angle mode?",answer:"Yes. Design Canvas dual-angle mode is a quick way to get two hero shots. Catalog Studio gives you more granular control over background type and lighting preset, making it better suited for building a consistent product catalog at scale."}]},{id:"white-label-branding",group:"Marketing & Branding",title:"White-Label Branding",icon:U,description:"Customise every client-facing touchpoint — from the quiz splash screen to automated emails — to match your studio's identity.",blocks:[{type:"paragraph",text:"Your branding settings are in Settings → Customization. Changes apply to your quiz, automated emails, and the client approval page. They take effect immediately — any client who opens your quiz link after saving will see the updated branding."},{type:"heading",text:"Logo"},{type:"paragraph",text:"Upload your studio logo as a PNG, SVG, or JPEG file. Maximum file size is 2MB. A PNG or SVG with a transparent background looks best on the quiz splash screen. Your logo appears at the top of the quiz, on automated emails, and on the client approval page."},{type:"heading",text:"Brand colour"},{type:"paragraph",text:"Use the hex colour picker or type a hex code directly (e.g. #C9A96E for gold). Your brand colour is applied to the quiz's primary buttons (Next, Generate, Submit), progress bar accents, and email CTA buttons. Choose a colour with sufficient contrast against white for readability."},{type:"heading",text:"Welcome message"},{type:"paragraph",text:"Write a short welcome message (up to 500 characters) that appears on the quiz splash screen before the client begins. Use this to set expectations, mention your studio name, or create a warm, personal tone. Example: 'Welcome to Elara Jewellery. Our custom ring designer takes just a few minutes and will help us bring your vision to life.'"},{type:"heading",text:"Booking link"},{type:"paragraph",text:"Add your Calendly, Acuity, or any other booking URL in the Booking Link field. When set, a 'Book a Consultation' button appears on the quiz confirmation page and in automated emails, making it easy for clients to schedule a call right after submitting their preferences."},{type:"heading",text:"Previewing your branded quiz"},{type:"steps",items:["Save your branding settings.","Copy your quiz link from the top of the Customers tab.","Open the link in an incognito/private browser window to see the exact experience your clients see."]},{type:"tip",text:"The most impactful branding change is your logo. Clients notice and remember a professional logo more than any other visual element. If you don't have a digital version of your logo, even a clean wordmark in your brand font makes a big difference."}],faqs:[{question:"Does my brand colour appear everywhere in the quiz?",answer:"Your brand colour is applied to primary buttons, the progress bar, and CTA elements. The background, card colours, and typography remain part of the ShowroomPro design system for a consistent, high-quality experience."},{question:"Can I remove the 'Powered by ShowroomPro' badge from the quiz?",answer:"Yes, on Growth and Enterprise plans. The badge is hidden automatically once you upgrade. On the Starter plan, a small 'Powered by ShowroomPro' badge appears at the bottom of the quiz."},{question:"Can I have different branding for different campaigns?",answer:"Currently all clients use the same quiz link and see the same branding. Per-campaign or per-link branding is on the roadmap for Enterprise plans."},{question:"Does the branding apply to automated emails?",answer:"Yes. Your logo and brand colour are used in all automated email templates — the design completion email, follow-up emails, and approval emails all include your branding at the top."}]},{id:"email-automation",group:"Marketing & Branding",title:"Email Automation",icon:A,description:"Automated emails follow up with clients at exactly the right moment, reducing manual outreach and increasing conversion.",blocks:[{type:"heading",text:"Where to find email settings"},{type:"paragraph",text:"Go to Settings → Emails. You will see every automated email template with its trigger, a toggle to turn it on or off, and an Edit button to customise the subject and body."},{type:"heading",text:"Automated emails and when they fire"},{type:"table",headers:["Email","When it fires","Can be toggled"],rows:[["Design Delivered","Immediately after the first AI visualization is generated for a new session","Yes"],["Abandoned Quiz Recovery","24 hours after a client starts but does not complete the quiz","Yes"],["Follow-Up (New Lead)","When a customer card stays in the first stage for a configurable number of days without moving","Yes"],["Follow-Up (Qualified Lead)","When a card stays in the second stage for the configured number of days","Yes"],["Follow-Up (Quote Sent)","When a card stays in the quote/proposal stage for the configured number of days","Yes"],["Approval Reminder","When a design is pending client approval for more than 48 hours","Yes"]]},{type:"heading",text:"Customising email templates"},{type:"steps",items:["Click Edit next to any template.","Update the Subject line and the email Body.","Use template tokens to personalise automatically. Tokens are replaced with the real values when the email is sent.","Click Save Template."]},{type:"heading",text:"Available template tokens"},{type:"table",headers:["Token","Replaced with"],rows:[["{{customerFirstName}}","The client's first name"],["{{designerCompanyName}}","Your studio name"],["{{designLink}}","A link to the client's design or approval page"],["{{stoneShape}}","The stone shape the client selected"],["{{metal}}","The metal type the client selected"],["{{bookingLink}}","Your booking / consultation URL (if set in Customization)"]]},{type:"heading",text:"Viewing a client's email history"},{type:"paragraph",text:"Open any customer card in the Pipeline. Scroll to the Email History section to see every automated and manually sent email, with the date, subject line, and delivery status."},{type:"note",text:"Automated emails use your logo and brand colour in their header, consistent with the quiz branding your client already saw."}],faqs:[{question:"Can I send a custom one-off email to a client?",answer:"Yes. Open any customer card, scroll to the Messages section, and use the Send Email button to compose and send a custom email. This email is also logged in their email history."},{question:"Can I use my own Gmail as the sender address?",answer:"Yes, on any plan. Go to Settings → Gmail and connect your Google account via OAuth. Once connected, outreach emails go from your own Gmail address. Automated template emails continue to use the ShowroomPro sending address unless you are on an Enterprise plan with a custom sender domain."},{question:"What if I want to change the delay before the abandoned quiz recovery email?",answer:"The 24-hour delay for the abandoned quiz email is currently fixed."},{question:"Can I preview an email before it goes live?",answer:"After editing a template, use the Preview button (where available) to see how the email looks with your logo and brand colour applied. You can also send a test email to yourself from the template editor."}]},{id:"marketing-kit",group:"Marketing & Branding",title:"Marketing Kit",icon:H,description:"Ready-made assets for promoting your quiz across social media, SMS, email, and in-store.",blocks:[{type:"paragraph",text:"The Marketing Kit is accessible from the main dashboard navigation. Everything here is generated automatically from your quiz link — no design software required."},{type:"heading",text:"QR code"},{type:"paragraph",text:"A QR code that links directly to your quiz is generated automatically. Click Download QR Code to save a PNG file. Typical uses: printed on business cards, desk displays, window vinyl, or any in-store signage. When a client scans the code with their phone camera, they land directly on your branded quiz."},{type:"heading",text:"Social media captions"},{type:"paragraph",text:"Pre-written captions are provided for Instagram and SMS. Each caption includes a short hook, a description of the quiz experience, and your quiz link. Click Copy Caption to copy it to your clipboard, then paste it directly into your Instagram bio link service, a social post, or an SMS campaign."},{type:"bullets",title:"Caption formats provided",items:["Instagram caption — multi-line, with hashtags","SMS caption — short, under 160 characters, link included"]},{type:"heading",text:"Email signature"},{type:"paragraph",text:"Click Copy HTML Signature to copy a ready-made email signature that includes your quiz link and a 'Design Your Custom Ring' CTA. The signature is formatted in HTML for use in Gmail, Outlook, or any email client that supports HTML signatures."},{type:"steps",title:"Adding the signature to Gmail",items:["Click Copy HTML Signature in the Marketing Kit.","Open Gmail and go to Settings (gear icon) → See all settings.","Under General, scroll to the Signature section.","Create a new signature or edit an existing one.","Click the Insert HTML button (if available) or paste directly — Gmail will render the HTML.","Save settings. The signature will appear on all new emails."]},{type:"tip",text:"Adding your quiz link to your email signature is one of the highest-leverage changes you can make. Every email you send becomes a passive referral for your custom ring design service."}],faqs:[{question:"Does the QR code change if I update my branding?",answer:"No. The QR code encodes your permanent quiz URL, which never changes. You can safely print QR codes in large quantities without worrying about them becoming outdated."},{question:"Can I customise the social media captions?",answer:"The provided captions are starting points — copy them and edit freely in your social media scheduler or app before posting."},{question:"My quiz link changed. How do I update the QR code?",answer:"Your quiz URL is permanent and tied to your account — it never changes. If you registered under a different email or created a new account, contact support to consolidate your accounts."}]},{id:"analytics-dashboard",group:"Analytics & Team",title:"Analytics Dashboard",icon:R,description:"Track your pipeline performance, understand client preferences, and measure conversion over time.",blocks:[{type:"note",text:"The Analytics Dashboard is available on Growth and Enterprise plans. It becomes active after you have collected at least 10 completed quiz sessions."},{type:"heading",text:"Accessing analytics"},{type:"paragraph",text:"Click the Analytics tab in the main dashboard navigation. If you are on a Starter plan, you will see an upgrade prompt. If you are on Growth but have fewer than 10 completions, you will see a progress bar showing how close you are to unlocking the dashboard."},{type:"heading",text:"KPI cards"},{type:"table",headers:["KPI","What it measures"],rows:[["Total Customers","All clients in your Pipeline, including archived and not-ready"],["Completed Sessions","Quiz submissions where the client reached the final review step"],["Designs Generated","Total AI ring visualizations created across all sessions"],["Approval Rate","Percentage of sessions where the client formally approved a design"],["Avg. Time to First Design","Average number of days from quiz submission to first AI visualization"]]},{type:"heading",text:"Activity chart"},{type:"paragraph",text:"The activity chart shows quiz completions and designs generated over time. Use the date range selector to zoom in on a specific period. This helps you understand seasonality, measure the impact of a marketing push, and track growth month over month."},{type:"heading",text:"Preferences breakdown"},{type:"paragraph",text:"The Preferences section shows aggregated data across all your clients — which stone shapes, metals, setting styles, and budget ranges they select most often. This is valuable for inventory planning, guiding what samples to stock, and understanding your typical client's price point."},{type:"bullets",title:"Preference data available",items:["Stone types (Natural Diamond, Lab Diamond, Moissanite, Sapphire, etc.)","Stone shapes (Round, Oval, Cushion, etc.)","Setting styles (Solitaire, Halo, Three Stone, etc.)","Metal types (Platinum, White Gold, Yellow Gold, etc.)","Budget ranges (breakdown across all 8 tiers)","Shopping timelines"]},{type:"tip",text:"If oval stones dominate your preference data, make sure you have oval samples in your studio. Meeting clients where they already are reduces friction and builds trust faster."}],faqs:[{question:"Why does the Analytics tab show an upgrade prompt even though I'm on Growth?",answer:"Analytics requires both a Growth plan and a minimum of 10 completed sessions. If you've recently upgraded, collect more quiz completions and the dashboard will activate automatically."},{question:"Can I export analytics data?",answer:"Data export is on the roadmap. Currently analytics are view-only within the dashboard."},{question:"How often does the data update?",answer:"Analytics data updates in real time. New quiz completions and designs generated appear in the dashboard immediately — no manual refresh required."}
1,{question:"Does analytics include data from before I upgraded to Growth?",answer:"Yes. All historical quiz submissions and designs — including those during your trial or Starter plan — are included in the analytics data from the moment the dashboard activates."}]},{id:"team-members",group:"Analytics & Team",title:"Team Members",icon:K,description:"Invite colleagues to share your Pipeline, manage clients, and collaborate on designs.",blocks:[{type:"note",text:"Team Member invitations are available on Growth plans (up to 3 members) and Enterprise plans (custom limits)."},{type:"heading",text:"Inviting a team member"},{type:"steps",items:["Go to Settings → Team.","Click Invite Member.","Enter the team member's email address and click Send Invite.","The invitee receives an email with a link to create their ShowroomPro account and join your studio.","Once they accept, their name appears in the Team tab with an 'Active' status."]},{type:"heading",text:"What team members can do"},{type:"table",headers:["Action","Team Member","Owner"],rows:[["View and update customer cards","✓","✓"],["Move customers between pipeline stages","✓","✓"],["Send emails and messages to clients","✓","✓"],["View and generate AI designs","✓","✓"],["Use Content Studio","✓","✓"],["Change branding settings","—","✓"],["Invite or remove team members","—","✓"],["Manage billing and subscription","—","✓"],["Change pipeline stages","—","✓"]]},{type:"heading",text:"Removing a team member"},{type:"steps",items:["Go to Settings → Team.","Find the team member you want to remove.","Click Remove. This immediately revokes their access.","All actions they took — notes, emails, and messages — remain in your system attributed to their name."]},{type:"tip",text:"Team members share your quiz link and branded quiz experience. There is no way to give a team member their own separate quiz link under your account — all clients flow into the same shared Pipeline."}],faqs:[{question:"Can a team member invite other team members?",answer:"No. Only the account owner can invite and remove team members."},{question:"Do team members each get their own login?",answer:"Yes. Each team member creates their own ShowroomPro account using the invitation email. They log in with their own email and password."},{question:"What happens to a team member's work if I remove them?",answer:"All their contributions remain intact — notes they added, emails they sent, and messages they wrote are all preserved in the system and attributed to their name. No data is deleted."},{question:"Can I have more than 3 team members on Growth?",answer:"Growth plans include up to 3 team members. For larger teams, contact support about Enterprise pricing which includes higher or custom limits."}]},{id:"pricing-rates",group:"Pricing & Quoting",title:"Pricing Rates",icon:F,description:"Configure your material and labor rates so every design card shows you an accurate internal cost estimate the moment a client's design is generated.",blocks:[{type:"paragraph",text:"Pricing Rates live in Settings → Pricing Rates. The estimate calculated here is for your eyes only — it never appears on the client-facing quiz or approval screen. Use it to quickly sanity-check a design before quoting the client."},{type:"heading",text:"Markup"},{type:"paragraph",text:"The Markup % is a single percentage applied to the cost subtotal (materials + labor) to produce your selling price. The default is 30%. For example, if your subtotal is $2,000 and your markup is 30%, the estimate total is $2,600. Adjust this to match your studio's standard margin."},{type:"heading",text:"Live Spot Prices for metals"},{type:"paragraph",text:"ShowroomPro pulls live gold and platinum spot prices from a commodity feed and caches them. The Live Spot Prices card shows the current 24K gold and platinum rates in $/gram, the time they were last fetched, and a Live / Stale badge. Click Refresh to pull the latest rates manually. If the feed is temporarily unavailable, the badge shows Stale and any metal set to Live mode will fall back to the last known rate."},{type:"heading",text:"Default Gold Karat"},{type:"paragraph",text:"Engagement-ring clients can select 10K, 14K, 18K, or Not Sure after choosing a gold color or Two-Tone. Live estimates multiply the same current 24K gold price shown above by the selected purity (10/24, 14/24, or 18/24). Not Sure and older sessions use your per-metal karat or Default Gold Karat. Platinum is unaffected."},{type:"heading",text:"Metal Pricing"},{type:"paragraph",text:"Each metal (Platinum, White Gold, Yellow Gold, Rose Gold, Two-Tone) has a Live / Manual toggle."},{type:"bullets",title:"Live mode",items:["Uses the same 24K spot price shown in Pricing Rates. Engagement-ring gold is multiplied by the client's selected karat purity; Not Sure and older sessions use your configured per-metal/default karat. Platinum uses the platinum spot directly.","Shows the live base $/g and the effective $/g after purity adjustment.","Updates automatically each time you refresh spot prices.","Per-metal karat override: if you sell White Gold in 18K but Yellow Gold in 14K, set each independently."]},{type:"bullets",title:"Manual mode",items:["You enter a fixed $/gram rate. Use this if you have a supplier price sheet you prefer over the live feed, or if you want a stable rate regardless of spot price movements.","The field shows the current system default in parentheses as a 
1starting reference."]},{type:"heading",text:"Stone Price per carat"},{type:"paragraph",text:"Enter your cost per carat for each stone type your clients might select. The estimator multiplies the client's chosen carat weight by this rate. Supported stones include Natural Diamond, Lab Diamond, Moissanite, Sapphire, Emerald, Ruby, Morganite, Aquamarine, Alexandrite, Tourmaline, Tanzanite, Opal, and all fancy colored diamond variants (Fancy Yellow, Pink, Brown, Blue)."},{type:"heading",text:"Setting Labor Fee"},{type:"paragraph",text:"A flat fee added per setting style to cover bench labor. Set a rate for each style: Solitaire, Halo, Three-Stone, Vintage, Bezel, Cathedral, Tulip Setting, Toi et Moi, East-West, and Half Bezel."},{type:"heading",text:"Band Style Fee"},{type:"paragraph",text:"An adder for band complexity beyond a plain shank. Plain is $0 by default. Set rates for Twisted Shank, Split Shank, Knife Edge, Pavé, Half Pavé, Full Pavé, French Pavé, and Side Stones to reflect the additional labor and material those styles require."},{type:"heading",text:"Finishing Touch Fee"},{type:"paragraph",text:"Flat fees for optional add-ons the client may select: Inside Engraving, Outside Engraving, Hidden Halo, Diamond Prongs, and Birthstones. If the client selects multiple finishing touches, each fee is added individually."},{type:"heading",text:"Wedding Band rates"},{type:"paragraph",text:"Wedding band sessions use two separate rate fields. Wedding Band Labor Fee covers the base labor cost per band (entered per band gender type). Wedding Band Diamond Adder is added when the client chooses a diamond band, to cover the additional stone material cost beyond the plain band."},{type:"heading",text:"How the estimate appears on the design card"},{type:"paragraph",text:"Open any design from your dashboard and click the Cost Estimate tab. You will see a full breakdown:"},{type:"table",headers:["Line item","How it is calculated"],rows:[["Metal","Metal weight (grams) × your $/g rate for that metal and karat. The weight is the system estimate unless you've entered a manual weight for that design"],["Stone","Client's chosen carat weight × your $/ct rate for that stone type"],["Labor / Setting","Flat fee for the chosen setting style"],["Band style","Flat adder for band complexity (zero for plain shank)"],["Finishing touches","Sum of flat fees for each selected add-on"],["Subtotal","Sum of all line items above"],["Markup","Subtotal × your Markup %"],["Estimated Price Range","±10% of (Subtotal + Markup), shown as a low–high range"]]},{type:"note",text:"Metal weight is estimated in three parts. Shank: the band itself, sized from the client's ring size, band width, and band style (twisted, knife-edge, etc.). Setting: the center head, scaled to the center stone's carat and shape, prong style, and setting height, plus any halo, three-stone side heads, cathedral arches, bezel, or vintage gallery. Extras: split shank, side stones, euro shank, and hidden halo. The total volume is multiplied by the density of the chosen metal and karat (for example, 14K gold ≈ 13.1 g/cm³, 18K ≈ 15.6 g/cm³, platinum ≈ 20.4 g/cm³). If the client picked 'Not sure' for gold purity, the karat from your Pricing Rates is used. Wedding bands use the client's ring size, band width, men's or women's thickness, and the band profile and fit (flat, domed, comfort fit). If a field is missing, a typical default is used, and the Quote tab lists it. The estimate is for internal planning only and is never shown to the client."},{type:"heading",text:"Entering the real metal weight"},{type:"paragraph",text:"The Quote tab shows the weight breakdown (shank, setting, extras, and the density used). If you know the actual weight, for example from your CAD file or a caster's quote, type it into the Metal weight field in grams and click Recalculate. The metal cost, subtotal, markup, and price range update right away using the same $/g rate. The weight is saved on that design, so it's still there when you reopen it, and your teammates see it too. It's labeled 'Manual', shows who set it and when, and keeps the system estimate next to it for comparison. Click 'Reset to estimate' to go back to the calculated weight. Weights must be greater than 0 and no more than 100g."},{type:"tip",text:"Save your rates once and they apply to every design automatically. If you update your rates later, all existing design estimates recalculate immediately the next time you open a de
1sign card — there is no need to reprocess anything."}],faqs:[{question:"What is the difference between the client's budget range and the cost estimate?",answer:"The budget range is what the client entered during the quiz ('Under $5,000', '$5,000–$10,000', etc.). It reflects their expectation, not your cost. The cost estimate is calculated from your Pricing Rates and shows what you might actually charge. Comparing the two is a quick way to spot whether a client's expectations are aligned with the design they asked for."},{question:"Why is the estimate shown as a range rather than a single number?",answer:"The metal weight is estimated from the design's size, band, setting, and metal, but finished rings vary with the maker, casting, and finishing. The ±10% buffer gives you a realistic range rather than false precision. If you know the actual weight, enter it on the Quote tab and the estimate will use it instead."},{question:"My metal rates look wrong — what should I check?",answer:"First check the Live Spot Prices card. If the badge shows Stale, click Refresh to pull the latest rates. If the feed is unavailable and you need a specific rate right now, flip the affected metal to Manual mode and enter your own $/gram figure. You can switch back to Live later."},{question:"Does changing my rates affect designs that have already been generated?",answer:"Yes. Rates are applied at display time, not at generation time. Saving new rates immediately changes the estimate shown on every design card — existing designs are not locked to the rates that were in place when they were created."},{question:"Is the cost estimate visible to the client?",answer:"No. It is marked 'Internal' and is only visible to you on the design detail panel in your dashboard. The client's quiz, design approval screen, and shared design link never include pricing information."},{question:"How do ring size and carat affect the metal weight estimate?",answer:"The quiz captures the client's ring size, and the estimate uses it for both engagement rings and wedding bands. Larger sizes use more metal in the shank. The center stone's carat sets the size of the head and of any halo or side-stone settings, so a 2ct halo weighs more than a 1ct halo. If the client skipped ring size (for example, 'I don't know yet'), a typical size is assumed and noted in the weight breakdown. You can always replace the estimate with a manual weight."}]},{id:"klaviyo",group:"Integrations",title:"Klaviyo",icon:z,description:"Automatically push every new lead from your quiz into a Klaviyo list so you can trigger flows, send campaigns, and build audiences without any manual work.",blocks:[{type:"paragraph",text:"The Klaviyo integration lives in Settings → Integrations. When connected, each time a client submits your quiz their contact is upserted into your chosen Klaviyo list. If the profile already exists in Klaviyo (matched by email), it is updated rather than duplicated. Builder segmentation answers are sent automatically as soon as the relevant quiz is completed; there are no fields to configure."},{type:"heading",text:"What you need from Klaviyo"},{type:"bullets",items:["Private API Key — go to Klaviyo → Account → Settings → API Keys and create a Private API Key. It must have profiles:write and lists:write scopes. The key starts with pk_.","List ID — go to Klaviyo → Lists & Segments, open the list you want leads added to, then go to Settings. The List ID is the short alphanumeric code shown there."]},{type:"heading",text:"Connecting Klaviyo"},{type:"steps",items:["Open Settings → Integrations.","Paste your Private API Key into the API Key field.","Paste your List ID into the List ID field.","Click Connect Klaviyo.","Click Test Connection to verify the key and list are valid — you will see a success or error message."]},{type:"heading",text:"What is synced"},{type:"table",headers:["Field","Value"],rows:[["First name","Derived from the client's full name"],["Last name","Derived from the client's full name"],["Email","The email the client entered during the quiz"],["Phone","Normalized to E.164 format (e.g., +12125551234). Omitted if not provided or not parseable."],["Source property","ShowroomPro — applied to every profile so you can filter in Klaviyo"],["ShowroomPro Builder Type","Engagement Ring or Wedding Band"],["ShowroomPro Journey Intent","Planning a proposal, Hoping to be proposed to, Designing a ring together, or Just exploring (engagement-ring quizzes)"],["ShowroomPro Wedding Band Interest","Women's, Men's, or Both (wedding-band quizzes, including matching set
1s)"]]},{type:"heading",text:"Backfilling existing contacts"},{type:"paragraph",text:"After connecting, click Backfill Existing Contacts to sync all clients already in your ShowroomPro account into Klaviyo. The button shows a count of how many contacts were synced once the backfill completes. Contacts that already exist in Klaviyo are updated, not duplicated."},{type:"tip",text:"Use a dedicated Klaviyo list for ShowroomPro leads (e.g., 'Ring Quiz Leads') rather than your main subscriber list. This makes it easy to create a targeted flow for leads specifically and keeps them separate from your newsletter audience."}],faqs:[{question:"When exactly is a lead sent to Klaviyo?",answer:"Contact details are synced when the lead starts or submits the quiz. Builder type, engagement journey intent, and wedding-band interest are added automatically when the corresponding quiz reaches completion and those answers are known. The sync does not wait for AI image generation."},{question:"What if a client re-submits the quiz?",answer:"The integration upserts profiles by email. A returning client's profile is updated with any new information (such as an updated phone number) rather than creating a second profile. They are re-added to the list subscription if they were removed."},{question:"My test connection passed but leads aren't appearing in Klaviyo — what should I check?",answer:"Confirm the List ID is correct and belongs to the same Klaviyo account as your API key. Also check that your API key still has the required scopes (profiles:write and lists:write) — Klaviyo keys can be edited after creation, which may remove scopes. Re-enter the key if needed."},{question:"Can I change the Klaviyo list I am syncing to?",answer:"Yes. Update the List ID field in Settings → Integrations and click Update. New leads will go to the new list. Existing contacts already in the old list are not moved automatically — you can do that inside Klaviyo."},{question:"Does disconnecting Klaviyo delete contacts from my Klaviyo account?",answer:"No. Disconnecting only removes the API key and list ID from ShowroomPro — no data is deleted from Klaviyo. Contacts that were already synced remain in your Klaviyo account."}]},{id:"webhooks",group:"Integrations",title:"Webhooks",icon:O,description:"Push real-time HTTP notifications to your own server when key events happen — connect ShowroomPro to any CRM, automation platform, or custom backend.",blocks:[{type:"paragraph",text:"Webhooks live in Settings → Integrations → Webhook Configuration. When a subscribed event occurs, ShowroomPro sends a POST request to your endpoint within seconds. If the request fails, it is automatically retried three times (after 5 seconds, 30 seconds, and 2 minutes) before being marked as failed."},{type:"heading",text:"Setting up your webhook"},{type:"steps",items:["Go to Settings → Integrations.","Paste your endpoint URL into the Endpoint URL field. The URL must be a publicly reachable HTTPS address that accepts POST requests.","Select the events you want to receive using the toggles.","Click Save Webhook. A signing secret is generated automatically and shown in the Signing Secret field — copy it now.","Click Send Test Ping to confirm your endpoint is reachable and returning a 2xx response."]},{type:"heading",text:"Available events"},{type:"table",headers:["Event","When it fires","What it contains"],rows:[["lead.created","When a client submits the quiz and their session is created","sessionId, sessionType, shareUrl, customer (name, email, phone, country)"],["design.generated","Once, when the first AI design is generated (not on regenerations)","Everything in lead.created, plus the client's full preferences and all generated image URLs"]]},{type:"heading",text:"Verifying webhook signatures"},{type:"paragraph",text:"Every request includes an X-ShowroomPro-Signature header containing an HMAC-SHA256 hex digest of the raw request body, signed with your signing secret. Always verify this signature on your server before processing the payload — it proves the request came from ShowroomPro and not a third party."},{type:"bullets",title:"Verification steps",items:["Compute HMAC-SHA256 of the raw POST body using your signing secret as the key.","Compare the result (as a hex string) to the X-ShowroomPro-Signature header value.","If they match, the request is genuine. If they don't match, discard it."]},{type:"heading",text:"Delivery log"},{type:"paragraph",text:"The Recent Deliveries panel at the bottom of the Webhook Configuration section shows the last several delivery attempts with the event name, HTTP status code, success or failure status, and the timestamp. Use this to confirm events are arriving and diagnose any failures without needing to add logging on your server."},{type:"tip",text:"Use a service like webhook.site or ngrok during development to inspect the exact payload shape before wiring your real server. Once you have seen a real payload for each event, building the handler is straightforward."},{type:"note",text:"Your endpoint must respond with a 2xx HTTP status within 10 seconds. If it times out or returns a non-2xx code, the delivery is counted as failed and retried. After the final retry fails, the event is logged as failed in your delivery log — it is not retried again."}],faqs:[{question:"What does the design.generated payload look like?",answer:"It includes: event name ('design.generated'), timestamp, sessionId, sessionType ('engagement-ring' or 'mens-band'/'womens-band'), a sessionUrl for retrieving full session data via the API, a shareUrl for the client-facing design page, the customer object (name, email, phone, 
1country), iterationNumber (always 1 on first generation), imageUrls (array of absolute URLs to the generated images), and the full preferences object containing every quiz answer such as stoneType, stoneShape, stoneCarat, settingStyle, metalType, bandStyle, budgetRange, and any finishing touches."},{question:"Why does design.generated only fire on the first design and not on regenerations?",answer:"The first design is the one that defines the client's core preferences — it is the most useful signal for downstream automation (creating a CRM record, triggering a flow, notifying your team). Regenerations are iterative refinements of the same session, so firing again would create noise without new information. If you need to track regenerations, you can poll the session URL returned in the payload."},{question:"Can I subscribe to only one event?",answer:"Yes. Toggle off any event you don't need before saving. For example, if you only want leads for marketing purposes and don't need design details, enable only lead.created."},{question:"What happens if my server is down during a delivery attempt?",answer:"ShowroomPro retries up to three times — at 5 seconds, 30 seconds, and 2 minutes after the initial failure. If all attempts fail, the event is logged as failed in your delivery log. There is no automatic replay after the retry window. You can use the session URL in the payload to manually fetch the session data at any time."},{question:"Can I rotate my signing secret?",answer:"Not yet from the UI — the signing secret is generated 
1when you first save your webhook configuration. If you need to rotate it, save the webhook with a blank URL to clear it, then re-enter your URL and save again to get a new secret. Update your server to use the new secret before doing this to avoid dropped deliveries."},{question:"Do webhooks work during the free trial?",answer:"Yes. Webhooks are available on all plans including the free trial. There is no plan restriction on event delivery."}]}];function S(t,s){if(!s.trim())return e.jsx(e.Fragment,{children:t});const n=s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),a=t.split(new RegExp(`(${n})`,"gi"));return e.jsx(e.Fragment,{children:a.map((i,l)=>i.toLowerCase()===s.toLowerCase()?e.jsx("mark",{className:"bg-amber-100 text-amber-900 rounded-sm px-0.5",children:i},l):e.jsx("span",{children:i},l))})}function ee({block:t,query:s}){const n=a=>S(a,s);switch(t.type){case"paragraph":return e.jsx("p",{className:"text-sm leading-relaxed text-foreground/80",children:n(t.text)});case"heading":return e.jsx("h3",{className:"mt-6 mb-2 font-serif text-lg font-semibold text-foreground first:mt-0",children:n(t.text)});case"steps":return e.jsxs("div",{className:"space-y-1",children:[t.title&&e.jsx("p",{className:"mb-2 text-sm font-semibold text-foreground",children:n(t.title)}),e.jsx("ol",{className:"space-y-3",children:t.items.map((a,i)=>e.jsxs("li",{className:"flex gap-3 text-sm leading-relaxed",children:[e.jsx("span",{className:"mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary",children:i+1}),e.jsx("span",{className:"text-foreground/80",children:n(a)})]},i))})]});case"bullets":return e.jsxs("div",{children:[t.title&&e.jsx("p",{className:"mb-2 text-sm font-semibold text-foreground",children:n(t.title)}),e.jsx("ul",{className:"space-y-2",children:t.items.map((a,i)=>e.jsxs("li",{className:"flex gap-2.5 text-sm leading-relaxed text-foreground/80",children:[e.jsx("span",{className:"mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary"}),e.jsx("span",{children:n(a)})]},i))})]});case"table":return e.jsxs("div",{className:"overflow-x-auto",children:[t.title&&e.jsx("p",{className:"mb-2 text-sm font-semibold text-foreground",children:n(t.title)}),e.jsxs("table",{className:"w-full text-sm border-collapse",children:[e.jsx("thead",{children:e.jsx("tr",{className:"border-b border-border bg-muted/40",children:t.headers.map((a,i)=>e.jsx("th",{className:"px-3 py-2 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground",children:a},i))})}),e.jsx("tbody",{children:t.rows.map((a,i)=>e.jsx("tr",{className:"border-b border-border last:border-0 hover:bg-muted/20",children:a.map((l,o)=>e.jsx("td",{className:f("px-3 py-2 text-foreground/80 align-top",o===0&&"font-medium text-foreground"),children:n(l)},o))},i))})]})]});case"tip":return e.jsxs("div",{className:"flex gap-3 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3",children:[e.jsx(J,{className:"mt-0.5 h-4 w-4 shrink-0 text-amber-600"}),e.jsx("p",{className:"text-sm leading-relaxed text-amber-800",children:n(t.text)})]});case"note":return e.jsxs("div",{className:"flex gap-3 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3",children:[e.jsx(k,{className:"mt-0.5 h-4 w-4 shrink-0 text-blue-600"}),e.jsx("p",{className:"text-sm leading-relaxed text-blue-800",children:n(t.text)})]});default:return null}}function te({section:t,query:s}){const n=t.icon,a=i=>S(i,s);return e.jsxs("article",{"data-testid":`article-${t.id}`,children:[e.jsxs("div",{className:"mb-6 border-b pb-6",children:[e.jsxs("div",{className:"mb-3 flex items-center gap-3",children:[e.jsx("div",{className:"flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10",children:e.jsx(n,{className:"h-5 w-5 text-primary"})}),e.jsx("div",{className:"text-xs font-medium uppercase tracking-widest text-muted-foreground",children:t.group})]}),e.jsx("h1",{className:"mb-2 font-serif text-2xl font-semibold text-foreground md:text-3xl","data-testid":`heading-section-${t.id}`,children:a(t.title)}),e.jsx("p",{className:"text-base leading-relaxed text-muted-foreground",children:a(t.description)})]}),e.jsx("div",{className:"space-y-4",children:t.blocks.map((i,l)=>e.jsx(ee,{block:i,query:s},l))}),t.faqs.length>0&&e.jsxs("div",{className:"mt-10","data-testid":`faqs-${t.id}`,children:[e.jsxs("div",{className:"mb-4 flex items-center gap-2 border-t pt-6",children:[e.jsx(x,{className:"h-4 w-4 text-primary"}),e.jsx("h2",{className:"font-serif text-xl font-semibold text-foreground",children:"Frequently Asked Questions"})]}),e.jsx(j,{type:"multiple",className:"space-y-2",children:t.faqs.map((i,l)=>e.jsxs(M,{value:`faq-${l}`,className:"rounded-lg border bg-muted/20 px-4","data-testid":`faq-item-${t.id}-${l}`,children:[e.jsx(D,{className:"py-3.5 text-left text-sm font-medium hover:no-underline","data-testid":`faq-trigger-${t.id}-${l}`,children:a(i.question)}),e.jsx(L,{className:"pb-4 text-sm leading-relaxed text-muted-foreground",children:a(i.answer)})]},l))})]})]})}function ae(t){if(!t.trim())return[];const s=t.toLowerCase(),n=[];for(const a of g){if(a.title.toLowerCase().includes(s)){n.push({section:a,matchType:"title",snippet:a.description});continue}if(a.description.toLowerCase().includes(s)){n.push({section:a,matchType:"description",snippet:a.description});continue}let i=!1;for(const o of a.blocks){let r=!1;if(o.type==="paragraph"&&o.text.toLowerCase().includes(s)&&(r=!0),o.type==="heading"&&o.text.toLowerCase().includes(s)&&(r=!0),(o.type==="steps"||o.type==="bullets")&&o.items.some(h=>h.toLowerCase().includes(s))&&(r=!0),o.type==="table"&&o.rows.some(h=>h.some(d=>d.toLowerCase().includes(s)))&&(r=!0),(o.type==="tip"||o.type==="note")&&o.text.toLowerCase().includes(s)&&(r=!0),r){i=!0;break}}if(i){n.push({section:a,matchType:"block",snippet:a.description});continue}const l=a.faqs.find(o=>o.question.toLowerCase().includes(s)||o.answer.toLowerCase().includes(s));l&&n.push({section:a,matchType:"faq",snippet:l.question})}return n}function b({activeId:t,onSelect:s,searchQuery:n,onSearchChange:a,searchResults:i,isSearching:l,onMobileClose:o}){return e.jsxs("div",{className:"flex h-full flex-col",children:[e.jsx("div",{className:"p-4 border-b",children:e.jsxs("div",{className:"relative",children:[e.jsx(Q,{className:"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"}),e.jsx(N,{placeholder:"Search…",value:n,onChange:r=>a(r.target.value),className:"pl-9 text-sm h-9","data-testid":"input-help-search"}),n&&e.jsx("button",{onClick:()=>a(""),className:"absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground","data-testid":"button-clear-search",children:e.jsx(y,{className:"h-3.5 w-3.5"})})]})}),e.jsx("nav",{className:"flex-1 overflow-y-auto py-2",children:l?e.jsx("div",{className:"px-3 py-2",children:i.length===0?e.jsxs("p",{className:"px-2 py-4 text-center text-xs text-muted-foreground","data-testid":"text-no-results",children:['No results for "',n,'"']}):e.jsxs(e.Fragment,{children:[e.jsxs("p",{className:"mb-1 px-2 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground",children:[i.length," result",i.length!==1?"s":""]}),i.map(({section:r,matchType:h})=>{const d=r.icon;return e.jsxs("button",{onClick:()=>{s(r.id),o?.()},className:f("flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors",t===r.i
1d?"bg-primary/10 text-primary font-medium":"text-foreground/70 hover:bg-muted hover:text-foreground"),"data-testid":`sidebar-item-${r.id}`,children:[e.jsx(d,{className:"h-3.5 w-3.5 shrink-0"}),e.jsx("span",{className:"flex-1 truncate",children:r.title}),h==="faq"&&e.jsx("span",{className:"text-[10px] text-muted-foreground",children:"FAQ"})]},r.id)})]})}):_.map(r=>{const h=g.filter(d=>d.group===r);return h.length===0?null:e.jsxs("div",{className:"mb-1",children:[e.jsx("p",{className:"px-5 pt-3 pb-1 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground",children:r}),h.map(d=>{const c=d.icon,u=t===d.id;return e.jsxs("button",{onClick:()=>{s(d.id),o?.()},className:f("flex w-full items-center gap-2.5 rounded-md mx-2 px-3 py-2 text-left text-sm transition-colors",u?"bg-primary/10 text-primary font-medium":"text-foreground/70 hover:bg-muted hover:text-foreground"),"data-testid":`sidebar-item-${d.id}`,children:[e.jsx(c,{className:"h-3.5 w-3.5 shrink-0"}),e.jsx("span",{className:"truncate",children:d.title}),u&&e.jsx(v,{className:"ml-auto h-3 w-3 shrink-0"})]},d.id)})]},r)})})]})}function we(){const[t,s]=p.useState(g[0].id),[n,a]=p.useState(""),[i,l]=p.useState(!1),o=n.trim().length>0,r=p.useMemo(()=>ae(n),[n]),h=c=>{s(c),o&&a("")};p.useEffect(()=>{const c=window.matchMedia("(min-width: 768px)"),u=q=>{q.matches&&l(!1)};return c.addEventListener("change",u),()=>c.removeEventListener("change",u)},[]);const d=g.find(c=>c.id===t)??g[0];return e.jsxs("div",{className:"flex min-h-screen flex-col bg-background",children:[e.jsx("div",{className:"sticky top-0 z-30 border-b bg-background/95 backdrop-blur",children:e.jsxs("div",{className:"mx-auto flex h-14 max-w-7xl items-center gap-3 px-4 md:px-6",children:[e.jsx(w,{variant:"ghost",size:"icon",className:"md:hidden",onClick:()=>l(c=>!c),"data-testid":"button-mobile-menu",children:i?e.jsx(y,{className:"h-5 w-5"}):e.jsx(P,{className:"h-5 w-5"})}),e.jsxs("div",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[e.jsx($,{className:"h-4 w-4"}),e.jsx("span",{className:"font-serif text-base font-semibold text-foreground",children:"Help Center"}),d&&e.jsxs(e.Fragment,{children:[e.jsx(v,{className:"h-3.5 w-3.5"}),e.jsx("span",{className:"hidden sm:block",children:d.title})]})]})]})}),e.jsxs("div",{className:"mx-auto flex w-full max-w-7xl flex-1 md:divide-x",children:[e.jsx("aside",{className:"hidden w-64 shrink-0 md:flex md:flex-col",children:e.jsx("div",{className:"sticky top-14 h-[calc(100vh-3.5rem)] overflow-hidden",children:e.jsx(b,{activeId:t,onSelect:h,searchQuery:n,onSearchChange:a,searchResults:r,isSearching:o})})}),i&&e.jsxs("div",{className:"fixed inset-0 z-40 md:hidden",children:[e.jsx("div",{className:"absolute inset-0 bg-black/30",onClick:()=>l(!1)}),e.jsxs("div",{className:"absolute inset-y-0 left-0 w-72 bg-background shadow-xl",children:[e.jsxs("div",{className:"h-14 flex items-center px-4 border-b",children:[e.jsx("span",{className:"font-serif text-base font-semibold",children:"Help Center"}),e.jsx(w,{variant:"ghost",size:"icon",className:"ml-auto",onClick:()=>l(!1),children:e.jsx(y,{className:"h-4 w-4"})})]}),e.jsx("div",{className:"h-[calc(100vh-3.5rem)] overflow-hidden",children:e.jsx(b,{activeId:t,onSelect:h,searchQuery:n,onSearchChange:a,searchResults:r,isSearching:o,onMobileClose:()=>l(!1)})})]})]}),e.jsx("main",{className:"flex-1 min-w-0",children:e.jsx("div",{className:"mx-auto max-w-3xl px-6 py-10 md:px-10",children:o&&r.length===0?e.jsxs("div",{className:"py-20 text-center","data-testid":"text-no-results-main",children:[e.jsx(x,{className:"mx-auto mb-4 h-12 w-12 text-muted-foreground/30"}),e.jsx("h2",{className:"mb-2 font-serif text-xl font-semibold",children:"No results found"}),e.jsxs("p",{className:"mb-4 text-muted-foreground text-sm",children:['No articles match "',n,'". Try a different search term.']}),e.jsx("button",{onClick:()=>a(""),className:"text-sm font-medium text-primary underline-offset-4 hover:underline","data-testid":"button-clear-search-main",children:"Clear search"})]}):e.jsx(te,{section:d,query:o?n:""})})})]})]})}export{we as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.