{"id":3367,"date":"2025-11-25T18:48:44","date_gmt":"2025-11-25T18:48:44","guid":{"rendered":"https:\/\/measuresquare.com\/?page_id=3367"},"modified":"2026-01-13T17:44:45","modified_gmt":"2026-01-13T17:44:45","slug":"m2-crm-ob-milestones","status":"publish","type":"page","link":"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/","title":{"rendered":"CRM Onboarding Milestones"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"2560\" height=\"919\" src=\"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png\" alt=\"\" class=\"wp-image-3478\" srcset=\"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png 2560w, https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-300x108.png 300w, https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-1024x367.png 1024w, https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-1536x551.png 1536w, https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-2048x735.png 2048w, https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-564x202.png 564w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n<\/div>\n\n\n<div id=\"ms-crm-onboard-root\"><\/div>\n\n<style>\n    \/* ====== Base ====== *\/\n    #ms-crm-onboard-root {\n        \/* font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n            Roboto, Helvetica, Arial, sans-serif;\n        color: #0f172a; *\/\n    }\n\n    .ms-wrap {\n        max-width: 1300px;\n        margin: 0 auto;\n        padding: 32px 18px 60px;\n    }\n\n    .ms-muted {\n        color: #64748b;\n    }\n\n    .ms-h1 {\n        font-size: 32px;\n        font-weight: 800;\n        letter-spacing: -0.02em;\n        margin: 0 0 8px;\n    }\n\n    .ms-h2 {\n        font-size: 20px;\n        font-weight: 800;\n        margin: 0 0 10px;\n    }\n\n    .ms-h3 {\n        font-size: 16px;\n        font-weight: 800;\n        margin: 0 0 8px;\n    }\n\n    .ms-card {\n        background: #fff;\n        border: 1px solid #e2e8f0;\n        border-radius: 14px;\n        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);\n    }\n\n    .ms-btn {\n        background: #0b84ff;\n        color: #fff;\n        border: none;\n        border-radius: 10px;\n        padding: 10px 14px;\n        font-weight: 700;\n        cursor: pointer;\n        font-size: 14px;\n    }\n\n    .ms-btn.secondary {\n        background: #fff;\n        color: #0b84ff;\n        border: 1.5px solid #cfe6ff;\n    }\n\n    .ms-btn.ghost {\n        background: transparent;\n        color: #0b84ff;\n        border: none;\n    }\n\n    .ms-divider {\n        height: 1px;\n        background: #e2e8f0;\n        margin: 22px 0;\n    }\n\n    .ms-pill {\n        font-size: 12px;\n        font-weight: 700;\n        color: #0b84ff;\n        border: 1px solid #cfe6ff;\n        background: #f5faff;\n        padding: 4px 8px;\n        border-radius: 999px;\n    }\n\n    \/* ====== Step containers ====== *\/\n    .ms-step {\n        margin-top: 14px;\n    }\n\n    .ms-step-head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 10px;\n        margin-bottom: 10px;\n    }\n\n    \/* ====== Welcome ====== *\/\n    .ms-welcome {\n        padding: 20px;\n        display: grid;\n        grid-template-columns: 1.4fr 0.6fr;\n        gap: 14px;\n    }\n\n    .ms-welcome p {\n        line-height: 1.6;\n        margin: 0 0 10px;\n    }\n\n    .ms-welcome-hero {\n        background: linear-gradient(135deg, #f2f8ff, #ffffff);\n        border: 1px dashed #cfe6ff;\n        border-radius: 14px;\n        padding: 14px;\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    \/* ====== Roles ====== *\/\n    .ms-role-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        grid-template-rows: repeat(2, auto);\n        gap: 12px 16px;\n        \/* \u4e0a\u4e0b12px \u5de6\u53f316px\uff0c\u95f4\u8ddd\u66f4\u7f8e\u89c2 *\/\n        margin-top: 20px;\n        max-width: 700px;\n        \/* \u8ba9\u6574\u4f53\u66f4\u96c6\u4e2d\u3001\u7f8e\u89c2 *\/\n        margin-left: auto;\n        margin-right: auto;\n    }\n\n\n    @media (max-width: 1000px) {\n        .ms-role-grid {\n            grid-template-columns: repeat(3, 1fr);\n        }\n\n        .ms-welcome {\n            grid-template-columns: 1fr;\n        }\n    }\n\n    @media (max-width: 520px) {\n        .ms-role-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n\n    .ms-role-btn {\n        padding: 14px 10px;\n        border: 2px solid #bfe1ff;\n        color: #0b84ff;\n        background: #fff;\n        border-radius: 12px;\n        font-weight: 800;\n        cursor: pointer;\n        min-height: 58px;\n    }\n\n    .ms-role-btn.active {\n        background: #0b84ff;\n        color: #fff;\n        border-color: #0b84ff;\n        box-shadow: 0 6px 16px rgba(11, 132, 255, 0.25);\n    }\n\n    \/* ====== Milestones Overview ====== *\/\n    .ms-milestone-row {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 10px;\n        margin-top: 8px;\n    }\n\n    @media (max-width: 900px) {\n        .ms-milestone-row {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n\n    @media (max-width: 520px) {\n        .ms-milestone-row {\n            grid-template-columns: 1fr;\n        }\n    }\n\n    .ms-milestone-card {\n        padding: 14px;\n        border: 2px dashed #bfe1ff;\n        border-radius: 12px;\n        background: #fff;\n        cursor: pointer;\n        transition: 0.15s ease;\n    }\n\n    .ms-milestone-card:hover {\n        transform: translateY(-2px);\n    }\n\n    .ms-milestone-title {\n        font-weight: 900;\n        margin-bottom: 4px;\n    }\n\n    .ms-milestone-meta {\n        display: flex;\n        gap: 8px;\n        flex-wrap: wrap;\n        margin: 6px 0 8px;\n    }\n\n    .ms-milestone-desc {\n        color: #334155;\n        font-size: 14px;\n        line-height: 1.45;\n    }\n\n    \/* =========================================================\n     \u2705 Milestone Detail (Timeline style like your FIG 2)\n     ========================================================= *\/\n    .ms-mdetail-topbar {\n        background: #f3f4f6;\n        border-radius: 10px;\n        padding: 12px 14px;\n        display: grid;\n        grid-template-columns: 1fr 2fr 1fr;\n        gap: 8px;\n        font-weight: 700;\n        color: #475569;\n        font-size: 14px;\n        align-items: center;\n        margin: 6px 0 12px;\n    }\n\n    .ms-mdetail-topbar div:nth-child(2) {\n        visibility: hidden;\n    }\n\n\n    .ms-mdetail-layout {\n        display: grid;\n        grid-template-columns: 260px 1fr;\n        gap: 18px;\n        margin-top: 6px;\n        align-items: start;\n    }\n\n    @media (max-width: 900px) {\n        .ms-mdetail-layout {\n            grid-template-columns: 1fr;\n        }\n    }\n\n    \/* Left info card *\/\n    .ms-mdetail-side {\n        border: 3px dashed #bfe1ff;\n        border-radius: 12px;\n        padding: 14px;\n        background: #fff;\n    }\n\n    .ms-mdetail-side .title {\n        font-weight: 900;\n        font-size: 18px;\n        margin-bottom: 6px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    .ms-mdetail-side .desc {\n        font-size: 14px;\n        line-height: 1.6;\n        color: #334155;\n        margin-top: 10px;\n    }\n\n    .ms-mdetail-side .playbook {\n        width: 100%;\n        margin-top: 14px;\n        padding: 10px 12px;\n        border-radius: 10px;\n        border: 1.5px solid #cfe6ff;\n        background: #0b84ff;\n        color: #fff;\n        font-weight: 800;\n        cursor: pointer;\n    }\n\n    \/* Timeline column *\/\n    .ms-timeline {\n        position: relative;\n        padding-left: 34px;\n    }\n\n    .ms-timeline:before {\n        content: \"\";\n        position: absolute;\n        left: 10px;\n        top: 6px;\n        bottom: 6px;\n        width: 2px;\n        background: #e5e7eb;\n    }\n\n    .ms-tl-item {\n        position: relative;\n        margin-bottom: 14px;\n    }\n\n    .ms-tl-dot {\n        position: absolute;\n        left: -31px;\n        top: 18px;\n        width: 16px;\n        height: 16px;\n        border-radius: 50%;\n        border: 3px solid #e5e7eb;\n        background: #fff;\n    }\n\n    \/* Right lesson cards fixed max width 750px *\/\n    .ms-lesson-card-v2 {\n        max-width: 750px;\n        width: 100%;\n        border: 2px dashed #e5e7eb;\n        border-radius: 12px;\n        background: #fff;\n        padding: 14px 16px;\n        display: grid;\n        grid-template-columns: 1fr auto;\n        gap: 10px;\n        align-items: center;\n    }\n\n    .ms-lesson-card-v2 .l-title {\n        font-size: 18px;\n        font-weight: 900;\n        margin-bottom: 4px;\n    }\n\n    .ms-lesson-card-v2 .l-desc {\n        font-size: 14px;\n        color: #334155;\n        line-height: 1.6;\n    }\n\n    .ms-lesson-card-v2 .l-min {\n        font-size: 14px;\n        color: #475569;\n        text-align: right;\n        margin-bottom: 8px;\n        font-weight: 700;\n    }\n\n    .ms-lesson-card-v2 .l-cta {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-end;\n        gap: 6px;\n        min-width: 150px;\n    }\n\n    .ms-lesson-link {\n        font-weight: 800;\n        color: #0b84ff;\n        background: transparent;\n        border: none;\n        cursor: pointer;\n        font-size: 14px;\n    }\n\n    .ms-lesson-link:hover {\n        text-decoration: underline;\n    }\n\n    \/* ====== Tutorial page ====== *\/\n    .ms-tutorial {\n        padding: 16px;\n        margin-top: 8px;\n    }\n\n    .ms-objectives {\n        border: 2px dashed #0b84ff;\n        border-radius: 12px;\n        padding: 12px;\n        margin-top: 8px;\n    }\n\n    .ms-objectives li {\n        margin: 6px 0;\n    }\n\n    .ms-kb-slot {\n        height: 220px;\n        border-radius: 12px;\n        border: 1.5px dashed #cbd5e1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #64748b;\n        margin-top: 14px;\n        background: #fafafa;\n    }\n\n    .ms-rel-articles a {\n        display: block;\n        color: #0b84ff;\n        text-decoration: none;\n        margin-top: 6px;\n        font-weight: 600;\n    }\n\n    .ms-rel-articles a:hover {\n        text-decoration: underline;\n    }\n\n    \/* ====== Other resources ====== *\/\n    .ms-resource-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 12px;\n        margin-top: 10px;\n    }\n\n    @media (max-width: 900px) {\n        .ms-resource-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n    }\n\n    @media (max-width: 520px) {\n        .ms-resource-grid {\n            grid-template-columns: 1fr;\n        }\n    }\n\n    .ms-resource-card {\n        padding: 10px;\n        border: 2px solid #bfe1ff;\n        border-radius: 12px;\n    }\n\n    .ms-resource-thumb {\n        height: 110px;\n        background: #0b84ff;\n        border-radius: 8px;\n        margin-bottom: 8px;\n    }\n\n    .ms-resource-title {\n        font-weight: 800;\n        margin-bottom: 2px;\n    }\n\n    .ms-resource-date {\n        font-size: 12px;\n        color: #64748b;\n    }\n<\/style>\n\n<script>\n    (function () {\n        \/* =========================================================\n           DATA: Role, lessons\n           ========================================================= *\/\n        const DATA = {\n            roles: [\n                { id: \"admin\", label: \"Admin\" },\n                { id: \"field_sup\", label: \"Field Sup\" },\n                { id: \"pm\", label: \"Project Manager\" },\n                { id: \"installer\", label: \"Installer\" },\n                { id: \"accountant\", label: \"Accountant\" },\n                { id: \"sales_rep\", label: \"Sales Rep\" },\n            ],\n            milestones: [\n                {\n                    id: \"m1\",\n                    title: \"Milestone 1\",\n                    achievement: \"Opportunity Management\",\n                    lessonsCount: 2,\n                    estHours: \"35 minutes\",\n                    roles: [\"admin\", \"sales_rep\", \"pm\"],\n                    desc: \"Learn to build and maintain your contacts, track business development opportunities, and qualify your projects in the CRM.\",\n                    lessons: [\n                        {\n                            id: \"l1\",\n                            title: \"Opportunity Capture\",\n                            minutes: 15,\n                            desc: \"Learn how to record new project opportunities with the right details, contacts, and companies. This lesson helps you build a clean, accurate pipeline so your team can track every lead and avoid missed follow-ups.\",\n                            objectives: [\n                                \"Understanding Companies and Contacts.\",\n                                \"Navigating Contact Records\",\n                                \"Why Proper Contact Management Matters\",\n                                \"Adding Custom Fields\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/opportunity-capture-in-measuresquare-crm\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: [\n                                { title: \"What is a Lead vs Contact?\", url: \"#\" },\n                                { title: \"CRM Navigation Shortcuts\", url: \"#\" },\n                            ]\n                        },\n                        {\n                            id: \"l2\",\n                            title: \"Lead Qualification\",\n                            minutes: 20,\n                            desc: \"Discover how to assess whether an opportunity is worth pursuing based on project fit, scope, client quality, and potential profitability. Strong qualification helps your team focus on bids with the highest win potential.\",\n                            objectives: [\n                                \"The MeasureSquare Scope Analyzer\",\n                                \"A Recommended Qualification Workflow\",\n                                \"Adding Qualification Stages to Your Pipeline\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-lead\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: [{ title: \"Lead Import Template\", url: \"#\" }]\n                        }\n                    ]\n                },\n                {\n                    id: \"m2\",\n                    title: \"Milestone 2\",\n                    achievement: \"Takeoff & Bid Management\",\n                    lessonsCount: 6,\n                    estHours: \"2 hours\",\n                    roles: [\"admin\", \"sales_rep\"],\n                    desc: \"Master the full workflow, from takeoff to pricing to proposals. This milestone shows you how to streamline your bidding process and drastically cut down your estimating time.\",\n                    lessons: [\n                        {\n                            id: \"l3\",\n                            title: \"Takeoff\",\n                            minutes: 15,\n                            desc: \"Learn how MeasureSquare\u2019s takeoff tools integrate with the CRM to eliminate double-entry, improve accuracy, and automate downstream tasks. This lesson covers using MeasureSquare Cloud, handling materials and labor correctly, and leveraging MeasureSquare Web for quick edits and seamless estimating workflows.\",\n                            objectives: [\"Takeoff Platforms and MeasureSquare Cloud\",\n                                \"Figuring Material and Labor Products in MeasureSquare\",\n                                \"MeasureSquare Web\"],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                        {\n                            id: \"l4\",\n                            title: \"Pricing\",\n                            minutes: 15,\n                            desc: \"Learn how to manage pricing in MeasureSquare CRM using project-specific price requests or predefined price lists. This lesson shows you how to automate vendor pricing, enter and store product costs correctly, and streamline pricing across quotes, bids, and purchasing for fast, consistent, and accurate estimates.\",\n                            objectives: [\"Project-Specific Price Requests\",\n                                \"Entering Pricing Into the System\",\n                                \"Predefined Price Lists \/ Price Books\"],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-pricing\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                        {\n                            id: \"l5\",\n                            title: \"Estimating (Bid)\",\n                            minutes: 30,\n                            desc: \"Learn how to build proposals using Quotes for quick pricing or Bids for advanced estimating. This lesson covers importing takeoff data, customizing bid worksheets, managing breakouts and alternates, adjusting markup or margin, and preparing polished client-ready proposals using MeasureSquare CRM.\",\n                            objectives: [\"Estimating (Worksheet Functions)\", \"Understanding the Bid Module\", \"Configuring Product Breakouts\", \"Alternates (AKA \u201cOptions\u201d)\", \"Customer & Document Info\"],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-estimating-bid\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                        {\n                            id: \"l6\",\n                            title: \"Presentation\",\n                            minutes: 30,\n                            desc: \"Learn how to customize professional, client-ready proposals using MeasureSquare CRM\u2019s template tools. This lesson covers design settings, content editing, HTML customization, and managing templates across your team\u2014helping you create polished, consistent bids and send tailored proposals to multiple customers with ease.\",\n                            objectives: [\"Templates: The Foundation of Your Proposal Design\", \"Bid Design Settings and Content Menu\", \"HTML Source Code Customization\", \"Sending Proposals to Multiple Customers\"],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-presentation\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                        {\n                            id: \"l7\",\n                            title: \"Follow-Ups\",\n                            minutes: 5,\n                            desc: \"Your team can use MeasureSquare CRM to manage bids, quotes, and customer communication. Establishing a consistent follow-up process ensures that nothing slips through the cracks and that your clients always feel supported and informed.\",\n                            objectives: [\"Following Up Within a Bid\", \"Why Following Up Matters\", \"Using CRM Tools for Follow-Ups\"],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-follow-ups\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                        {\n                            id: \"l8\",\n                            title: \"Booking the Project\",\n                            minutes: 10,\n                            desc: \"Winning a job in MeasureSquare CRM means the job is moving forward and triggers automations that update financials, activate post-award tools, and prepare your team for execution. This section explains how to finalize a won project, what changes inside MeasureSquare CRM after booking, and best practices for managing awarded work.\",\n                            objectives: [\"Steps to Finalize a Won Project\", \"What Changes After a Project Is Awarded\", \"Additional Notes & Best Practices\"],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-booking-the-project\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        }\n                    ]\n                },\n                {\n                    id: \"m3\",\n                    title: \"Milestone 3\",\n                    achievement: \"Procurement & Installation\",\n                    lessonsCount: 5,\n                    estHours: \"1.5 hour\",\n                    roles: [\"admin\", \"sales_rep\", \"pm\"],\n                    desc: \"Get your field teams running smoothly with tools for material purchasing, labor scheduling, and onsite coordination. This is where your jobs move from planning to production.\",\n                    lessons: [\n                        {\n                            id: \"l9\",\n                            title: \"Submittal Process\",\n                            minutes: 5,\n                            desc: \"Learn how MeasureSquare CRM streamlines the submittal process by generating cover pages, pulling product data directly from your project, and organizing spec sheets through links or PDF uploads. This lesson covers creating centralized submittal packages and highlights upcoming module enhancements designed to further modernize your workflow.\",\n                            objectives: [\n                                \"Centralized Submittal Management\",\n                                \"Attaching Specifications\",\n                                \"A Growing Feature Set\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: [\n                                { title: \"What is a Lead vs Contact?\", url: \"#\" },\n                                { title: \"CRM Navigation Shortcuts\", url: \"#\" },\n                            ]\n                        },\n                        {\n                            id: \"l10\",\n                            title: \"Purchasing Process\",\n                            minutes: 15,\n                            desc: \"Learn how MeasureSquare CRM streamlines purchasing by automatically generating Purchase Orders from your project data. This lesson covers PO creation methods, the importance of Vendor assignment, tracking document and material status, and using company-wide views to manage orders, deliveries, and purchasing priorities efficiently.\",\n                            objectives: [\n                                \"Creating Purchase Orders\",\n                                \"Vendor Data: The Key to Automation\",\n                                \"Tracking & Managing Purchase Orders\",\n                                \"Viewing All Purchase Orders Across Projects\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-purchasing\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: [{ title: \"Lead Import Template\", url: \"#\" }]\n                        },\n                        {\n                            id: \"l11\",\n                            title: \"Installation Documentation & Scheduling\",\n                            minutes: 30,\n                            desc: \"Learn how MeasureSquare CRM manages labor through Work Orders\u2014whether created manually or automatically\u2014and why Trades drive automation. This lesson also covers template customization, tracking work completion, and upcoming scheduling tools that coordinate crews, timelines, and project tasks across your operations.\",\n                            objectives: [\n                                \"Work Orders\",\n                                \"Installation Schedule\",\n                                \"Installation Schedule Views\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-installation-documentation-scheduling\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                        {\n                            id: \"l12\",\n                            title: \"Mobile Onsite Tracking\",\n                            minutes: 15,\n                            desc: \"Learn how field teams can use MeasureSquare CRM\u2019s mobile tools to track onsite activity in real time. This lesson covers recording site visits, capturing photos and notes, updating job status, and ensuring accurate documentation from the field. Mobile onsite tracking helps your team stay aligned, reduce miscommunication, and keep project progress visible across the organization.\",\n                            objectives: [\n                                \"What I can do with MeasureSquare CRM Mobile\",\n                                \"How MeasureSquare CRM Mobile Differs from JobTrakr and the Upcoming Field App\"\n\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-crm-mobile-solution\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                        {\n                            id: \"l13\",\n                            title: \"Change Order Management\",\n                            minutes: 20,\n                            desc: \"Discover how MeasureSquare CRM simplifies Change Order creation\u2014automatic or manual\u2014while tracking revisions, approvals, and financial impact. This lesson covers managing versions, generating downstream POs, Work Orders, and invoices, and integrating approved changes into SOVs to keep projects accurate, organized, and profitable.\",\n                            objectives: [\n                                \"Creating Change Orders\",\n                                \"Managing Change Orders\",\n                                \"Approved \/ Accepted Change Orders\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-change-order-management-and-tracking\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                    ]\n                },\n                {\n                    id: \"m4\",\n                    title: \"Milestone 4\",\n                    achievement: \"Billing & Financials\",\n                    lessonsCount: 4,\n                    estHours: \"1.5 hour\",\n                    roles: [\"admin\", \"sales_rep\", \"pm\"],\n                    desc: \"Say goodbye to messy spreadsheets. Learn how project-based financials, billing, and reporting in the CRM keep your numbers clean, accurate, and always up to date.\",\n                    lessons: [\n                        {\n                            id: \"l14\",\n                            title: \"Invoicing\",\n                            minutes: 10,\n                            desc: \"MeasureSquare CRM centralizes project finances, letting you create invoices, track payments, and manage bills and expenses\u2014all linked to projects. Sync with QuickBooks Online, generate POs from orders, and monitor profitability. Upcoming WIP reporting will provide real-time insights into project progress, costs, and over\/under billing.\",\n                            objectives: [\n                                \"Creating and Managing Invoices\",\n                                \"Sending Invoices to Customers\",\n                                \"Recording Payments\",\n                                \"QuickBooks Online Integration\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-invoicing\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: [\n                                { title: \"What is a Lead vs Contact?\", url: \"#\" },\n                                { title: \"CRM Navigation Shortcuts\", url: \"#\" },\n                            ]\n                        },\n                        {\n                            id: \"l15\",\n                            title: \"Progress Billing\",\n                            minutes: 30,\n                            desc: \"MeasureSquare CRM streamlines progress billing with manual or automated SoV creation. Import Bids, Quotes, POs, WOs, and Change Orders to generate AIA-compliant schedules, track monthly billing, and create invoices instantly. Automation ensures accuracy, consistency, and efficiency, connecting billing to real project activity and financial workflows.\",\n                            objectives: [\n                                \"Manual SoV Creation\",\n                                \"Automated SoV Creation\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-progress-billing\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: [{ title: \"Lead Import Template\", url: \"#\" }]\n                        },\n                        {\n                            id: \"l16\",\n                            title: \"Financials\",\n                            minutes: 30,\n                            desc: \"Learn how MeasureSquare CRM manages financial workflows from project award through final billing. This lesson explains how job values flow into financials, how costs, invoices, and payments are tracked, and how profitability is calculated. With integrated financial data, your team can monitor project health, control margins, and ensure accurate reporting across your operations.\",\n                            objectives: [\n                                \"Recording Bills and Expenses\",\n                                \"Project-Level Financial Tracking\",\n                                \"Accounting System Integrations\",\n                                \"Work in Progress (WIP) Report \u2014 Coming Soon\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-financials\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        },\n                        {\n                            id: \"l17\",\n                            title: \"Reporting & Analytics\",\n                            minutes: 15,\n                            desc: \"MeasureSquare CRM\u2019s Reporting and Analytics tools give teams clear, actionable insights. Generate Sales, Project, Company, Contact, Purchase, and Forecast reports, then visualize trends on the Analytics Dashboard. Track performance, spot opportunities, and make data-driven decisions with customizable filters, visualizations, and up-to-date metrics across your organization.\",\n                            objectives: [\n                                \"Reports: Your Custom Business Insights\",\n                                \"Analytics: Visual Performance Dashboard\"\n                            ],\n                            url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-guide-reporting-analytics\",\n                            kbEmbed: `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`,\n                            related: []\n                        }\n                    ]\n                },\n            ],\n            otherResources: [\n                {\n                    title: \"CRM Youtube Playlist\",\n                    date: \"Nov 11, 2025\",\n                    url: \"https:\/\/www.youtube.com\/playlist?list=PLTdAHW7WN17uj-KnkFGCSg0SvyC_6KTT5\",\n                    img: \"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/youtube-icon-e1764788270218.png\"\n                },\n                {\n                    title: \"CRM Knowledge Base\",\n                    date: \"Dec 15, 2025\",\n                    url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/measure-square\/measuresquare-crm\",\n                    img: \"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/knowledge-base-icon.png\"\n                },\n                {\n                    title: \"CRM Step-by-Step Workflow\",\n                    date: \"Jan 20, 2026\",\n                    url: \"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-best-practices-workflow\",\n                    img: \"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/workflow-icon.png\"\n                },\n                {\n                    title: \"MeasureSquare Facebook User Group\",\n                    date: \"Feb 10, 2026\",\n                    url: \"https:\/\/www.facebook.com\/groups\/measuresquareusers\",\n                    img: \"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/facebook-group-icon.png\"\n                },\n            ]\n        };\n\n        const root = document.getElementById(\"ms-crm-onboard-root\");\n\n        const state = {\n            step: \"milestones\",      \/\/ welcome | role | milestones | milestoneDetail | lessonDetail\n            roleId: null,\n            milestoneId: null,\n            lessonId: null,\n            completed: new Set()\n        };\n\n        function el(html) {\n            const t = document.createElement(\"template\");\n            t.innerHTML = html.trim();\n            return t.content.firstChild;\n        }\n\n        function render() {\n            root.innerHTML = \"\";\n            root.appendChild(el(`\n      <div class=\"ms-wrap\">\n        <!--${renderBreadcrumb()} -->\n        <!-- ${renderWelcome()} -->\n        <!-- ${renderRoleSelect()} -->\n        ${renderMilestonesOverview()}\n        ${renderMilestoneDetailTimeline()}\n        ${renderLessonDetail()}\n        ${renderOtherResources()}\n      <\/div>\n    `));\n            bindEvents();\n        }\n\n        function renderBreadcrumb() {\n            const crumbs = [];\n            crumbs.push(`Onboarding`);\n            if (state.roleId) {\n                crumbs.push(DATA.roles.find(r => r.id === state.roleId)?.label || state.roleId);\n            }\n            if (state.milestoneId) {\n                const m = DATA.milestones.find(x => x.id === state.milestoneId);\n                if (m) crumbs.push(m.title);\n            }\n            if (state.lessonId) {\n                const l = findLesson(state.lessonId);\n                if (l) crumbs.push(l.title);\n            }\n            return `\n      <div class=\"ms-muted\" style=\"font-size:13px; margin-bottom:10px;\">\n        ${crumbs.join(\"  >  \")}\n      <\/div>\n    `;\n        }\n\n        function renderWelcome() {\n            if (state.step !== \"welcome\") return \"\";\n\n            return `\n      <section class=\"ms-step ms-card ms-welcome\">\n        <div>\n          <h1 class=\"ms-h1\">Welcome to MeasureSquare CRM \ud83c\udf89<\/h1>\n          <p class=\"ms-muted\">\n            Your MeasureSquare CRM adventure starts here. Learn at your own pace, skip ahead anytime, and follow the path built for your role. \n            Every click gets you closer to CRM mastery and bigger wins.\n          <\/p>\n        <!--  <p class=\"ms-muted\">\n            You\u2019ll start by selecting your role, then complete milestones and lessons.\n          <\/p> -->\n          <div style=\"display:flex; gap:8px; margin-top:30px;\">\n            <!--<button class=\"ms-btn\" data-action=\"start\">Start Onboarding<\/button>-->\n            <button class=\"ms-btn secondary\" data-action=\"skip-role\">View Milestones<\/button> \n          <\/div>\n        <\/div>\n        <div class=\"ms-welcome-hero\">\n          <div class=\"ms-h3\">How it works<\/div>\n          <div class=\"ms-muted\" style=\"font-size:14px; line-height:1.55;\">\n            <!--1) Choose your role \u2705<br\/>-->\n            1) Milestones Overview \u2705<br\/>\n            2) Finish lessons \u2705<br\/>\n            3) Become a CRM pro \u2705\n          <\/div>\n        <\/div>\n      <\/section>\n    `;\n        }\n\n        function renderRoleSelect() {\n            if (state.step !== \"role\") return \"\";\n            return `\n      <section class=\"ms-step\">\n        <div class=\"ms-step-head\">\n          <h2 class=\"ms-h2\">Choose your role<\/h2>\n          <button class=\"ms-btn ghost\" data-action=\"back-welcome\">\u2190 Back<\/button>\n        <\/div>\n\n        <p class=\"ms-muted\" style=\"margin-top:-10px; margin-bottom:16px; font-size:14px;\">\n            Please select the role that best matches your work. This helps us deliver a tailored onboarding path designed specifically for your responsibilities.\n        <\/p>\n\n\n        <div class=\"ms-role-grid\">\n          ${DATA.roles.map(r => `\n            <button class=\"ms-role-btn ${state.roleId === r.id ? 'active' : ''}\" data-role=\"${r.id}\">\n              ${r.label}\n            <\/button>\n          `).join(\"\")}\n        <\/div>\n\n        <div style=\"margin-top:30px; text-align:center;\">\n            <button class=\"ms-btn\" data-action=\"confirm-role\">Continue<\/button>\n        <\/div>\n      <\/section>\n    `;\n        }\n\n        function renderMilestonesOverview() {\n            if (state.step !== \"milestones\") return \"\";\n            const list = state.roleId\n                ? DATA.milestones.filter(m => m.roles.includes(state.roleId))\n                : DATA.milestones;\n\n            return `\n             <div class=\"ms-card\" style=\"border: 1px dashed #cfe6ff; padding: 20px; margin-bottom: 26px;\">\n  <h2 class=\"ms-h2\" style=\"text-align:center; margin-top:0;\">Before You Start<\/h2>\n  <p class=\"ms-muted\" style=\"line-height:2; font-size:16px;\">\n    Welcome to your self-onboarding hub, your step-by-step path to getting up and running with MeasureSquare CRM, from lead intake all the way to reporting. \n    Everything here is tailored to your role, so you\u2019ll always know exactly what to focus on. \n    Set aside a little time each week and dive in. The more you practice, the faster you\u2019ll build real confidence; these exercises are where the learning sticks.\n  <\/p>\n  <p class=\"ms-muted\" style=\"line-height:2; font-size:16px;\">\n    Prefer a more hands-on approach? You can reach out anytime for guided onboarding. And no matter how you learn, our support team is always here to help with questions big or small.\n    <strong> support@measuresquare.com<\/strong> to clarify edge cases and fill knowledge gaps.\n    Please contact <strong>crmteam@measuresquare.com<\/strong> with any questions or comments.<br>\n    We'll talk to you soon!Happy learning!\n  <\/p>\n<\/div>  \n<hr style=\"border:0; border-top:1px solid #e5e7eb; margin:40px 0;\">\n\n<div class=\"ms-card\" style=\"border: 1px dashed #cfe6ff; padding: 20px; margin-bottom: 26px;\">\n  <h2 class=\"ms-h2\" style=\"text-align:center; margin-top:0;\">Learning Path<\/h2>\n  <p class=\"ms-muted\" style=\"line-height:2; font-size:16px;\">\n  To kickoff your onboarding, we suggest reviewing this article to ensure your CRM account is set up correctly and your team is aligned on the implementation approach. \n  <!-- Button -->\n\n    <a href=\"https:\/\/measuresquare.zohodesk.com\/portal\/en\/kb\/articles\/crm-user-manual-getting-started\"\n       target=\"_blank\"\n       rel=\"noopener noreferrer\"\n       style=\"\n         display:inline-flex;\n         align-items:center;\n         gap:6px;\n         padding:5px 9px;\n         background:#1e88ff;\n         color:#ffffff;\n         border-radius:999px;\n         font-size:14px;\n         font-weight:600;\n         text-decoration:none;\n       \">\n      Click Here to Begin Your Onboarding Journey\n    <\/a>\n  <\/p>\n<\/div> \n\n      <section class=\"ms-step\">\n\n          <div style=\"display:flex; gap:8px;\">\n            <!-- <button class=\"ms-btn secondary\" data-action=\"change-role\">Change Role<\/button> -->\n            <!--<button class=\"ms-btn ghost\" data-action=\"back-role\">\u2190 Back<\/button> -->\n          <\/div>\n\n        <div class=\"ms-milestone-row\">\n          ${list.map(m => `\n            <div class=\"ms-milestone-card\" data-milestone=\"${m.id}\">\n              <div style=\"display:flex; align-items:center; justify-content:space-between;\">\n                <div class=\"ms-milestone-title\">${m.title}<\/div>\n                ${isMilestoneCompleted(m) ? `<span class=\"ms-pill\">COMPLETED<\/span>` : ``}\n              <\/div>\n            <h2 class=\"ms-muted\" style=\"font-size:18px; margin-top:2px;\">\n                ${m.achievement}\n            <\/h2>\n\n              <div class=\"ms-milestone-meta\">\n                <span class=\"ms-pill\">${m.lessonsCount} lessons<\/span>\n                <span class=\"ms-pill\">${m.estHours}<\/span>\n              <\/div>\n              <div class=\"ms-milestone-desc\">${m.desc}<\/div>\n            <\/div>\n          `).join(\"\")}\n        <\/div>\n      <\/section>\n    `;\n        }\n\n        \/* ====== \u2705 Milestone Detail Timeline Version ====== *\/\n        function renderMilestoneDetailTimeline() {\n            if (state.step !== \"milestoneDetail\") return \"\";\n            const m = DATA.milestones.find(x => x.id === state.milestoneId);\n            if (!m) return \"\";\n\n            return `\n      <section class=\"ms-step\">\n        <div class=\"ms-step-head\">\n          <div>\n            <h2 class=\"ms-h2\">${m.title}<\/h2>\n            <!-- <div class=\"ms-muted\" style=\"font-size:14px;\">\n              ${m.lessonsCount} lessons \u00b7 Roles: ${m.roles.map(id => DATA.roles.find(r => r.id === id)?.label).join(\", \")} \u00b7 ${m.estHours}\n            <\/div> -->\n          <\/div>\n          <button class=\"ms-btn ghost\" data-action=\"back-milestones\">\u2190 Back to Milestones<\/button>\n        <\/div>\n\n        <!-- top info bar like fig2 -->\n        <div class=\"ms-mdetail-topbar\">\n          <div style=\"text-align:center;\">${m.lessonsCount} Lessons<\/div>\n          <div style=\"text-align:center;\">\n            ${m.roles.map(id => DATA.roles.find(r => r.id === id)?.label).join(\", \")}\n          <\/div>\n          <div style=\"text-align:center;\">${m.estHours}<\/div>\n        <\/div>\n\n        <div class=\"ms-mdetail-layout\">\n          <!-- LEFT SIDEBAR -->\n          <div class=\"ms-mdetail-side ms-card\">\n            <div class=\"title\">\n              <span>${m.title}<\/span>\n              <span class=\"ms-muted\" style=\"font-size:14px;\">${m.lessonsCount} lessons<\/span>\n            <\/div>\n            <div class=\"ms-muted\" style=\"font-weight:800; margin-top:2px;\">\n                ${m.achievement}\n            <\/div>\n            <div class=\"desc\">${m.desc}<\/div>\n            <!-- <button class=\"playbook\">Download Playbook<\/button> -->\n          <\/div>\n\n          <!-- RIGHT TIMELINE -->\n          <div class=\"ms-timeline\">\n            ${m.lessons.length ? m.lessons.map(lesson => `\n              <div class=\"ms-tl-item\">\n                <div class=\"ms-tl-dot\"><\/div>\n                <div class=\"ms-lesson-card-v2 ms-card\">\n                  <div>\n                    <div class=\"l-title\" style=\"display:flex; align-items:center; gap:6px; position:relative;\">\n  ${lesson.title}\n\n  <!-- ICON + Tooltip Wrapper -->\n  <span style=\"position:relative; display:inline-block;\">\n\n    <!-- SVG icon -->\n    <span style=\"display:inline-flex; align-items:center; justify-content:center;\n                 width:16px; height:16px; border-radius:50%; background:#0b84ff;\n                 color:#fff; font-size:12px; cursor:pointer;\">\n      i\n    <\/span>\n\n    <!-- Tooltip bubble -->\n    <span style=\"\n        visibility:hidden;\n        opacity:0;\n        transition:opacity .15s ease;\n\n        position:absolute;\n        top:22px;\n        left:0;\n        z-index:999;\n\n        background:#ffffff;\n        color:#334155;\n        padding:8px 12px;\n        border-radius:10px;\n        font-size:13px;\n        line-height:1.4;\n        width:400px;\n        box-shadow:0 4px 12px rgba(0,0,0,0.12);\n        border:1px solid #e2e8f0;\n      \">\n      ${lesson.desc}\n    <\/span>\n\n  <\/span>\n\n  <!-- Hover rule -->\n  <style>\n    \/* keep inline but safe *\/\n    .l-title span:hover span:last-child {\n      visibility: visible !important;\n      opacity: 1 !important;\n    }\n  <\/style>\n<\/div>\n\n                <div class=\"l-desc\">\n    <div style=\"font-weight:700; margin-bottom:4px;\">\n        By the end of this lesson, you will learn to:\n    <\/div>\n    <ul style=\"margin:4px 0 0 18px; list-style:disc;\">\n       ${lesson.objectives.map(o => `<li>\u2705${o}<\/li>`).join(\"\")}\n    <\/ul>\n<\/div>\n\n                  <\/div>\n                  <div class=\"l-cta\">\n                    <div class=\"l-min\">${lesson.minutes} minutes<\/div>\n                    <a class=\"ms-btn\" \n   href=\"${lesson.url}\" \n   target=\"_blank\" \n   style=\"text-decoration:none; display:inline-block;\">\n   Begin Lesson \u2192\n<\/a>\n\n                    ${state.completed.has(lesson.id) ? `<span class=\"ms-pill\">DONE<\/span>` : ``}\n                  <\/div>\n                <\/div>\n              <\/div>\n            `).join(\"\") : `<div class=\"ms-muted\">Lessons for this milestone are coming soon.<\/div>`}\n          <\/div>\n        <\/div>\n      <\/section>\n    `;\n        }\n\n        function renderLessonDetail() {\n            if (state.step !== \"lessonDetail\") return \"\";\n            const lesson = findLesson(state.lessonId);\n            const milestone = findMilestoneByLesson(state.lessonId);\n            if (!lesson || !milestone) return \"\";\n\n            return `\n      <section class=\"ms-step ms-card ms-tutorial\">\n        <div class=\"ms-step-head\">\n          <div>\n            <h2 class=\"ms-h2\">${lesson.title}<\/h2>\n            <div class=\"ms-muted\" style=\"font-size:14px;\">\n              ${lesson.minutes} minutes \u00b7 ${milestone.title}\n            <\/div>\n          <\/div>\n          <div style=\"display:flex; gap:8px;\">\n            <button class=\"ms-btn secondary\" data-action=\"complete-lesson\">Mark as Completed<\/button>\n            <button class=\"ms-btn ghost\" data-action=\"back-milestone\">\u2190 Back<\/button>\n          <\/div>\n        <\/div>\n\n        <div class=\"ms-objectives\">\n          <div class=\"ms-h3\">By the end of this lesson, you will learn to:<\/div>\n          <ul style=\"margin:8px 0 0 18px;\">\n            ${lesson.objectives.map(o => `<li>${o}<\/li>`).join(\"\")}\n          <\/ul>\n        <\/div>\n\n        ${lesson.kbEmbed || `<div class=\"ms-kb-slot\">Insert User guide article \/ video here<\/div>`}\n\n        <div style=\"margin-top:14px;\">\n          <div class=\"ms-h3\">Relevant Articles<\/div>\n          <div class=\"ms-rel-articles\">\n            ${lesson.related && lesson.related.length\n                    ? lesson.related.map(a => `<a href=\"${a.url}\" target=\"_blank\" rel=\"noopener\">${a.title}<\/a>`).join(\"\")\n                    : `<div class=\"ms-muted\" style=\"font-size:14px; margin-top:6px;\">No related articles yet.<\/div>`\n                }\n          <\/div>\n        <\/div>\n      <\/section>\n    `;\n        }\n\n        function renderOtherResources() {\n            if ([\"welcome\", \"role\"].includes(state.step)) return \"\";\n            return `\n      <section class=\"ms-step\" style=\"margin-top:26px;\">\n        <div class=\"ms-divider\"><\/div>\n        <h2 class=\"ms-h2\" style=\"text-align:center;\">Other Resources<\/h2>\n\n        <div class=\"ms-resource-grid\">\n          ${DATA.otherResources.map(r => `\n            <a class=\"ms-resource-card ms-card\" href=\"${r.url}\" target=\"_blank\" rel=\"noopener\" style=\"text-decoration:none; color:inherit;\">\n              <div class=\"ms-resource-thumb\" style=\"\n                background-image:url('${r.img}');\n                background-size:cover;\n                background-position:center;\n              \"><\/div>\n              <div class=\"ms-resource-title\">${r.title}<\/div>\n              <!-- <div class=\"ms-resource-date\">${r.date}<\/div> -->\n            <\/a>\n          `).join(\"\")}\n        <\/div>\n      <\/section>\n    `;\n        }\n\n        \/* ====== HELPERS ====== *\/\n        function findLesson(lessonId) {\n            for (const m of DATA.milestones) {\n                const l = m.lessons.find(x => x.id === lessonId);\n                if (l) return l;\n            }\n            return null;\n        }\n        function findMilestoneByLesson(lessonId) {\n            return DATA.milestones.find(m => m.lessons.some(l => l.id === lessonId));\n        }\n        function isMilestoneCompleted(m) {\n            if (!m.lessons.length) return false;\n            return m.lessons.every(l => state.completed.has(l.id));\n        }\n\n        \/* ====== EVENTS ====== *\/\n        function bindEvents() {\n            root.querySelectorAll(\"[data-action]\").forEach(btn => {\n                btn.addEventListener(\"click\", () => {\n                    const action = btn.getAttribute(\"data-action\");\n                    switch (action) {\n                        case \"start\": state.step = \"role\"; break;\n                        case \"skip-role\": state.step = \"milestones\"; state.roleId = null; break;\n                        case \"back-welcome\": state.step = \"welcome\"; break;\n                        case \"back-role\": state.step = \"role\"; break;\n                        case \"change-role\": state.step = \"role\"; break;\n                        case \"confirm-role\": state.step = \"milestones\"; break;\n                        case \"back-milestones\": state.step = \"milestones\"; state.milestoneId = null; break;\n                        case \"back-milestone\": state.step = \"milestoneDetail\"; state.lessonId = null; break;\n                        case \"complete-lesson\":\n                            if (state.lessonId) state.completed.add(state.lessonId);\n                            break;\n                    }\n                    render();\n                });\n            });\n\n            root.querySelectorAll(\"[data-role]\").forEach(btn => {\n                btn.addEventListener(\"click\", () => {\n                    state.roleId = btn.getAttribute(\"data-role\");\n                    render();\n                });\n            });\n\n            root.querySelectorAll(\"[data-milestone]\").forEach(card => {\n                card.addEventListener(\"click\", () => {\n                    state.milestoneId = card.getAttribute(\"data-milestone\");\n                    state.step = \"milestoneDetail\";\n                    render();\n                });\n            });\n\n            root.querySelectorAll(\"[data-lesson]\").forEach(btn => {\n                btn.addEventListener(\"click\", (e) => {\n                    e.stopPropagation();\n                    state.lessonId = btn.getAttribute(\"data-lesson\");\n                    state.step = \"lessonDetail\";\n                    render();\n                });\n            });\n        }\n\n        render();\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/fronteditor.php","meta":{"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"class_list":["post-3367","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.1 (Yoast SEO v24.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CRM Onboarding Milestones - measuresquare.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CRM Onboarding Milestones\" \/>\n<meta property=\"og:url\" content=\"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/\" \/>\n<meta property=\"og:site_name\" content=\"measuresquare.com\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-13T17:44:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"919\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/\",\"url\":\"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/\",\"name\":\"CRM Onboarding Milestones - measuresquare.com\",\"isPartOf\":{\"@id\":\"https:\/\/measuresquare.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png\",\"datePublished\":\"2025-11-25T18:48:44+00:00\",\"dateModified\":\"2026-01-13T17:44:45+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/#primaryimage\",\"url\":\"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png\",\"contentUrl\":\"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png\",\"width\":2560,\"height\":919},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/measuresquare.com\/#website\",\"url\":\"https:\/\/measuresquare.com\/\",\"name\":\"measuresquare.com\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/measuresquare.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CRM Onboarding Milestones - measuresquare.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/","og_locale":"en_US","og_type":"article","og_title":"CRM Onboarding Milestones","og_url":"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/","og_site_name":"measuresquare.com","article_modified_time":"2026-01-13T17:44:45+00:00","og_image":[{"width":2560,"height":919,"url":"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/","url":"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/","name":"CRM Onboarding Milestones - measuresquare.com","isPartOf":{"@id":"https:\/\/measuresquare.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/#primaryimage"},"image":{"@id":"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/#primaryimage"},"thumbnailUrl":"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png","datePublished":"2025-11-25T18:48:44+00:00","dateModified":"2026-01-13T17:44:45+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/measuresquare.com\/m2-crm-ob-milestones\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/measuresquare.com\/m2-crm-ob-milestones\/#primaryimage","url":"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png","contentUrl":"https:\/\/measuresquare.com\/wp-content\/uploads\/2025\/12\/Frame-182-2-scaled.png","width":2560,"height":919},{"@type":"WebSite","@id":"https:\/\/measuresquare.com\/#website","url":"https:\/\/measuresquare.com\/","name":"measuresquare.com","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/measuresquare.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/measuresquare.com\/wp-json\/wp\/v2\/pages\/3367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/measuresquare.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/measuresquare.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/measuresquare.com\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/measuresquare.com\/wp-json\/wp\/v2\/comments?post=3367"}],"version-history":[{"count":87,"href":"https:\/\/measuresquare.com\/wp-json\/wp\/v2\/pages\/3367\/revisions"}],"predecessor-version":[{"id":3838,"href":"https:\/\/measuresquare.com\/wp-json\/wp\/v2\/pages\/3367\/revisions\/3838"}],"wp:attachment":[{"href":"https:\/\/measuresquare.com\/wp-json\/wp\/v2\/media?parent=3367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}