[{"data":1,"prerenderedAt":495},["ShallowReactive",2],{"docs-\u002Fdocs\u002Fstatus-page-badges":3},{"id":4,"title":5,"body":6,"description":487,"extension":488,"meta":489,"navigation":490,"path":491,"seo":492,"stem":493,"__hash__":494},"docs\u002Fdocs\u002F13.status-page-badges.md","Status page badges & embeds",{"type":7,"value":8,"toc":471},"minimark",[9,13,17,29,36,39,44,47,52,63,70,74,124,128,170,174,250,254,261,263,267,274,278,284,288,385,392,396,399,427,430,436,438,442,453,464,467],[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,144,147,151,154,158,161,163,167],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sMK4o","[",[136,145,146],{"class":142},"![",[136,148,150],{"class":149},"sfazB","Status",[136,152,153],{"class":142},"](",[136,155,157],{"class":156},"sDClJ","https:\u002F\u002Fapp.vantaj.co\u002Fapi\u002Fbadge\u002Fyour-slug",[136,159,160],{"class":142},")",[136,162,153],{"class":142},[136,164,166],{"class":165},"sDpXG","https:\u002F\u002Fapp.vantaj.co\u002Fs\u002Fyour-slug",[136,168,169],{"class":142},")\n",[48,171,173],{"id":172},"embed-in-a-webpage-html","Embed in a webpage (HTML)",[53,175,179],{"className":176,"code":177,"language":178,"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,180,181,206,240],{"__ignoreMap":62},[136,182,183,186,189,193,196,199,201,203],{"class":138,"line":139},[136,184,185],{"class":142},"\u003C",[136,187,32],{"class":188},"swJcz",[136,190,192],{"class":191},"spNyl"," href",[136,194,195],{"class":142},"=",[136,197,198],{"class":142},"\"",[136,200,166],{"class":149},[136,202,198],{"class":142},[136,204,205],{"class":142},">\n",[136,207,209,212,215,218,220,222,224,226,229,231,233,235,237],{"class":138,"line":208},2,[136,210,211],{"class":142},"  \u003C",[136,213,214],{"class":188},"img",[136,216,217],{"class":191}," src",[136,219,195],{"class":142},[136,221,198],{"class":142},[136,223,157],{"class":149},[136,225,198],{"class":142},[136,227,228],{"class":191}," alt",[136,230,195],{"class":142},[136,232,198],{"class":142},[136,234,150],{"class":149},[136,236,198],{"class":142},[136,238,239],{"class":142}," \u002F>\n",[136,241,243,246,248],{"class":138,"line":242},3,[136,244,245],{"class":142},"\u003C\u002F",[136,247,32],{"class":188},[136,249,205],{"class":142},[48,251,253],{"id":252},"copy-from-the-editor","Copy from the editor",[14,255,256,257,260],{},"Open your status page in the editor and switch to the ",[21,258,259],{},"Share"," tab. All three snippet formats (Markdown, HTML, and bare badge URL) are ready to copy with one click.",[37,262],{},[40,264,266],{"id":265},"embeddable-widget-iframe","Embeddable widget (iframe)",[14,268,269,270,273],{},"The embed widget shows your full status page - monitor list, overall status banner, and last-checked time - inside an ",[60,271,272],{},"\u003Ciframe>",". It updates automatically on each page load.",[48,275,277],{"id":276},"embed-url","Embed URL",[53,279,282],{"className":280,"code":281,"language":58},[56],"https:\u002F\u002Fapp.vantaj.co\u002Fembed\u002F{slug}\n",[60,283,281],{"__ignoreMap":62},[48,285,287],{"id":286},"iframe-snippet","iframe snippet",[53,289,291],{"className":176,"code":290,"language":178,"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,292,293,300,315,329,344,359,374],{"__ignoreMap":62},[136,294,295,297],{"class":138,"line":139},[136,296,185],{"class":142},[136,298,299],{"class":188},"iframe\n",[136,301,302,305,307,309,312],{"class":138,"line":208},[136,303,304],{"class":191},"  src",[136,306,195],{"class":142},[136,308,198],{"class":142},[136,310,311],{"class":149},"https:\u002F\u002Fapp.vantaj.co\u002Fembed\u002Fyour-slug",[136,313,314],{"class":142},"\"\n",[136,316,317,320,322,324,327],{"class":138,"line":242},[136,318,319],{"class":191},"  width",[136,321,195],{"class":142},[136,323,198],{"class":142},[136,325,326],{"class":149},"100%",[136,328,314],{"class":142},[136,330,332,335,337,339,342],{"class":138,"line":331},4,[136,333,334],{"class":191},"  height",[136,336,195],{"class":142},[136,338,198],{"class":142},[136,340,341],{"class":149},"400",[136,343,314],{"class":142},[136,345,347,350,352,354,357],{"class":138,"line":346},5,[136,348,349],{"class":191},"  frameborder",[136,351,195],{"class":142},[136,353,198],{"class":142},[136,355,356],{"class":149},"0",[136,358,314],{"class":142},[136,360,362,365,367,369,372],{"class":138,"line":361},6,[136,363,364],{"class":191},"  style",[136,366,195],{"class":142},[136,368,198],{"class":142},[136,370,371],{"class":149},"border-radius:12px;overflow:hidden",[136,373,314],{"class":142},[136,375,377,380,383],{"class":138,"line":376},7,[136,378,379],{"class":142},">\u003C\u002F",[136,381,382],{"class":188},"iframe",[136,384,205],{"class":142},[14,386,387,388,391],{},"Adjust ",[60,389,390],{},"height"," to fit your layout. The embed has no minimum width requirement and works at any reasonable size.",[48,393,395],{"id":394},"where-it-works","Where it works",[14,397,398],{},"The embed has been tested in:",[400,401,402,409,415,421],"ul",{},[403,404,405,408],"li",{},[21,406,407],{},"Notion"," - paste the URL as an embed block",[403,410,411,414],{},[21,412,413],{},"Confluence"," - use the HTML macro or the iframe macro",[403,416,417,420],{},[21,418,419],{},"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)",[403,422,423,426],{},[21,424,425],{},"Any website"," - paste the snippet into your HTML",[48,428,253],{"id":429},"copy-from-the-editor-1",[14,431,432,433,435],{},"The ",[21,434,259],{}," tab in the status page editor includes the full iframe snippet ready to copy.",[37,437],{},[40,439,441],{"id":440},"caching","Caching",[14,443,444,445,448,449,452],{},"Badge responses are cached at Cloudflare's edge for ",[21,446,447],{},"60 seconds"," (",[60,450,451],{},"Cache-Control: public, max-age=60, s-maxage=60, stale-while-revalidate=300","). This means:",[400,454,455,458,461],{},[403,456,457],{},"Badge changes propagate within ~60 seconds of a status change",[403,459,460],{},"Your Supabase database is not hit on every badge request - Cloudflare serves the cached response",[403,462,463],{},"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,465,466],{},"If you need faster propagation, contact support to discuss edge cache purging on status transitions.",[468,469,470],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sDClJ, html code.shiki .sDClJ{--shiki-light:#91B859;--shiki-light-text-decoration:underline;--shiki-default:#C3E88D;--shiki-default-text-decoration:underline;--shiki-dark:#C3E88D;--shiki-dark-text-decoration:underline}html pre.shiki code .sDpXG, html code.shiki .sDpXG{--shiki-light:#E53935;--shiki-light-text-decoration:underline;--shiki-default:#F07178;--shiki-default-text-decoration:underline;--shiki-dark:#F07178;--shiki-dark-text-decoration:underline}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 .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}",{"title":62,"searchDepth":208,"depth":208,"links":472},[473,480,486],{"id":42,"depth":208,"text":43,"children":474},[475,476,477,478,479],{"id":50,"depth":242,"text":51},{"id":72,"depth":242,"text":73},{"id":126,"depth":242,"text":127},{"id":172,"depth":242,"text":173},{"id":252,"depth":242,"text":253},{"id":265,"depth":208,"text":266,"children":481},[482,483,484,485],{"id":276,"depth":242,"text":277},{"id":286,"depth":242,"text":287},{"id":394,"depth":242,"text":395},{"id":429,"depth":242,"text":253},{"id":440,"depth":208,"text":441},"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":487},"docs\u002F13.status-page-badges","mwGJxP83IkhfBRfpyyaPIQy4tb5WtJ3ofqL6qFoJcIA",1783289826182]