[{"data":1,"prerenderedAt":472},["ShallowReactive",2],{"docs-\u002Fdocs\u002Fstatus-page-badges":3},{"id":4,"title":5,"body":6,"description":464,"extension":465,"meta":466,"navigation":467,"path":468,"seo":469,"stem":470,"__hash__":471},"docs\u002Fdocs\u002F13.status-page-badges.md","Status page badges & embeds",{"type":7,"value":8,"toc":448},"minimark",[9,13,17,29,36,39,44,47,52,63,70,74,124,128,142,146,227,231,238,240,244,251,255,261,265,362,369,373,376,404,407,413,415,419,430,441,444],[10,11,5],"h1",{"id":12},"status-page-badges-embeds",[14,15,16],"p",{},"Vantaj lets you share live status information outside the dashboard — as a badge in a README or as a self-updating iframe panel on any website.",[14,18,19,20,24,25,28],{},"Both require a ",[21,22,23],"strong",{},"public status page"," with a slug configured. Go to ",[21,26,27],{},"Status Pages → your page → Access"," to set a slug and publish it.",[14,30,31],{},[32,33,35],"a",{"href":34},"\u002Fbadges","Try the interactive Badge Builder →",[37,38],"hr",{},[40,41,43],"h2",{"id":42},"status-badge","Status badge",[14,45,46],{},"A status badge is a small SVG image that shows the current aggregate health of your status page. It refreshes automatically (cached for 60 seconds at the CDN edge).",[48,49,51],"h3",{"id":50},"badge-url","Badge URL",[53,54,59],"pre",{"className":55,"code":57,"language":58},[56],"language-text","https:\u002F\u002Fapp.vantaj.co\u002Fapi\u002Fbadge\u002F{slug}\n","text",[60,61,57],"code",{"__ignoreMap":62},"",[14,64,65,66,69],{},"Replace ",[60,67,68],{},"{slug}"," with your status page's public slug.",[48,71,73],{"id":72},"possible-states","Possible states",[75,76,77,90],"table",{},[78,79,80],"thead",{},[81,82,83,87],"tr",{},[84,85,86],"th",{},"Badge text",[84,88,89],{},"Meaning",[91,92,93,104,114],"tbody",{},[81,94,95,101],{},[96,97,98],"td",{},[60,99,100],{},"operational",[96,102,103],{},"All monitors are up",[81,105,106,111],{},[96,107,108],{},[60,109,110],{},"degraded",[96,112,113],{},"One or more monitors are in a degraded state",[81,115,116,121],{},[96,117,118],{},[60,119,120],{},"disruption",[96,122,123],{},"One or more monitors are down",[48,125,127],{"id":126},"embed-in-a-readme-markdown","Embed in a README (Markdown)",[53,129,133],{"className":130,"code":131,"language":132,"meta":62,"style":62},"language-markdown shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[![Status](https:\u002F\u002Fapp.vantaj.co\u002Fapi\u002Fbadge\u002Fyour-slug)](https:\u002F\u002Fapp.vantaj.co\u002Fs\u002Fyour-slug)\n","markdown",[60,134,135],{"__ignoreMap":62},[136,137,140],"span",{"class":138,"line":139},"line",1,[136,141,131],{},[48,143,145],{"id":144},"embed-in-a-webpage-html","Embed in a webpage (HTML)",[53,147,151],{"className":148,"code":149,"language":150,"meta":62,"style":62},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ca href=\"https:\u002F\u002Fapp.vantaj.co\u002Fs\u002Fyour-slug\">\n  \u003Cimg src=\"https:\u002F\u002Fapp.vantaj.co\u002Fapi\u002Fbadge\u002Fyour-slug\" alt=\"Status\" \u002F>\n\u003C\u002Fa>\n","html",[60,152,153,181,217],{"__ignoreMap":62},[136,154,155,159,162,166,169,172,176,178],{"class":138,"line":139},[136,156,158],{"class":157},"sMK4o","\u003C",[136,160,32],{"class":161},"swJcz",[136,163,165],{"class":164},"spNyl"," href",[136,167,168],{"class":157},"=",[136,170,171],{"class":157},"\"",[136,173,175],{"class":174},"sfazB","https:\u002F\u002Fapp.vantaj.co\u002Fs\u002Fyour-slug",[136,177,171],{"class":157},[136,179,180],{"class":157},">\n",[136,182,184,187,190,193,195,197,200,202,205,207,209,212,214],{"class":138,"line":183},2,[136,185,186],{"class":157},"  \u003C",[136,188,189],{"class":161},"img",[136,191,192],{"class":164}," src",[136,194,168],{"class":157},[136,196,171],{"class":157},[136,198,199],{"class":174},"https:\u002F\u002Fapp.vantaj.co\u002Fapi\u002Fbadge\u002Fyour-slug",[136,201,171],{"class":157},[136,203,204],{"class":164}," alt",[136,206,168],{"class":157},[136,208,171],{"class":157},[136,210,211],{"class":174},"Status",[136,213,171],{"class":157},[136,215,216],{"class":157}," \u002F>\n",[136,218,220,223,225],{"class":138,"line":219},3,[136,221,222],{"class":157},"\u003C\u002F",[136,224,32],{"class":161},[136,226,180],{"class":157},[48,228,230],{"id":229},"copy-from-the-editor","Copy from the editor",[14,232,233,234,237],{},"Open your status page in the editor and switch to the ",[21,235,236],{},"Share"," tab. All three snippet formats (Markdown, HTML, and bare badge URL) are ready to copy with one click.",[37,239],{},[40,241,243],{"id":242},"embeddable-widget-iframe","Embeddable widget (iframe)",[14,245,246,247,250],{},"The embed widget shows your full status page — monitor list, overall status banner, and last-checked time — inside an ",[60,248,249],{},"\u003Ciframe>",". It updates automatically on each page load.",[48,252,254],{"id":253},"embed-url","Embed URL",[53,256,259],{"className":257,"code":258,"language":58},[56],"https:\u002F\u002Fapp.vantaj.co\u002Fembed\u002F{slug}\n",[60,260,258],{"__ignoreMap":62},[48,262,264],{"id":263},"iframe-snippet","iframe snippet",[53,266,268],{"className":148,"code":267,"language":150,"meta":62,"style":62},"\u003Ciframe\n  src=\"https:\u002F\u002Fapp.vantaj.co\u002Fembed\u002Fyour-slug\"\n  width=\"100%\"\n  height=\"400\"\n  frameborder=\"0\"\n  style=\"border-radius:12px;overflow:hidden\"\n>\u003C\u002Fiframe>\n",[60,269,270,277,292,306,321,336,351],{"__ignoreMap":62},[136,271,272,274],{"class":138,"line":139},[136,273,158],{"class":157},[136,275,276],{"class":161},"iframe\n",[136,278,279,282,284,286,289],{"class":138,"line":183},[136,280,281],{"class":164},"  src",[136,283,168],{"class":157},[136,285,171],{"class":157},[136,287,288],{"class":174},"https:\u002F\u002Fapp.vantaj.co\u002Fembed\u002Fyour-slug",[136,290,291],{"class":157},"\"\n",[136,293,294,297,299,301,304],{"class":138,"line":219},[136,295,296],{"class":164},"  width",[136,298,168],{"class":157},[136,300,171],{"class":157},[136,302,303],{"class":174},"100%",[136,305,291],{"class":157},[136,307,309,312,314,316,319],{"class":138,"line":308},4,[136,310,311],{"class":164},"  height",[136,313,168],{"class":157},[136,315,171],{"class":157},[136,317,318],{"class":174},"400",[136,320,291],{"class":157},[136,322,324,327,329,331,334],{"class":138,"line":323},5,[136,325,326],{"class":164},"  frameborder",[136,328,168],{"class":157},[136,330,171],{"class":157},[136,332,333],{"class":174},"0",[136,335,291],{"class":157},[136,337,339,342,344,346,349],{"class":138,"line":338},6,[136,340,341],{"class":164},"  style",[136,343,168],{"class":157},[136,345,171],{"class":157},[136,347,348],{"class":174},"border-radius:12px;overflow:hidden",[136,350,291],{"class":157},[136,352,354,357,360],{"class":138,"line":353},7,[136,355,356],{"class":157},">\u003C\u002F",[136,358,359],{"class":161},"iframe",[136,361,180],{"class":157},[14,363,364,365,368],{},"Adjust ",[60,366,367],{},"height"," to fit your layout. The embed has no minimum width requirement and works at any reasonable size.",[48,370,372],{"id":371},"where-it-works","Where it works",[14,374,375],{},"The embed has been tested in:",[377,378,379,386,392,398],"ul",{},[380,381,382,385],"li",{},[21,383,384],{},"Notion"," — paste the URL as an embed block",[380,387,388,391],{},[21,389,390],{},"Confluence"," — use the HTML macro or the iframe macro",[380,393,394,397],{},[21,395,396],{},"GitHub wikis"," — paste the iframe HTML in the wiki source (note: GitHub's markdown renderer strips iframes, but the wiki raw HTML mode supports them)",[380,399,400,403],{},[21,401,402],{},"Any website"," — paste the snippet into your HTML",[48,405,230],{"id":406},"copy-from-the-editor-1",[14,408,409,410,412],{},"The ",[21,411,236],{}," tab in the status page editor includes the full iframe snippet ready to copy.",[37,414],{},[40,416,418],{"id":417},"caching","Caching",[14,420,421,422,425,426,429],{},"Badge responses are cached at Cloudflare's edge for ",[21,423,424],{},"60 seconds"," (",[60,427,428],{},"Cache-Control: public, max-age=60, s-maxage=60, stale-while-revalidate=300","). This means:",[377,431,432,435,438],{},[380,433,434],{},"Badge changes propagate within ~60 seconds of a status change",[380,436,437],{},"Your Supabase database is not hit on every badge request — Cloudflare serves the cached response",[380,439,440],{},"GitHub's own image CDN adds another layer of caching; the badge in a README may lag by a few minutes during a sustained incident",[14,442,443],{},"If you need faster propagation, contact support to discuss edge cache purging on status transitions.",[445,446,447],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":62,"searchDepth":183,"depth":183,"links":449},[450,457,463],{"id":42,"depth":183,"text":43,"children":451},[452,453,454,455,456],{"id":50,"depth":219,"text":51},{"id":72,"depth":219,"text":73},{"id":126,"depth":219,"text":127},{"id":144,"depth":219,"text":145},{"id":229,"depth":219,"text":230},{"id":242,"depth":183,"text":243,"children":458},[459,460,461,462],{"id":253,"depth":219,"text":254},{"id":263,"depth":219,"text":264},{"id":371,"depth":219,"text":372},{"id":406,"depth":219,"text":230},{"id":417,"depth":183,"text":418},"Add a live status badge to your README or embed a status panel on any website","md",{},true,"\u002Fdocs\u002Fstatus-page-badges",{"title":5,"description":464},"docs\u002F13.status-page-badges","LD-PWsXBwtCyoHjxXa8F1T8BKKwUnsZd-RXJzl55LK8",1780583795076]