{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Customizing the appearance of iframe","meta":[{"name":"robots","content":"noindex"}],"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":"customizing-the-appearance-of-iframe","__idx":0},"children":["Customizing the appearance of iframe"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customize the branding and appearance of the Spotnana platform on your webpage. Administrators can use the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://university.spotnana.com/pages/tmc-help-center-topics/resources/0199ba18-f4b5-7b50-a2a4-36abf8de32a7"},"children":["platform branding customization document"]}," to add custom branding."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"security-considerations","__idx":1},"children":["Security considerations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here are some important points to keep in mind while implementing the iframe integration:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Origin validation:"]}," Spotnana validates the origin of incoming ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postMessage"]}," events. Your domain must be ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://en.wikipedia.org/wiki/Whitelist"},"children":["whitelisted"]}," by Spotnana before the integration can work. For local development and testing, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["localhost:3000"]}," URL is permitted by default."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Credentials security:"]}," Never expose your client ID or client secret in your codebase. All token exchange requests must go through your backend systems."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Secure token handling:"]}," Store tokens securely on your backend. Only pass tokens to the frontend when responding to a ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#frontend-token-exchange-process"},"children":["TOKEN_EXCHANGE_REQUEST"]}," from the iframe."]}]}]},"headings":[{"value":"Customizing the appearance of iframe","id":"customizing-the-appearance-of-iframe","depth":1},{"value":"Security considerations","id":"security-considerations","depth":2}],"frontmatter":{"seo":{"title":"Customizing the appearance of iframe"}},"lastModified":"2026-03-19T13:36:30.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/integration/iframe/iframe-custom-appearance","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}