[{"data":1,"prerenderedAt":474},["ShallowReactive",2],{"bootstrap":3,"blog-adding-a-custom-app-to-your-commerce-layer-dashboard":277},{"navigation":4,"globalConfig":196,"forms":218},{"headerSections":5,"headerFooterLinks":67,"footer":76,"legalLinks":153,"socialLinks":176},[6,39,44,50,57,62],{"hasSubMenu":7,"title":8,"links":9,"columns":38},true,"Product",[10,20,26,32],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":16,"openForm":11},false,"navigation_link","Universal checkout","Sell anywhere","globe-simple",{"_modelApiKey":17,"slug":18,"title":19},"page","universal-checkout","Universal Checkout",{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":24,"openForm":11},"Distributed OMS","Manage orders","package",{"_modelApiKey":17,"slug":25,"title":21},"distributed-oms",{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":30,"openForm":11},"Promotion engine","Automated discounts","seal-percent",{"_modelApiKey":17,"slug":31,"title":27},"promotion-engine",{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":36,"openForm":11},"POS system","Operate stores","devices",{"_modelApiKey":17,"slug":37,"title":33},"pos-system",2,{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":41,"openForm":11,"title":40},"Pricing",{"_modelApiKey":42,"slug":43},"pricing_page","pricing",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":46,"openForm":11,"title":45},"Customers",{"_modelApiKey":47,"slug":48,"title":49},"customer_landing_page","customers","Customers page",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":52,"openForm":11,"form":54,"title":51},"Partners",{"_modelApiKey":17,"slug":53,"title":51},"partners",{"_modelApiKey":55,"slug":53,"name":56},"form","PartnersForm",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":58,"label":59,"isExternal":7,"url":60,"openForm":11,"title":61},"Docs Hub","Learn more","https:\u002F\u002Fdocs.commercelayer.io\u002F","Docs",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":64,"openForm":11,"title":63},"Blog",{"_modelApiKey":65,"slug":66},"blog_landing_page","blog",[68,72],{"text":69,"link":70},"Sign in",{"_modelApiKey":12,"text":69,"isExternal":7,"url":71,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_in",{"text":73,"link":74},"Sign up for free",{"_modelApiKey":12,"text":73,"isExternal":7,"url":75,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up",[77,89,109,132],{"hasSubMenu":7,"title":8,"links":78},[79,81,83,85,87],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":80,"openForm":11},{"_modelApiKey":17,"slug":18,"title":19},{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":82,"openForm":11},{"_modelApiKey":17,"slug":25,"title":21},{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":84,"openForm":11},{"_modelApiKey":17,"slug":31,"title":27},{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":86,"openForm":11},{"_modelApiKey":17,"slug":37,"title":33},{"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":88,"openForm":11},{"_modelApiKey":42,"slug":43},{"hasSubMenu":7,"title":90,"links":91},"Resources",[92,94,99,104,107],{"showTag":11,"_modelApiKey":12,"text":93,"isExternal":7,"url":60,"openForm":11},"Documentation",{"showTag":11,"_modelApiKey":12,"text":95,"label":95,"isExternal":11,"link":96,"openForm":11},"Agentic Commerce",{"_modelApiKey":17,"slug":97,"title":98},"agentic-commerce-whitepaper","Agentic Commerce Whitepaper",{"showTag":11,"_modelApiKey":12,"text":100,"isExternal":11,"link":101,"openForm":11},"Core concepts",{"_modelApiKey":17,"slug":102,"title":103},"headless-commerce","Headless commerce",{"showTag":11,"_modelApiKey":12,"text":105,"isExternal":7,"url":106,"openForm":11},"Changelog","https:\u002F\u002Fdocs.commercelayer.io\u002Fchangelog\u002F",{"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":108,"openForm":11},{"_modelApiKey":65,"slug":66},{"hasSubMenu":7,"title":110,"links":111},"Company",[112,116,118,121,126],{"showTag":11,"_modelApiKey":12,"text":113,"isExternal":11,"link":114,"openForm":11},"Vision",{"_modelApiKey":17,"slug":115,"title":113},"vision",{"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":117,"openForm":11},{"_modelApiKey":47,"slug":48,"title":49},{"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":119,"openForm":11,"form":120},{"_modelApiKey":17,"slug":53,"title":51},{"_modelApiKey":55,"slug":53,"name":56},{"showTag":11,"_modelApiKey":12,"text":122,"isExternal":11,"link":123,"openForm":11},"Security",{"_modelApiKey":17,"slug":124,"title":125},"security","Security at Commerce Layer",{"showTag":11,"_modelApiKey":12,"text":127,"label":128,"isExternal":11,"openForm":7,"form":129},"Giveback","Giveback program",{"_modelApiKey":55,"slug":130,"name":131},"giveback","GivebackForm",{"hasSubMenu":7,"title":133,"links":134},"Get in touch",[135,140,145,149],{"showTag":11,"_modelApiKey":12,"text":136,"isExternal":11,"openForm":7,"form":137},"Contact",{"_modelApiKey":55,"slug":138,"name":139},"contact","ContactUsForm",{"showTag":11,"_modelApiKey":12,"text":141,"isExternal":11,"openForm":7,"form":142},"Book a demo",{"_modelApiKey":55,"slug":143,"name":144},"demo","RequestDemoForm",{"showTag":11,"_modelApiKey":12,"text":146,"label":147,"isExternal":7,"url":148,"openForm":11},"Support","Email support","mailto:support@commercelayer.io",{"showTag":11,"_modelApiKey":12,"text":150,"label":151,"isExternal":7,"url":152,"openForm":11},"Community","Discord community","https:\u002F\u002Fdiscord.gg\u002Fcommercelayer",{"hasSubMenu":7,"title":154,"links":155},"Legal",[156,161,165,169,173],{"showTag":11,"_modelApiKey":12,"text":157,"label":158,"isExternal":7,"url":159,"openForm":11,"htmlClassNames":160},"Terms","Terms and conditions","\u002Flegal-embed\u002Fterms-of-service","iubenda-nostyle no-brand iubenda-noiframe iubenda-embed",{"showTag":11,"_modelApiKey":12,"text":162,"label":163,"isExternal":7,"url":164,"openForm":11,"htmlClassNames":160},"Privacy","Privacy policy","\u002Flegal-embed\u002Fprivacy-policy",{"showTag":11,"_modelApiKey":12,"text":166,"label":167,"isExternal":7,"url":168,"openForm":11,"htmlClassNames":160},"Cookies","Cookie policy","\u002Flegal-embed\u002Fcookie-policy",{"showTag":11,"_modelApiKey":12,"text":170,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":172},"Notice at collection","#","iubenda-cs-uspr-link",{"showTag":11,"_modelApiKey":12,"text":174,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":175},"Privacy preferences","iubenda-cs-preferences-link",[177,180,184,188,192],{"title":178,"type":179,"url":152,"isExternal":7},"Discord","discord-logo",{"title":181,"type":182,"url":183,"isExternal":7},"Github","github","https:\u002F\u002Fgithub.com\u002Fcommercelayer",{"title":185,"type":186,"url":187,"isExternal":7},"Bluesky","bluesky-logo","https:\u002F\u002Fbsky.app\u002Fprofile\u002Fcommercelayer.io",{"title":189,"type":190,"url":191,"isExternal":7},"X","x-logo","https:\u002F\u002Fx.com\u002Fcommercelayer",{"title":193,"type":194,"url":195,"isExternal":7},"LinkedIn","linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fcommerce-layer",{"pagesWithoutCtaPanel":197,"ctaPanel":198,"notification":208,"showApiResponseTime":11,"newsletterSignup":216},[],{"title":199,"subtitle":200,"ctas":201},"Ready to get started?","Discover how we can help your business.",[202,205],{"_modelApiKey":203,"text":204,"isExternal":7,"url":75,"openForm":11},"link","Get started for free",{"_modelApiKey":203,"text":206,"isExternal":11,"openForm":7,"form":207},"Contact us",{"_modelApiKey":55,"slug":138,"name":139},{"showNotification":7,"link":209,"linkText":210,"text":215},{"_modelApiKey":203,"text":210,"isExternal":11,"link":211,"openForm":11},"Read article",{"_modelApiKey":212,"slug":213,"title":214},"blog_post","the-new-payments-api-built-for-how-people-pay-now","The new Payments API. Built for how people pay now.","\u003Cp>The new Payments API. Built for how people pay now.\u003C\u002Fp>\n",{"ctaText":217},"Subscribe",[219,225,229,236,240,246,249,253,261,262,267,272,274],{"_modelApiKey":55,"slug":220,"pardotFormEmbedCode":221,"formEmbedMinHeight":222,"successTitle":223,"successCopy":224},"agentic-commerce","https:\u002F\u002Fcommercelayer.fillout.com\u002Ft\u002F5w4Khwgxr6us?whitepaper=agentic",520,"Thank you for your request!","We’ll be in touch soon to arrange a date and time for your personalized demo.",{"_modelApiKey":55,"slug":226,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"successTitle":223,"successCopy":224},"shopify","https:\u002F\u002Fform.fillout.com\u002Ft\u002FgVnLSmKZwRus",850,{"_modelApiKey":55,"slug":130,"pardotFormEmbedCode":230,"formEmbedMinHeight":231,"displayTitle":232,"copy":233,"successTitle":234,"successCopy":235},"https:\u002F\u002Fform.fillout.com\u002Ft\u002FmVDF8aAiofus",500,"We give back.","\u003Cp>Part of Commerce Layer's company ethos is to empathize and support one another: co-workers, customers, and community. We want to do our part to help nonprofit organizations and small businesses who may feel adversely affected by the current global economic climate, and as a result, need in-kind support to reach their customers.\u003C\u002Fp>\n\n\u003Cp>If this general description matches your organization’s needs, please tell us your story by completing the following form so we can consider helping your cause.\u003C\u002Fp>\n","Thank you!","We will contact you soon to learn more about your story.",{"_modelApiKey":55,"slug":237,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":238,"copy":239},"book-an-onboarding-session","Book an onboarding session","\u003Cp>Schedule some time and our devs will help you set up a Commerce Layer + Sanity store.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":241,"pardotFormEmbedCode":242,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-our-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ComposableCommerce",450,"Download our whitepaper.","Check your inbox. You should receive a download link soon.",{"_modelApiKey":55,"slug":247,"pardotFormEmbedCode":248,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-the-content-and-commerce-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ContentAndCommerce",{"_modelApiKey":55,"slug":250,"pardotFormEmbedCode":251,"formEmbedMinHeight":243,"displayTitle":244,"copy":252,"successTitle":234,"successCopy":245},"whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=Jamstack","\u003Cp>Commerce Layer is the perfect platform for building commerce on the Jamstack. Convert any design into pixel perfect HTML pages. Connect a best-of-breed headless CMS. Go serverless and forget the hassle of managing complex infrastructures.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":254,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},"contact-links","https:\u002F\u002Fform.fillout.com\u002Ft\u002FeWPyhHGHT7us",750,"Contact us.","\u003Cp>Tell us about your project. Our team will reach out to you for a personalized offer.\u003C\u002Fp>\n","Thanks for your message!","We’ll be in touch soon to discuss your project details.",{"_modelApiKey":55,"slug":138,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},{"_modelApiKey":55,"slug":263,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":264,"successTitle":265,"successCopy":266},"demo-embed","Want to see it in action? Request a demo.","Thanks for your request!","We’ll be in touch soon to arrange a date and time for your free live demo.",{"_modelApiKey":55,"slug":53,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"https:\u002F\u002Fform.fillout.com\u002Ft\u002F9MTkDWMUSqus","Become our partner.","\u003Cp>Join us and get our guidance in helping your clients succeed. Our partners are our ambassadors. We are committed to your success as much as you are.\u003C\u002Fp>\n","We will contact you soon to discuss the details of our partnership.",{"_modelApiKey":55,"slug":273,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"partners-embed",{"_modelApiKey":55,"slug":143,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":275,"copy":276,"successTitle":265,"successCopy":266},"Get a free live demo.","\u003Cp>Get a personalized demo and learn more about what Commerce Layer can do for your company.\u003C\u002Fp>\n",{"_modelApiKey":212,"link":278,"subtitle":283,"date":283,"author":284,"additionalAuthors":294,"icon":295,"abstract":296,"tag":297,"displayTitle":279,"cardRatio":299,"featured":11,"seoMetaTags":300,"layout":364,"blogPostCarousel":302,"_seoMetaTags":435,"authors":469},{"text":279,"isExternal":11,"url":280,"link":281},"Adding a custom app to your Commerce Layer dashboard.","",{"_modelApiKey":212,"slug":282},"adding-a-custom-app-to-your-commerce-layer-dashboard","September 25, 2025",{"name":285,"picture":286},"Giuseppe Ciotola",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1758637812-giuseppe.jpg","Giuseppe Ciotola avatar",1280,"jpg",{"x":292,"y":292},0.5,{},[],"circles-three-plus","Unlock new workflows in Commerce Layer by adding custom apps to your dashboard — flexible, secure, and tailored to your team’s needs.",{"color":298,"name":8},"gray","portrait",[301,305,309,312,316,319,322,326,330,334,337,341,345,349,353,356,360],{"attributes":302,"tag":303,"content":304},null,"title","Adding a custom app to you Commerce Layer dashboard",{"attributes":306,"tag":308,"content":302},{"property":307,"content":304},"og:title","meta",{"attributes":310,"tag":308,"content":302},{"name":311,"content":304},"twitter:title",{"attributes":313,"tag":308,"content":302},{"name":314,"content":315},"description","Learn how to extend the Commerce Layer dashboard with custom apps to unlock new workflows, streamline operations, and keep role-based security.",{"attributes":317,"tag":308,"content":302},{"property":318,"content":315},"og:description",{"attributes":320,"tag":308,"content":302},{"name":321,"content":315},"twitter:description",{"attributes":323,"tag":308,"content":302},{"property":324,"content":325},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1758644624-custom-apps-pt1.jpg?auto=format&fit=max&w=1200",{"attributes":327,"tag":308,"content":302},{"property":328,"content":329},"og:image:width","1200",{"attributes":331,"tag":308,"content":302},{"property":332,"content":333},"og:image:height","630",{"attributes":335,"tag":308,"content":302},{"name":336,"content":325},"twitter:image",{"attributes":338,"tag":308,"content":302},{"property":339,"content":340},"og:locale","en",{"attributes":342,"tag":308,"content":302},{"property":343,"content":344},"og:type","article",{"attributes":346,"tag":308,"content":302},{"property":347,"content":348},"og:site_name","Commerce Layer",{"attributes":350,"tag":308,"content":302},{"property":351,"content":352},"article:modified_time","2025-10-08T16:24:48Z",{"attributes":354,"tag":308,"content":302},{"property":355,"content":280},"article:publisher",{"attributes":357,"tag":308,"content":302},{"name":358,"content":359},"twitter:card","summary_large_image",{"attributes":361,"tag":308,"content":302},{"name":362,"content":363},"twitter:site","@commercelayer",[365,371,374,377,382,385,388,397,404,407,410,417,420,425,428,431],{"_modelApiKey":366,"copy":367,"listStyle":368,"darkTheme":11,"buttons":369,"color":370,"indent":7},"wysiwyg","\u003Cp>While most merchants use our APIs to power their storefronts and integrations, the back-office dashboard is where everyday operations happen. From orders to shipments to inventory, the dashboard groups all resources into apps that users can access depending on their roles and permissions.\u003C\u002Fp>\n\n\u003Cp>What many don’t know is that you are not limited to the built-in apps. You can extend the dashboard with your own \u003Cstrong>custom apps\u003C\u002Fstrong>. This unlocks completely new workflows, tailored to your organization’s needs, while still leveraging Commerce Layer’s authentication and permission model.\u003C\u002Fp>\n\n\u003Cp>This article explains how custom apps work, why you might need them, and how to add one to your dashboard.\u003C\u002Fp>\n","directional",[],"violet",{"_modelApiKey":366,"copy":372,"listStyle":368,"darkTheme":11,"buttons":373,"color":370,"indent":11},"\u003Ch3>Why custom apps matter\u003C\u002Fh3>\n\n\u003Cp>The dashboard comes with built-in apps like \u003Cem>Orders\u003C\u002Fem> and \u003Cem>Shipments\u003C\u002Fem>. Each app has a well-defined scope of resources and operations. For example, the \u003Cem>Orders\u003C\u002Fem> app works with markets, orders, and line items. A generated access token ensures the app can only request the resources it needs, with either full access, partial access or read-only mode. You can explore the predefined abilities for each app in the following \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fprovisioning\u002Fgetting-started\u002Fapplications\">documentation\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Cp>Sometimes your workflow goes beyond what the existing apps provide. Maybe you want to combine data from both orders and shipments. Maybe you want to build a dedicated reporting tool for your finance team. Or maybe you need an internal dashboard to manage marketing campaigns alongside promotions.\u003C\u002Fp>\n\n\u003Cp>This is where custom apps come in. They give you full control over the experience while still integrating seamlessly with the dashboard’s authentication, roles, and permissions.\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":375,"listStyle":368,"darkTheme":11,"buttons":376,"color":370,"indent":11},"\u003Ch3>How custom apps work\u003C\u002Fh3>\n\n\u003Cp>When you add a custom app, it appears in the dashboard alongside the built-in apps. The difference is that clicking it opens a new browser window or tab, rather than loading inside the dashboard frame. Commerce Layer automatically generates an access token for the current user and appends it to your app URL as a query parameter:\u003C\u002Fp>\n",[],{"_modelApiKey":378,"code":379,"showLineNumbers":11,"highlightLines":280,"language":380,"size":381},"code_block","https:\u002F\u002Fyour-app.com?accessToken=xxxx","http","Standard",{"_modelApiKey":366,"copy":383,"listStyle":368,"darkTheme":11,"buttons":384,"color":370,"indent":11},"\u003Cp>Your app reads this token, authenticates requests against the Commerce Layer API, and applies the same permission model used by built-in apps. This means admins retain full access, while members are restricted to only the apps and abilities assigned to them.\u003C\u002Fp>\n\n\u003Cp>If your app needs access to multiple resource groups at once, you can choose the \u003Ccode>generic\u003C\u002Fcode> app type. This generates an access token \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fprovisioning\u002Fgetting-started\u002Fapplications#generic\">with permission to all resources\u003C\u002Fa>, ensuring maximum flexibility.\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":386,"listStyle":368,"darkTheme":11,"buttons":387,"color":370,"indent":11},"\u003Ch3>Adding a custom app in the dashboard\u003C\u002Fh3>\n\n\u003Cp>You can add a new custom app in a few steps:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Go to \u003Cem>Developer > Custom apps\u003C\u002Fem> in the dashboard.\u003C\u002Fli>\n\u003Cli>Click \u003Cem>New custom app\u003C\u002Fem>.\u003C\u002Fli>\n\u003Cli>Select the app type based on the resources you need (\u003Cem>Orders\u003C\u002Fem>, \u003Cem>Shipments\u003C\u002Fem>, or other built-in sets if you just need to customize one of those kinds of app — \u003Cem>Generic\u003C\u002Fem>, if your app requires access to multiple resource sets).\u003C\u002Fli>\n\u003Cli>Enter the app name and the URL where your app is served.\u003C\u002Fli>\n\u003Cli>Save and try it.\u003C\u002Fli>\n\u003C\u002Fol>\n",[],{"_modelApiKey":389,"border":7,"caption":280,"image":390,"size":396,"darkTheme":11,"rounded":7,"color":370},"image_block",{"url":391,"alt":392,"title":392,"width":289,"height":393,"format":290,"focalPoint":394,"customData":395},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1758641553-add-custom-app.jpg","Adding a custom app",884,{"x":292,"y":292},{},"standard",{"_modelApiKey":389,"border":7,"caption":280,"image":398,"size":396,"darkTheme":11,"rounded":7,"color":370},{"url":399,"alt":400,"title":400,"width":289,"height":401,"format":290,"focalPoint":402,"customData":403},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1758641881-list-of-apps.jpg","List of apps",1002,{"x":292,"y":292},{},{"_modelApiKey":366,"copy":405,"listStyle":368,"darkTheme":11,"buttons":406,"color":370,"indent":11},"\u003Cp>Your app is now listed in the dashboard. Any user with the right role can open it and start using it immediately.\u003C\u002Fp>\n",[],{"_modelApiKey":366,"copy":408,"listStyle":368,"darkTheme":11,"buttons":409,"color":370,"indent":11},"\u003Ch3>Building a custom app\u003C\u002Fh3>\n\n\u003Cp>A custom app is simply a web application that you host yourself. You can build it with any framework or technology stack. All that matters is that your app can:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Parse the \u003Ccode>accessToken\u003C\u002Fcode> parameter from the query string.\u003C\u002Fli>\n\u003Cli>Use it to authenticate against the Commerce Layer API.\u003C\u002Fli>\n\u003Cli>Handle roles and permissions according to the token scope.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>While you could start from scratch, we recommend using our open source dashboard apps as a base. They are built with \u003Cstrong>React\u003C\u002Fstrong>, \u003Cstrong>TypeScript\u003C\u002Fstrong>, \u003Cstrong>Tailwind\u003C\u002Fstrong>, and \u003Cstrong>Vite\u003C\u002Fstrong>.\u003C\u002Fp>\n",[],{"_modelApiKey":411,"title":412,"preTitle":413,"linkText":414,"darkTheme":11,"link":415},"link_block","Dashboard Apps","Open-source","Browse",{"_modelApiKey":203,"text":59,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":416,"link":302,"anchor":280,"openForm":11,"form":302,"htmlClassNames":280},"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fdashboard-apps",{"_modelApiKey":366,"copy":418,"listStyle":368,"darkTheme":11,"buttons":419,"color":370,"indent":11},"\u003Cp>By using this repo as your starter template, you inherit:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>The same look and feel as the dashboard.\u003C\u002Fli>\n\u003Cli>Built-in support for authentication.\u003C\u002Fli>\n\u003Cli>Pre-configured UI patterns and layouts.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>On top of this, you can use our \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcommercelayer\u002Fapp-elements\">App Elements\u003C\u002Fa> library.\u003C\u002Fp>\n",[],{"_modelApiKey":411,"title":421,"preTitle":93,"linkText":59,"darkTheme":11,"link":422},"App Elements",{"_modelApiKey":203,"text":423,"label":280,"subtitle":280,"icon":280,"isExternal":7,"url":424,"link":302,"anchor":280,"openForm":11,"form":302,"htmlClassNames":280},"App Elements Storybook","https:\u002F\u002Fcommercelayer.github.io\u002Fapp-elements\u002F",{"_modelApiKey":366,"copy":426,"listStyle":368,"darkTheme":11,"buttons":427,"color":370,"indent":11},"\u003Cp>This React components library powers our own apps and includes:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Hooks for API calls.\u003C\u002Fli>\n\u003Cli>Components for lists, detail views, and forms.\u003C\u002Fli>\n\u003Cli>Styling consistent with the dashboard.\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":366,"copy":429,"listStyle":368,"darkTheme":11,"buttons":430,"color":370,"indent":11},"\u003Ch3>Beyond the basics\u003C\u002Fh3>\n\n\u003Cp>Once your custom app is running, you can iterate quickly. Some ideas:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Create dashboards that aggregate data across multiple resources.\u003C\u002Fli>\n\u003Cli>Build custom workflows for customer service teams.\u003C\u002Fli>\n\u003Cli>Add internal-only tools without touching your storefront code.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Because everything is powered by Commerce Layer’s APIs and permission system, your custom apps remain secure and consistent with the rest of the platform.\u003C\u002Fp>\n",[],{"_modelApiKey":432,"icon":433,"copy":434,"color":370},"banner","bookmark","\u003Cp>Now that you know what custom apps are and how to add them to your dashboard, it’s time to get hands-on. In the \u003Ca href=\"\u002Fblog\u002Fbuild-your-first-custom-dashboard-app-in-minutes\">next part\u003C\u002Fa> of this article we’ll walk through creating a working custom app step by step, using our open source templates to get you up and running fast.\u003C\u002Fp>\n",[436,437,439,441,443,445,447,449,451,453,455,457,459,461,463,465,467],{"attributes":302,"tag":303,"content":304},{"attributes":438,"tag":308,"content":302},{"property":307,"content":304},{"attributes":440,"tag":308,"content":302},{"name":311,"content":304},{"attributes":442,"tag":308,"content":302},{"name":314,"content":315},{"attributes":444,"tag":308,"content":302},{"property":318,"content":315},{"attributes":446,"tag":308,"content":302},{"name":321,"content":315},{"attributes":448,"tag":308,"content":302},{"property":324,"content":325},{"attributes":450,"tag":308,"content":302},{"property":328,"content":329},{"attributes":452,"tag":308,"content":302},{"property":332,"content":333},{"attributes":454,"tag":308,"content":302},{"name":336,"content":325},{"attributes":456,"tag":308,"content":302},{"property":339,"content":340},{"attributes":458,"tag":308,"content":302},{"property":343,"content":344},{"attributes":460,"tag":308,"content":302},{"property":347,"content":348},{"attributes":462,"tag":308,"content":302},{"property":351,"content":352},{"attributes":464,"tag":308,"content":302},{"property":355,"content":280},{"attributes":466,"tag":308,"content":302},{"name":358,"content":359},{"attributes":468,"tag":308,"content":302},{"name":362,"content":363},[470],{"name":285,"picture":471},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":472,"customData":473},{"x":292,"y":292},{},1791534737642]