{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"UI Customization","description":"Tilia Wallet Developer Documentation","siteUrl":"https://thunes-tilia-docs.redocly.app/","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":"ui-customization","__idx":0},"children":["UI Customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With a few simple tweaks, you can customize the Tilia Web UI to better reflect your brand and improve your overall customer experience."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customization options for the UI sit on the root of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Tilia.execute()"]}," config object. The table below describes the available customization options."]},{"$$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":["theme.backgroundColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The background color for the widget, takes in a valid hex value. Default is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#FFFFFF."]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["theme.primaryColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The primary color for the widget, takes in a valid hex value. This is used for buttons and links. Default is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#004D99"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fullWidth"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional parameter to set widget's width to your window size. Default is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flowConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional. There are various ways to customize flows through the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flowConfig"]}," parameter, which you can view in the individual flow documentation."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's an example of how you might customize the purchase widget:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"window.Tilia.execute({\n    rootId: \"my-div\", // for a div with id=\"my-div\"\n    flow: \"purchase\",\n    redirect: widgetRedirectUrl,\n    onComplete: handleComplete,\n    theme: {\n        backgroundColor: \"#323232\",\n        primaryColor: \"#47CC00\"\n    }\t\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This results in the following:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/widget-customized-theme.738b666645245b1a7bd7d0b74ea541bd5144bb39f8efe36410a18f2f5363c617.9c1bb791.png","alt":"styled payment widget"},"children":[]}]}]},"headings":[{"value":"UI Customization","id":"ui-customization","depth":1}],"frontmatter":{"seo":{"title":"UI Customization"}},"lastModified":"2024-07-24T17:23:10.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/web-uis/customization","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}