[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"kb:\u002Fguides\u002Fcontextual-help":3,"kb-search-sections":214,"kb-nav":271},{"id":4,"title":5,"body":6,"description":207,"extension":39,"icon":208,"meta":209,"navigation":158,"order":61,"path":210,"screen":197,"seo":211,"stem":212,"__hash__":213},"guides\u002Fguides\u002Fcontextual-help.md","Linking help to a screen",{"type":7,"value":8,"toc":203},"minimark",[9,13,17,22,106,117,121,192,199],[10,11,5],"h1",{"id":12},"linking-help-to-a-screen",[14,15,16],"p",{},"The knowledge layer can surface the right guide directly inside the product, so\nusers never hit a dead end.",[18,19,21],"h2",{"id":20},"how-it-works","How it works",[23,24,25,70],"ol",{},[26,27,28,29,33,34],"li",{},"Give the guide a stable ",[30,31,32],"code",{},"screen"," key in its front-matter:",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-md shiki shiki-themes github-light github-dark","---\ntitle: Managing invoices\nscreen: billing.invoices\n---\n","md","",[30,42,43,52,59,65],{"__ignoreMap":40},[44,45,48],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sq-ep","---\n",[44,53,55],{"class":46,"line":54},2,[44,56,58],{"class":57},"sVt8B","title: Managing invoices\n",[44,60,62],{"class":46,"line":61},3,[44,63,64],{"class":57},"screen: billing.invoices\n",[44,66,68],{"class":46,"line":67},4,[44,69,51],{"class":50},[26,71,72,73,76,77],{},"Drop the ",[30,74,75],{},"ContextualHelp"," component on the matching screen:",[35,78,82],{"className":79,"code":80,"language":81,"meta":40,"style":40},"language-vue shiki shiki-themes github-light github-dark","\u003CContextualHelp screen=\"billing.invoices\" \u002F>\n","vue",[30,83,84],{"__ignoreMap":40},[44,85,86,89,92,96,99,103],{"class":46,"line":47},[44,87,88],{"class":57},"\u003C",[44,90,75],{"class":91},"s9eBZ",[44,93,95],{"class":94},"sScJk"," screen",[44,97,98],{"class":57},"=",[44,100,102],{"class":101},"sZZnC","\"billing.invoices\"",[44,104,105],{"class":57}," \u002F>\n",[14,107,108,109,111,112,116],{},"The component looks up the guide whose ",[30,110,32],{}," matches and renders a help link\nto it. If no guide matches that key, it renders ",[113,114,115],"strong",{},"nothing"," — so a screen never\nshows a broken help link.",[18,118,120],{"id":119},"variants","Variants",[35,122,124],{"className":79,"code":123,"language":81,"meta":40,"style":40},"\u003C!-- Custom label -->\n\u003CContextualHelp screen=\"billing.invoices\" label=\"How invoicing works\" \u002F>\n\n\u003C!-- Inline text link inside a sentence -->\nSee \u003CContextualHelp screen=\"billing.invoices\" inline label=\"the invoicing guide\" \u002F>.\n",[30,125,126,132,154,160,165],{"__ignoreMap":40},[44,127,128],{"class":46,"line":47},[44,129,131],{"class":130},"sJ8bj","\u003C!-- Custom label -->\n",[44,133,134,136,138,140,142,144,147,149,152],{"class":46,"line":54},[44,135,88],{"class":57},[44,137,75],{"class":91},[44,139,95],{"class":94},[44,141,98],{"class":57},[44,143,102],{"class":101},[44,145,146],{"class":94}," label",[44,148,98],{"class":57},[44,150,151],{"class":101},"\"How invoicing works\"",[44,153,105],{"class":57},[44,155,156],{"class":46,"line":61},[44,157,159],{"emptyLinePlaceholder":158},true,"\n",[44,161,162],{"class":46,"line":67},[44,163,164],{"class":130},"\u003C!-- Inline text link inside a sentence -->\n",[44,166,168,171,173,175,177,179,182,184,186,189],{"class":46,"line":167},5,[44,169,170],{"class":57},"See \u003C",[44,172,75],{"class":91},[44,174,95],{"class":94},[44,176,98],{"class":57},[44,178,102],{"class":101},[44,180,181],{"class":94}," inline",[44,183,146],{"class":94},[44,185,98],{"class":57},[44,187,188],{"class":101},"\"the invoicing guide\"",[44,190,191],{"class":57}," \u002F>.\n",[14,193,194,195,198],{},"This page itself is wired to the ",[30,196,197],{},"example.screen"," key as a live example.",[200,201,202],"style",{},"html pre.shiki code .sq-ep, html code.shiki .sq-ep{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":40,"searchDepth":61,"depth":61,"links":204},[205,206],{"id":20,"depth":54,"text":21},{"id":119,"depth":54,"text":120},"Connect any product screen to its guide with one component.",null,{},"\u002Fguides\u002Fcontextual-help",{"title":5,"description":207},"guides\u002Fcontextual-help","u1L_t0wMMjcYfafwgipOzF36TXA-ptOIbu7hpLGoZ5E",[215,217,220,224,228,233,237,242,247,252,256,261,266],{"id":210,"title":5,"titles":216,"content":207,"level":47},[],{"id":218,"title":5,"titles":219,"content":16,"level":47},"\u002Fguides\u002Fcontextual-help#linking-help-to-a-screen",[],{"id":221,"title":21,"titles":222,"content":223,"level":54},"\u002Fguides\u002Fcontextual-help#how-it-works",[5],"Give the guide a stable screen key in its front-matter:---\ntitle: Managing invoices\nscreen: billing.invoices\n---\nDrop the ContextualHelp component on the matching screen:\u003CContextualHelp screen=\"billing.invoices\" \u002F> The component looks up the guide whose screen matches and renders a help link\nto it. If no guide matches that key, it renders nothing — so a screen never\nshows a broken help link.",{"id":225,"title":120,"titles":226,"content":227,"level":54},"\u002Fguides\u002Fcontextual-help#variants",[5],"\u003C!-- Custom label -->\n\u003CContextualHelp screen=\"billing.invoices\" label=\"How invoicing works\" \u002F>\n\n\u003C!-- Inline text link inside a sentence -->\nSee \u003CContextualHelp screen=\"billing.invoices\" inline label=\"the invoicing guide\" \u002F>. This page itself is wired to the example.screen key as a live example. html pre.shiki code .sq-ep, html code.shiki .sq-ep{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"id":229,"title":230,"titles":231,"content":232,"level":47},"\u002Fguides\u002Fgetting-started","Getting started",[],"What the knowledge base is and how to find your way around it.",{"id":234,"title":230,"titles":235,"content":236,"level":47},"\u002Fguides\u002Fgetting-started#getting-started",[],"Welcome to the knowledge base. Every guide here is a single Markdown file under\ncontent\u002Fguides\u002F. Add a file, and it automatically appears in the navigation,\nin search, and gets its own shareable URL.",{"id":238,"title":239,"titles":240,"content":241,"level":54},"\u002Fguides\u002Fgetting-started#finding-answers","Finding answers",[230],"Search — use the search box at the top of any knowledge-base page. It\nmatches guide titles, headings and body text.Browse — the left-hand navigation lists every guide.Contextual help — many screens in the product show a small help link that\nbrings you straight to the relevant guide.",{"id":243,"title":244,"titles":245,"content":246,"level":54},"\u002Fguides\u002Fgetting-started#where-this-fits","Where this fits",[230],"This knowledge layer ships with every SygDev delivery. It is the same building\nblock in every project, so the experience is consistent for your users.",{"id":248,"title":249,"titles":250,"content":251,"level":47},"\u002Fguides\u002Fwriting-a-guide","Writing a guide",[],"How to add a new guide to the knowledge base.",{"id":253,"title":249,"titles":254,"content":255,"level":47},"\u002Fguides\u002Fwriting-a-guide#writing-a-guide",[],"Creating a guide takes one file. No code changes required.",{"id":257,"title":258,"titles":259,"content":260,"level":54},"\u002Fguides\u002Fwriting-a-guide#_1-add-a-markdown-file","1. Add a Markdown file",[249],"Create a file under content\u002Fguides\u002F, for example\ncontent\u002Fguides\u002Fexporting-data.md: ---\ntitle: Exporting your data\ndescription: Download your data as CSV or JSON.\norder: 20\n---\n\n# Exporting your data\n\nSteps go here…",{"id":262,"title":263,"titles":264,"content":265,"level":54},"\u002Fguides\u002Fwriting-a-guide#_2-front-matter-fields","2. Front-matter fields",[249],"FieldRequiredPurposetitleyesHeading, navigation label and \u003Ctitle>descriptionnoSEO meta + search snippetscreennoTies the guide to an app screen for contextual helpordernoSort weight within the navigation (lower first)",{"id":267,"title":268,"titles":269,"content":270,"level":54},"\u002Fguides\u002Fwriting-a-guide#_3-thats-it","3. That's it",[249],"On the next build the guide appears in navigation, search and at its own URL\n(\u002Fguides\u002Fexporting-data). Markdown supports headings, tables, code blocks and\nMDC components. html pre.shiki code .sq-ep, html code.shiki .sq-ep{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",[272],{"title":273,"path":274,"stem":275,"children":276,"page":282},"Guides","\u002Fguides","guides",[277,278,280],{"title":5,"path":210,"stem":212},{"title":230,"path":229,"stem":279},"guides\u002Fgetting-started",{"title":249,"path":248,"stem":281},"guides\u002Fwriting-a-guide",false,1781880237134]