{"templateId":"markdown","versions":[{"version":"2.0","label":"v2.0","link":"/percents-api/embedded-widget/appearance","default":true,"active":true,"folderId":"27d36c3a"}],"sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Appearance","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"appearance","__idx":0},"children":["Appearance"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["appearance"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Percents.init(...)"]}," to align the SDK with the issuer host page."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"Percents.init({\n  container: '#percents-widget',\n  sessionEndpoint: '/api/percents/session',\n  appearance: {\n    displayName: 'Branded Rewards',\n    logoUrl: 'https://issuer.example.com/logo.svg',\n    primaryColor: '#0079d2',\n    accentColor: '#028a00',\n    fontFamily: \"Gilroy, 'Gilroy Regular', ui-sans-serif, system-ui\",\n  },\n});\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Field"},"children":["Field"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["displayName"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Name shown in the SDK header. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Branded Rewards"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["logoUrl"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["HTTPS image URL shown beside the display name."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["primaryColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Six-digit hex color for primary actions and selected states."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accentColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Six-digit hex color for secondary emphasis and highlights."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["CSS font-family string applied inside the iframe."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To apply a new appearance after mount, call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["destroy()"]}," on the current SDK instance and initialize a new one."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Try the fields in the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/percents-api/embedded-widget/playground"},"children":["SDK Playground"]},"."]}]},"headings":[{"value":"Appearance","id":"appearance","depth":1}],"frontmatter":{"seo":{"title":"Appearance"}},"lastModified":"2026-07-21T18:22:26.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/percents-api/embedded-widget/appearance","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}