[{"data":1,"prerenderedAt":28},["ShallowReactive",2],{"doc-brand":3},{"html":4,"headings":5},"\u003Cp>Keep your logos, app icons, favicons, screenshots, colours, fonts and brand\nguidelines in one place, and share them with anyone: a press page at\n\u003Ccode>\u002Fbrand\u002F<public key>\u003C\u002Fcode>, an embed for your own site, and an API. People you share\nit with need no account.\u003C\u002Fp>\n\u003Ch2 id=\"what-goes-in-it\">What goes in it\u003Ca class=\"heading-anchor\" href=\"#what-goes-in-it\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Files.\u003C\u002Fstrong> PNG, JPEG, GIF, WebP, SVG, ICO and PDF, up to 20 MB each and 200 per\nproject. The type is read from the file itself, not its name. Each file has:\u003C\u002Fp>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Field\u003C\u002Fth>\n\u003Cth>Meaning\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>kind\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>logo\u003C\u002Fcode>, \u003Ccode>icon\u003C\u002Fcode> (app icon), \u003Ccode>favicon\u003C\u002Fcode>, \u003Ccode>screenshot\u003C\u002Fcode>, \u003Ccode>social\u003C\u002Fcode> (an Open Graph or store banner) or \u003Ccode>other\u003C\u002Fcode>. Left out, it is guessed: tiny squares are favicons, tall images screenshots, large squares icons.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>name\u003C\u002Fcode>, \u003Ccode>description\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>What people see, and the name a download is saved under.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>background\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>light\u003C\u002Fcode>, \u003Ccode>dark\u003C\u002Fcode> or \u003Ccode>any\u003C\u002Fcode>: what a logo is drawn to sit on, so its tile on the page matches.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>public\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>false\u003C\u002Fcode> keeps a file in the kit but off the public page and API (working files, drafts).\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>order\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Files sort by it, lowest first.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>SVGs that contain scripts, event handlers or embedded pages are refused; export\nthem again as plain SVG. Files count against the workspace's storage.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Words.\u003C\u002Fstrong> A \u003Ccode>tagline\u003C\u002Fcode> (up to 160 characters) and an \u003Ccode>about\u003C\u002Fcode> text (up to 2,000;\nblank lines start a new paragraph).\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Colours.\u003C\u002Fstrong> Up to 24, each with a \u003Ccode>name\u003C\u002Fcode>, a \u003Ccode>hex\u003C\u002Fcode> (\u003Ccode>#rrggbb\u003C\u002Fcode>) and a \u003Ccode>usage\u003C\u002Fcode>\nnote ("Buttons and links").\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Fonts.\u003C\u002Fstrong> Up to 6, each with a \u003Ccode>name\u003C\u002Fcode>, a \u003Ccode>role\u003C\u002Fcode> (\u003Ccode>display\u003C\u002Fcode>, \u003Ccode>body\u003C\u002Fcode>, \u003Ccode>mono\u003C\u002Fcode> or\n\u003Ccode>other\u003C\u002Fcode>), \u003Ccode>weights\u003C\u002Fcode> ("400, 600"), a \u003Ccode>sample\u003C\u002Fcode> sentence, a \u003Ccode>downloadUrl\u003C\u002Fcode> and a\n\u003Ccode>cssUrl\u003C\u002Fcode>. When \u003Ccode>cssUrl\u003C\u002Fcode> is a Google Fonts stylesheet\n(\u003Ccode>https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=…\u003C\u002Fcode>), the page loads it and is set in\nyour own type: the display font for headings, the body font for text. Other\nhosts are refused, because the page only lets that one in.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Guidelines.\u003C\u002Fstrong> Up to 20 sections, each a \u003Ccode>title\u003C\u002Fcode> and a Markdown \u003Ccode>body\u003C\u002Fcode>: clear\nspace, minimum sizes, what not to do, tone of voice.\u003C\u002Fp>\n\u003Ch2 id=\"the-public-page\">The public page\u003Ca class=\"heading-anchor\" href=\"#the-public-page\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Turn it on under \u003Cstrong>Project → Brand → Page\u003C\u002Fstrong> (or \u003Ccode>page.public: true\u003C\u002Fcode>). It is at\n\u003Ccode>https:\u002F\u002FYOUR-SUPPORT-HOST\u002Fbrand\u002FPROJECT_PUBLIC_KEY\u003C\u002Fcode>, needs no sign-in, works\nwithout JavaScript, and prints cleanly. Every file has a \u003Cstrong>Download\u003C\u002Fstrong> button that\nsaves it under its name, and selecting a colour copies its hex value.\u003C\u002Fp>\n\u003Cp>Choose how it looks:\u003C\u002Fp>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Setting\u003C\u002Fth>\n\u003Cth>Values\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>template\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>minimal\u003C\u002Fcode> (default): your logo on your colour, then a quiet grid. \u003Ccode>editorial\u003C\u002Fcode>: a centred, type-led page for kits with a lot of guidelines. \u003Ccode>split\u003C\u002Fcode>: a panel in your colour beside the content, like a printed brand book.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>theme\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>auto\u003C\u002Fcode> (follows the visitor), \u003Ccode>light\u003C\u002Fcode> or \u003Ccode>dark\u003C\u002Fcode>.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>radius\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>sharp\u003C\u002Fcode>, \u003Ccode>soft\u003C\u002Fcode> or \u003Ccode>round\u003C\u002Fcode> corners.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>accent\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>#rrggbb\u003C\u002Fcode>. Empty uses your first colour, then the project's accent.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>headline\u003C\u002Fcode>, \u003Ccode>intro\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The page's heading and lead. Empty uses the project's name and the tagline.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>sections\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Which sections show, in order: \u003Ccode>colors\u003C\u002Fcode>, \u003Ccode>typography\u003C\u002Fcode>, \u003Ccode>logos\u003C\u002Fcode> (logos and app icons), \u003Ccode>screenshots\u003C\u002Fcode>, \u003Ccode>assets\u003C\u002Fcode> (favicons, social images and other files) and \u003Ccode>guidelines\u003C\u002Fcode>. A section with nothing in it is left out.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>The hero shows a logo drawn for the accent's shade (\u003Ccode>background: dark\u003C\u002Fcode> on a dark\naccent), else any logo, else the app icon, else your name set in your display\nfont. With the page off, \u003Ccode>\u002Fbrand\u002F…\u003C\u002Fcode> and \u003Ccode>GET \u002Fv1\u002Fbrand\u002F…\u003C\u002Fcode> answer \u003Ccode>404\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"put-it-on-your-site\">Put it on your site\u003Ca class=\"heading-anchor\" href=\"#put-it-on-your-site\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>One script tag frames the page into yours and keeps the frame as tall as its\ncontent:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-html\">\u003Ccode>\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">div\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">id\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"brand\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">div\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">script\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">src\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"https:\u002F\u002FYOUR-SUPPORT-HOST\u002Fbrand.js\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-project\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"pk_…\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-target\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"#brand\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">defer\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">script\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cp>\u003Ccode>brand.js\u003C\u002Fcode> is MIT-licensed with no dependencies. Inside the frame there is no top\nbar (your site has its own) and downloads still work. Any of the page's\nsettings can be overridden per embed:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-html\">\u003Ccode>\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">script\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">src\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"https:\u002F\u002FYOUR-SUPPORT-HOST\u002Fbrand.js\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-project\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"pk_…\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-target\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"#press\"\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-class\">data-template\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"editorial\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-theme\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"dark\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-radius\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"round\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">data-accent\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"#fca311\"\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-class\">data-sections\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"logos,colors,typography\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-class\">defer\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\"><\u002F\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">script\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cp>Without \u003Ccode>data-theme\u003C\u002Fcode> the frame follows a \u003Ccode>dark\u003C\u002Fcode> or \u003Ccode>light\u003C\u002Fcode> class on your\n\u003Ccode><html>\u003C\u002Fcode>, then the kit's own setting. The same overrides work on the page's URL\n(\u003Ccode>\u002Fbrand\u002Fpk_…?template=split&theme=light&sections=logos,colors\u003C\u002Fcode>), which is handy\nfor linking a journalist straight to the logos.\u003C\u002Fp>\n\u003Ch2 id=\"in-a-swift-app\">In a Swift app\u003Ca class=\"heading-anchor\" href=\"#in-a-swift-app\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Most apps link to the page (an About screen's "Press kit" row). To show the kit\ninside your app instead, read the public API with \u003Ccode>URLSession\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-plain\">\u003Ccode>\u002F\u002F BrandKitView.swift. MIT. A list of a HelpBites brand kit's colours and logos.\nimport SwiftUI\n\nstruct BrandKit: Decodable {\n  struct Colour: Decodable, Hashable { let name, hex, usage: String }\n  struct Asset: Decodable, Identifiable { let id, kind, name, url, downloadUrl: String }\n  let name, tagline: String\n  let colors: [Colour]\n  let assets: [Asset]\n}\n\nstruct BrandKitView: View {\n  let host: URL\n  let projectKey: String\n  var cornerRadius: CGFloat = 12\n  @State private var kit: BrandKit?\n\n  var body: some View {\n    List {\n      if let kit {\n        Section(kit.tagline) {\n          ForEach(kit.colors, id: \\.self) { colour in\n            HStack {\n              RoundedRectangle(cornerRadius: cornerRadius \u002F 2).fill(Color(brandHex: colour.hex)).frame(width: 36, height: 36)\n              VStack(alignment: .leading) { Text(colour.name); Text(colour.hex.uppercased()).font(.caption.monospaced()).foregroundStyle(.secondary) }\n            }\n          }\n        }\n        Section(\u003Cspan class=\"shj-syn-str\">\"Logos\"\u003C\u002Fspan>) {\n          ForEach(kit.assets.filter { $0.kind == \u003Cspan class=\"shj-syn-str\">\"logo\"\u003C\u002Fspan> || $0.kind == \u003Cspan class=\"shj-syn-str\">\"icon\"\u003C\u002Fspan> }) { asset in\n            Link(destination: host.appending(path: String(asset.downloadUrl.dropFirst()))) {\n              HStack {\n                AsyncImage(url: URL(string: asset.url)) { $0.resizable().scaledToFit() } placeholder: { Color.clear }\n                  .frame(width: 56, height: 40).padding(6).background(.quaternary, in: .rect(cornerRadius: cornerRadius))\n                Text(asset.name)\n              }\n            }\n          }\n        }\n      }\n    }\n    .navigationTitle(kit?.name ?? \u003Cspan class=\"shj-syn-str\">\"Brand\"\u003C\u002Fspan>)\n    .task {\n      struct Envelope: Decodable { let brand: BrandKit }\n      let url = host.appending(path: \u003Cspan class=\"shj-syn-str\">\"v1\u002Fbrand\u002F\\(projectKey)\"\u003C\u002Fspan>)\n      if let answer = try? await URLSession.shared.data(from: url) { kit = try? JSONDecoder().decode(Envelope.self, from: answer.0).brand }\n    }\n  }\n}\n\nextension Color {\n  init(brandHex hex: String) {\n    let v = Int(hex.dropFirst(), radix: 16) ?? 0\n    self.init(red: Double(v >> 16 & 255) \u002F 255, green: Double(v >> 8 & 255) \u002F 255, blue: Double(v & 255) \u002F 255)\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cp>\u003Ccode>cornerRadius\u003C\u002Fcode> sets the shape of the swatches and tiles; fonts and colours come\nfrom your app's own environment. It is your file, so change anything.\u003C\u002Fp>\n\u003Ch2 id=\"your-own-ui\">Your own UI\u003Ca class=\"heading-anchor\" href=\"#your-own-ui\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>The kit is one public request, open to any origin, for a press page you build\nyourself:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-bash\">\u003Ccode>\u003Cspan class=\"shj-syn-func\">curl\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -s\u003C\u002Fspan> https:\u002F\u002FYOUR-SUPPORT-HOST\u002Fv1\u002Fbrand\u002FPROJECT_PUBLIC_KEY\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-json\">\u003Ccode>{\n  \u003Cspan class=\"shj-syn-var\">\"brand\"\u003C\u002Fspan>: {\n    \u003Cspan class=\"shj-syn-var\">\"name\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Acme\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"tagline\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Orders, sorted.\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"about\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"…\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"accent\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"#14213d\"\u003C\u002Fspan>,\n    \u003Cspan class=\"shj-syn-var\">\"colors\"\u003C\u002Fspan>: [{ \u003Cspan class=\"shj-syn-var\">\"name\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Ink\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"hex\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"#14213d\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"usage\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Text and the wordmark\"\u003C\u002Fspan> }],\n    \u003Cspan class=\"shj-syn-var\">\"fonts\"\u003C\u002Fspan>: [{ \u003Cspan class=\"shj-syn-var\">\"name\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Fraunces\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"role\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"display\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"cssUrl\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Fraunces\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"downloadUrl\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"weights\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"400, 600\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"sample\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"\"\u003C\u002Fspan> }],\n    \u003Cspan class=\"shj-syn-var\">\"guidelines\"\u003C\u002Fspan>: [{ \u003Cspan class=\"shj-syn-var\">\"id\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"g_1\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"title\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Clear space\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"body\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Leave the height of the **A**.\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"html\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"<p>Leave the height of the <strong>A<\u002Fstrong>.<\u002Fp>\"\u003C\u002Fspan> }],\n    \u003Cspan class=\"shj-syn-var\">\"assets\"\u003C\u002Fspan>: [{ \u003Cspan class=\"shj-syn-var\">\"id\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"a1\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"kind\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"logo\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"name\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Wordmark\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"description\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"url\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"https:\u002F\u002Fbucket.example.com\u002F…\u002Fa.svg\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"downloadUrl\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"\u002Fbrand\u002Fpk_…\u002Ffiles\u002Fa1\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"mime\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"image\u002Fsvg+xml\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"size\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-num\">2048\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"width\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-num\">120\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"height\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-num\">40\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"background\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"dark\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"createdAt\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"…\"\u003C\u002Fspan> }],\n    \u003Cspan class=\"shj-syn-var\">\"page\"\u003C\u002Fspan>: { \u003Cspan class=\"shj-syn-var\">\"url\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"\u002Fbrand\u002Fpk_…\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"template\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"minimal\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-var\">\"theme\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"auto\"\u003C\u002Fspan> }\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cp>\u003Ccode>url\u003C\u002Fcode> is the file in the bucket, for \u003Ccode><img>\u003C\u002Fcode>; \u003Ccode>downloadUrl\u003C\u002Fcode> (relative to\nHelpBites) saves it under its name. Guidelines come as Markdown and as\nsanitised \u003Ccode>html\u003C\u002Fcode>. Only public files are listed. Answers may be cached for a\nminute; reads are limited to 600 a minute per IP address.\u003C\u002Fp>\n\u003Ch2 id=\"managing-the-kit-over-the-api\">Managing the kit over the API\u003Ca class=\"heading-anchor\" href=\"#managing-the-kit-over-the-api\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Use an admin API key (\u003Cstrong>API keys\u003C\u002Fstrong>) or an operator session. Every route is\nscoped to your workspace.\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cbutton type=\"button\" class=\"copy-btn\" data-copy aria-label=\"Copy to clipboard\">Copy\u003C\u002Fbutton>\u003Cpre class=\"shj-lang-bash\">\u003Ccode>\u003Cspan class=\"shj-syn-var\">HOST\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>https:\u002F\u002FYOUR-SUPPORT-HOST\n\u003Cspan class=\"shj-syn-var\">KEY\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>ak_...\n\n\u003Cspan class=\"shj-syn-cmnt\"># Upload a logo drawn for dark backgrounds\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-func\">curl\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -s\u003C\u002Fspan> \u003Cspan class=\"shj-syn-var\">$HOST\u003C\u002Fspan>\u002Fv1\u002Fadmin\u002Fbrand\u002Fassets\u003Cspan class=\"shj-syn-kwd\"> -H\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"authorization: Bearer \u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">$KEY\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"\u003C\u002Fspan> \\\n \u003Cspan class=\"shj-syn-kwd\"> -F\u003C\u002Fspan> \u003Cspan class=\"shj-syn-var\">project\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>PROJECT_ID\u003Cspan class=\"shj-syn-kwd\"> -F\u003C\u002Fspan> \u003Cspan class=\"shj-syn-var\">file\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>@wordmark-white.svg\u003Cspan class=\"shj-syn-kwd\"> -F\u003C\u002Fspan> \u003Cspan class=\"shj-syn-var\">kind\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>logo\u003Cspan class=\"shj-syn-kwd\"> -F\u003C\u002Fspan> \u003Cspan class=\"shj-syn-var\">background\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>dark\u003Cspan class=\"shj-syn-kwd\"> -F\u003C\u002Fspan> \u003Cspan class=\"shj-syn-var\">name\u003C\u002Fspan>\u003Cspan class=\"shj-syn-oper\">=\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"Wordmark, white\"\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-syn-cmnt\"># Set colours, a font and the page, and turn the page on\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-func\">curl\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -s\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -X\u003C\u002Fspan> PATCH \u003Cspan class=\"shj-syn-str\">\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">$HOST\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\u002Fv1\u002Fadmin\u002Fbrand?project=PROJECT_ID\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -H\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"authorization: Bearer \u003C\u002Fspan>\u003Cspan class=\"shj-syn-var\">$KEY\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">\"\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -H\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">'content-type: application\u002Fjson'\u003C\u002Fspan>\u003Cspan class=\"shj-syn-kwd\"> -d\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">'{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-syn-str\">\"tagline\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Orders, sorted.\"\u003C\u002Fspan>,\n  \u003Cspan class=\"shj-syn-str\">\"colors\"\u003C\u002Fspan>: [\u003Cspan class=\"shj-syn-oper\">{\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"name\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Ink\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-str\">\"hex\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"#14213d\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-str\">\"usage\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Text and the wordmark\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-oper\">}\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-oper\">{\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"name\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Signal\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-str\">\"hex\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"#fca311\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-str\">\"usage\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Buttons\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-oper\">}\u003C\u002Fspan>],\n  \u003Cspan class=\"shj-syn-str\">\"fonts\"\u003C\u002Fspan>: [\u003Cspan class=\"shj-syn-oper\">{\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"name\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"Fraunces\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-str\">\"role\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"display\"\u003C\u002Fspan>, \u003Cspan class=\"shj-syn-str\">\"cssUrl\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Fraunces:wght@400;600&display=swap\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-oper\">}\u003C\u002Fspan>],\n  \u003Cspan class=\"shj-syn-str\">\"page\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-oper\">{\u003C\u002Fspan> \u003Cspan class=\"shj-syn-str\">\"public\"\u003C\u002Fspan>: true, \u003Cspan class=\"shj-syn-str\">\"template\"\u003C\u002Fspan>: \u003Cspan class=\"shj-syn-str\">\"split\"\u003C\u002Fspan> \u003Cspan class=\"shj-syn-oper\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-syn-oper\">}\u003C\u002Fspan>\u003Cspan class=\"shj-syn-str\">'\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cdiv class=\"table-wrap\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Route\u003C\u002Fth>\n\u003Cth>What it does\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fv1\u002Fadmin\u002Fbrand?project=\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The kit and every file, private ones too, and the page's \u003Ccode>url\u003C\u002Fcode>.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>PATCH \u002Fv1\u002Fadmin\u002Fbrand?project=\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Change the kit. \u003Ccode>colors\u003C\u002Fcode>, \u003Ccode>fonts\u003C\u002Fcode> and \u003Ccode>guidelines\u003C\u002Fcode> are full lists; \u003Ccode>page\u003C\u002Fcode> merges key by key.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>POST \u002Fv1\u002Fadmin\u002Fbrand\u002Fpreview?project=\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The page's HTML with unsaved changes (\u003Ccode>{ brand: … }\u003C\u002Fcode>) applied. Nothing is saved; works while the page is off.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>POST \u002Fv1\u002Fadmin\u002Fbrand\u002Fassets\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Upload a file (multipart: \u003Ccode>project\u003C\u002Fcode>, \u003Ccode>file\u003C\u002Fcode>, and optionally \u003Ccode>kind\u003C\u002Fcode>, \u003Ccode>name\u003C\u002Fcode>, \u003Ccode>description\u003C\u002Fcode>, \u003Ccode>background\u003C\u002Fcode>, \u003Ccode>public\u003C\u002Fcode>). \u003Ccode>402\u003C\u002Fcode> when storage is full, \u003Ccode>413\u003C\u002Fcode> over 20 MB, \u003Ccode>415\u003C\u002Fcode> for other types.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>PATCH \u002Fv1\u002Fadmin\u002Fbrand\u002Fassets\u002F{id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Change \u003Ccode>name\u003C\u002Fcode>, \u003Ccode>description\u003C\u002Fcode>, \u003Ccode>kind\u003C\u002Fcode>, \u003Ccode>background\u003C\u002Fcode>, \u003Ccode>public\u003C\u002Fcode> or \u003Ccode>order\u003C\u002Fcode>.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>DELETE \u002Fv1\u002Fadmin\u002Fbrand\u002Fassets\u002F{id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Delete a file and free its storage.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fv1\u002Fbrand\u002F{pk}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Public: the kit.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fbrand\u002F{pk}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Public: the page.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>GET \u002Fbrand\u002F{pk}\u002Ffiles\u002F{id}\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Public: one file, as a download.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>Invalid values answer \u003Ccode>400\u003C\u002Fcode> with every problem listed, and nothing is changed.\nThe full schema is in the OpenAPI docs at \u003Ccode>\u002F_docs\u002Fscalar\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"using-the-kit-elsewhere-in-helpbites\">Using the kit elsewhere in HelpBites\u003Ca class=\"heading-anchor\" href=\"#using-the-kit-elsewhere-in-helpbites\" aria-label=\"Link to this section\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>The kit is the project's look. Its accent (the page's \u003Ccode>accent\u003C\u002Fcode>, else the first\ncolour), logo, icon, typefaces and corner radius are what the chat widget,\nfeedback board, forms, onboarding, legal and blog pages, campaign mail and the\n\u003Ca href=\"\u002Fdocs\u002Fhub\">public hub\u003C\u002Fa> all wear, and the API hands them out as \u003Ccode>look\u003C\u002Fcode> (for example\nin \u003Ccode>GET \u002Fv1\u002Fprojects\u002F{pk}\u002Fpublic\u003C\u002Fcode>). The accent in the project's Settings is this\nsame colour: changing it there writes it here. Projects that never filled the kit\nin keep using the older Settings accent and logo until they do.\u003C\u002Fp>\n\u003Cp>In the panel, a logo or icon's menu has \u003Cstrong>Use as project logo\u003C\u002Fstrong> and \u003Cstrong>Use as\nproject icon\u003C\u002Fstrong>, which the chat widget, feedback board, emails and legal pages\nalready show. Onboarding steps can use any kit image as their picture.\u003C\u002Fp>\n",[6,10,13,16,19,22,25],{"id":7,"text":8,"level":9},"what-goes-in-it","What goes in it",2,{"id":11,"text":12,"level":9},"the-public-page","The public page",{"id":14,"text":15,"level":9},"put-it-on-your-site","Put it on your site",{"id":17,"text":18,"level":9},"in-a-swift-app","In a Swift app",{"id":20,"text":21,"level":9},"your-own-ui","Your own UI",{"id":23,"text":24,"level":9},"managing-the-kit-over-the-api","Managing the kit over the API",{"id":26,"text":27,"level":9},"using-the-kit-elsewhere-in-helpbites","Using the kit elsewhere in HelpBites",1792677543076]