How to implement app preview mode in a Voyado Elevate site integration.
The Elevate App offers an extended on-site feature set for merchandisers when fully integrated.Several features in the Experience app include a preview function. This allows a user to change and test settings, product selections, and more before publishing them to a live site. To preview something from the apps, a preview URL is required. For the apps, base URLs can be set in the Admin app, or a URL can be entered in the interface for each preview.Preview mode can be directly accessed through the Storefront API by the aid of a viewId parameter. All page queries accept a viewId parameter, which can take two different values: production and preview. The viewId defaults to production if it is omitted in a page query, so in practice the parameter should only be used for previewing purposes, that is, when in preview mode.When clicking a Preview link in the Apps, a new browser tab is opened with the URL that is to be previewed. The URL is also appended with ?PREVIEW=true.
Preview mode with the API should be implemented so that it is compatible with the app preview actions.
Whenever ?PREVIEW=true is encountered in the URL, requests to Elevate should be sent with viewId=preview.
Recommended. Persist the viewId parameter with the value preview when in preview mode to enable a user to navigate pages and still see everything with preview content.
Recommended. Implement a visual indicator to show the user that preview mode is active. For reference, see the image below.
Recommended. Implement a toggle that allows the user to manually exit preview mode. For reference, see the image below.
Optional. Restrict access to preview mode with, for example, a custom login that only enables functionality for certain levels of user access when logged in.
Last modified on October 28, 2026
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Product Discovery developer docs","description":"Product Discovery developer docs","colors":{"primary":"#fe4a49","light":"#ff8785","dark":"#4c093e"},"logo":{"light":"https://mintcdn.com/elevatedocs/1uBQSi2ovHREOrJm/assets/logo/voyado-light-logo.svg?fit=max\u0026auto=format\u0026n=1uBQSi2ovHREOrJm\u0026q=85\u0026s=6ab6674fd4ef6d98e2e482644482eaf8","dark":"https://mintcdn.com/elevatedocs/1uBQSi2ovHREOrJm/assets/logo/voyado-dark-logo.svg?fit=max\u0026auto=format\u0026n=1uBQSi2ovHREOrJm\u0026q=85\u0026s=ce9a169f8b3235ef225c95f50b3e3853","href":"/docs/home/about"},"favicon":"https://mintcdn.com/elevatedocs/U2rlNuBdHmV1mTwc/assets/logo/favicon-bw-32x32.png?fit=max\u0026auto=format\u0026n=U2rlNuBdHmV1mTwc\u0026q=85\u0026s=5b0c7f8a7b5c7f1c304eacf65bc6b39d","api":{"playground":{"display":"interactive"},"examples":{"defaults":"all","languages":["curl","javascript","java","csharp","python"],"prefill":true}},"appearance":{"default":"light"},"background":{"color":{"light":"#ffffff","dark":"#1e2129"}},"navbar":{"links":[{"icon":"/assets/icons/help-center-link.png","href":"https://help.elevate.voyado.com/hc/en-gb","label":"Help Center"}],"primary":{"type":"button","label":"Contact us","href":"https://voyado.com/about-voyado/contact-us/"}},"seo":{"metatags":{"og:site_name":"Product Discovery developer docs","og:type":"website"},"organization":{"id":"https://voyado.com/","legalName":"Voyado Lund AB","url":"https://voyado.com/","logo":"https://voyado.com/wp-content/uploads/2023/01/cropped-Favicon-192x192.png","sameAs":["https://www.linkedin.com/company/voyadoab/","https://www.facebook.com/voyado/","https://www.instagram.com/voyado_official/"]},"indexing":"navigable"},"fonts":{"heading":{"family":"Voyado Text","source":"https://mintlify-assets.b-cdn.net/VoyadoText-Medium.woff2","format":"woff2"},"body":{"family":"Voyado Regular","source":"https://mintlify-assets.b-cdn.net/VoyadoText-Regular.woff2","format":"woff2"}},"styling":{"eyebrows":"breadcrumbs","latex":false},"integrations":{"cookies":{"key":"mintlify_telemetry","value":"granted"}},"contextual":{"options":["claude","chatgpt","assistant","copy","view","mcp"],"display":"header"},"metadata":{"timestamp":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"elevatedocs","hasAudioNarration":false,"actualSubdomain":"elevatedocs","customDomains":["product-discovery.developer.voyado.com"],"gitSource":{"type":"github","owner":"voyado","repo":"elevate-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"latestBuiltDeploymentHistoryId":"6ae1b640661bff0c6e7268b7","collectionId":"6995d297-6474-4fdf-99f9-16c317ed200c","liveDeploymentHistoryId":"6ae1b640661bff0c6e7268b7","schemaVersion":"v3"},"feedback":{"thumbs":false,"agentFeedback":false},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae1b640661bff0c6e7268b7","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"default","tag":"API","count":69},{"language":"default","tag":"Admin","count":42},{"language":"default","tag":"v3","count":39},{"language":"default","tag":"Guides","count":24},{"language":"default","tag":"v4","count":23},{"language":"default","tag":"Integration","count":23},{"language":"default","tag":"Storefront","count":22},{"language":"default","tag":"Add-ons","count":12},{"language":"default","tag":"Export","count":12},{"language":"default","tag":"Import","count":12}],"searchSettings":{"maxResults":8,"showContentSnippets":false,"isFiltersEnabled":false}},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":true,"enableContextualStarterQuestions":true,"enableAskAiSearchBar":true,"deflection":{"enabled":true,"type":"link","url":"https://voyado.com/about-voyado/contact-us/"}},"basePath":"","hasChatPermissions":true,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"privacy":{"consentBanner":{"enabled":false}},"googleFontsInlined":false},"customCss":[{"filePath":"styles/style.css","content":".border-b{border-bottom-width:2px;border-color:rgb(var(--gray-200))}html.dark .border-b,html.dark .prose pre{border-color:rgba(255,255,255,.18)}.prose-sm{font-size:.9rem;line-height:1.7}html.dark{--gray-50:222 227 234;--gray-100:213 218 226;--gray-200:197 203 213;--gray-300:176 183 194;--gray-400:145 152 164}html.dark .prose{--tw-prose-body:#b3b9c4;--tw-prose-headings:#d2d7e0;--tw-prose-lead:#a7aeba;--tw-prose-links:#c5cbd5;--tw-prose-bold:#dde2ea;--tw-prose-counters:#8d95a2;--tw-prose-bullets:#626a78;--tw-prose-hr:#363c47;--tw-prose-quotes:#cdd3dc;--tw-prose-quote-borders:#454c58;--tw-prose-captions:#8d95a2;--tw-prose-code:#cdd3dc;--tw-prose-pre-code:#cdd3dc;--tw-prose-th-borders:#5c6474;--tw-prose-td-borders:#4a5162}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:500;background-color:#f8f8f7;border:1px solid #c7dbe8;border-radius:4px;padding-left:.25em;padding-right:.25em}html.dark .prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:#cdd3dc;background-color:#272c36;border-color:#3a404b}.prose pre code{background-color:transparent!important;border:0!important;color:inherit!important;font-weight:400;padding-left:0!important}.py-1\\.5{padding-top:1px;padding-bottom:1px}@media (min-width:1024px){.lg\\:mt-8{margin-top:1rem}}html.dark #navigation-items a[aria-current=page]{background-color:rgb(var(--primary)/.14);color:#ff8785}html.dark #navigation-items a[aria-current=page] *{color:inherit}html.dark .code-block.dark\\:bg-white\\/5,html.dark .dark\\:bg-codeblock{background-color:#1e2129}html.dark .dark\\:bg-codeblock\\/50{background-color:rgb(30 33 41/.5)}html.dark .prose table thead tr,html.dark [data-component-part=code-block-header]{background-color:rgba(255,255,255,.06)}html.dark .code-block-background,html.dark [data-fade-overlay],html.dark pre.shiki{--shiki-dark-bg:#1e2129!important;--fade-color-dark:#1e2129!important}.sidebar-title{margin-bottom:-.3rem;font-size:15px}#pagination{display:none!important}.help-center-card [data-component-part=card-icon]{width:2rem;height:2rem;flex-shrink:0;display:flex;align-items:center;justify-content:center}.help-center-card [data-component-part=card-icon] img{width:2rem;height:2rem;object-fit:contain}#topbar-cta-button a>span:first-child{background-color:rgb(var(--primary)/.1);border:1px solid rgb(var(--primary)/.25)}html.dark #topbar-cta-button a>span:first-child{background-color:rgb(var(--primary)/.14);border-color:rgb(var(--primary)/.3)}#topbar-cta-button a:hover>span:first-child{background-color:rgb(var(--primary)/.18);opacity:1}html.dark #topbar-cta-button a:hover>span:first-child{background-color:rgb(var(--primary)/.22)}#topbar-cta-button a span,#topbar-cta-button a svg,#topbar-cta-button a>div{color:rgb(var(--primary))}html.dark #topbar-cta-button a span,html.dark #topbar-cta-button a svg,html.dark #topbar-cta-button a>div{color:#ff8785}.prose table{border-collapse:collapse;width:100%;max-width:100%;table-layout:auto}.prose table td,.prose table th{border:0;padding:.4rem .5rem;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.accordion [data-table-wrapper=true],[data-component-part=accordion-content] [data-table-wrapper=true]{--page-padding:0px;max-width:100%}.prose table thead tr{background-color:rgba(0,0,0,.05)}html.dark .prose table thead{border-color:#4b5261}html.dark .prose table tr{border-color:#3b4250}.prose table thead th{font-weight:600}.prose table tbody td{background-color:#fff}html.dark .prose table tbody td{background-color:transparent}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.6em;margin-bottom:.7em}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)),.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.5em;margin-bottom:.6em}#mobile-nav [data-elevate-tab-dropdown]{display:none}#mobile-nav [data-elevate-tab-list]{padding-bottom:.75rem;border-bottom:1px solid rgb(var(--gray-200)/.7)}html.dark #mobile-nav [data-elevate-tab-list]{border-bottom-color:rgb(255 255 255/.07)}#mobile-nav [data-elevate-tab-list] ul{display:flex;flex-direction:column;gap:.125rem;margin:0;padding:0;list-style:none}#mobile-nav [data-elevate-tab-list] a{display:block;padding:.375rem .75rem .375rem 1rem;border-radius:.75rem;font-size:1rem;font-weight:500;line-height:1.5rem;color:rgb(var(--gray-700));text-decoration:none}html.dark #mobile-nav [data-elevate-tab-list] a{color:rgb(var(--gray-300))}#mobile-nav [data-elevate-tab-list] a:hover{background-color:rgb(var(--gray-600)/.05)}html.dark #mobile-nav [data-elevate-tab-list] a:hover{background-color:rgb(var(--gray-200)/.05)}#mobile-nav [data-elevate-tab-list] a[data-active]{background-color:rgb(var(--primary)/.1);color:rgb(var(--primary))}html.dark #mobile-nav [data-elevate-tab-list] a[data-active]{background-color:rgb(var(--primary-light)/.1);color:rgb(var(--primary-light))}"}],"page":{"pagePath":"docs/integration/site-integration/app-integration","slug":"/docs/integration/site-integration/app-integration","pageMetadata":{"title":"App preview integration","description":"How to implement app preview mode in a Voyado Elevate site integration.","href":"/docs/integration/site-integration/app-integration"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"How to implement app preview mode in a Voyado Elevate site integration.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,li:`li`,p:`p`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{Heading,Icon,OptimizedImage}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Icon)_missingMdxReference(`Icon`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`The Elevate App offers an extended on-site feature set for merchandisers when fully integrated.`}),`\n`,_jsxs(_components.p,{children:[`Several features in the `,_jsx(_components.a,{href:`https://help.elevate.voyado.com/hc/en-gb/articles/27611266063132-Settings#preview-and-publish-settings`,children:`Experience app`}),` `,_jsx(Icon,{icon:`external-link`,size:12}),` include a preview function. This allows a user to change and test settings, product selections, and more before publishing them to a live site. To preview something from the apps, a preview URL is required. For the apps, base URLs can be set in the `,_jsx(_components.a,{href:`https://help.elevate.voyado.com/hc/en-gb/articles/28013347219356-The-Admin-tab`,children:`Admin app`}),` `,_jsx(Icon,{icon:`external-link`,size:12}),`, or a URL can be entered in the interface for each preview.`]}),`\n`,_jsxs(_components.p,{children:[`Preview mode can be directly accessed through the `,_jsx(_components.a,{href:`/docs/api/storefront/overview`,children:`Storefront API`}),` by the aid of a `,_jsx(_components.code,{children:`viewId`}),` parameter. All page queries accept a `,_jsx(_components.code,{children:`viewId`}),` parameter, which can take two different values: `,_jsx(_components.code,{children:`production`}),` and `,_jsx(_components.code,{children:`preview`}),`. The `,_jsx(_components.code,{children:`viewId`}),` defaults to `,_jsx(_components.code,{children:`production`}),` if it is omitted in a page query, so in practice the parameter should only be used for previewing purposes, that is, when in preview mode.`]}),`\n`,_jsxs(_components.p,{children:[`When clicking a Preview link in the Apps, a new browser tab is opened with the URL that is to be previewed. The URL is also appended with `,_jsx(_components.code,{children:`?PREVIEW=true`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`implementation`,children:`Implementation`}),`\n`,_jsx(_components.p,{children:`Preview mode with the API should be implemented so that it is compatible with the app preview actions.`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Whenever `,_jsx(_components.code,{children:`?PREVIEW=true`}),` is encountered in the URL, requests to Elevate should be sent with `,_jsx(_components.code,{children:`viewId=preview`}),`.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Recommended.`}),` Persist the `,_jsx(_components.code,{children:`viewId`}),` parameter with the value `,_jsx(_components.code,{children:`preview`}),` when in preview mode to enable a user to navigate pages and still see everything with preview content.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Recommended.`}),` Implement a visual indicator to show the user that preview mode is active. For reference, see the image below.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Recommended.`}),` Implement a toggle that allows the user to manually exit preview mode. For reference, see the image below.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Optional.`}),` Restrict access to preview mode with, for example, a custom login that only enables functionality for certain levels of user access when logged in.`]}),`\n`]}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/elevatedocs/wxErQYTIA1y5JoDk/img/integration/preview-mode-1514x735.jpg?fit=max\u0026auto=format\u0026n=wxErQYTIA1y5JoDk\u0026q=85\u0026s=5024c06e344a3f51be61e488616e4bfa`,alt:`Visual indicator in preview mode`,\"data-og-width\":`1514`,width:`1514`,\"data-og-height\":`735`,height:`735`,\"data-path\":`img/integration/preview-mode-1514x735.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/elevatedocs/wxErQYTIA1y5JoDk/img/integration/preview-mode-1514x735.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=wxErQYTIA1y5JoDk\u0026q=85\u0026s=fdb47570dcdc9eb050aabbd10b205ab2 280w, https://mintcdn.com/elevatedocs/wxErQYTIA1y5JoDk/img/integration/preview-mode-1514x735.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=wxErQYTIA1y5JoDk\u0026q=85\u0026s=c9585e53e97afb6f84db68e91128d27a 560w, https://mintcdn.com/elevatedocs/wxErQYTIA1y5JoDk/img/integration/preview-mode-1514x735.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=wxErQYTIA1y5JoDk\u0026q=85\u0026s=97885676dd3b61b9637e30d72d9de62a 840w, https://mintcdn.com/elevatedocs/wxErQYTIA1y5JoDk/img/integration/preview-mode-1514x735.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=wxErQYTIA1y5JoDk\u0026q=85\u0026s=b47236e63bf0268baf814dbf60cf77ca 1100w, https://mintcdn.com/elevatedocs/wxErQYTIA1y5JoDk/img/integration/preview-mode-1514x735.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=wxErQYTIA1y5JoDk\u0026q=85\u0026s=a806248f9d6a7bdb70ca9242b1be934d 1650w, https://mintcdn.com/elevatedocs/wxErQYTIA1y5JoDk/img/integration/preview-mode-1514x735.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=wxErQYTIA1y5JoDk\u0026q=85\u0026s=561cd39b1ad3800c9b41d27fe7ebfcda 2500w`})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"App preview integration","description":"How to implement app preview mode in a Voyado Elevate site integration.","href":"/docs/integration/site-integration/app-integration"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Implementation","slug":"implementation","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/_mintlify/custom/elevatedocs/e981000376caad84/scripts/disable-accordion-link-copy.js","/_mintlify/custom/elevatedocs/9f72db540c8d3f36/scripts/mobile-nav-tab-list.js","/_mintlify/custom/elevatedocs/3c15ab69a2191b51/scripts/gtm.js"],"subdomain":"elevatedocs","siteName":"Product Discovery developer docs","title":"App preview integration - Product Discovery developer docs","relatedPagesConfig":{"enabled":false,"limit":5,"mode":"automatic"},"contextualStarterQuestions":[{"_id":"6aaba42e1420944c888a0727","deploymentId":"6a638c2b4251baa99ac33cca","questionText":"What is the viewId parameter?","status":"active","generatedBy":"contextual","path":"docs/integration/site-integration/app-integration","createdAt":"2026-09-17T08:26:22.164Z","updatedAt":"2026-09-17T08:26:22.164Z","__v":0},{"_id":"6aaba42e1420944c888a0728","deploymentId":"6a638c2b4251baa99ac33cca","questionText":"How to implement preview in apps?","status":"active","generatedBy":"contextual","path":"docs/integration/site-integration/app-integration","createdAt":"2026-09-17T08:26:22.164Z","updatedAt":"2026-09-17T08:26:22.164Z","__v":0},{"_id":"6aaba42e1420944c888a0726","deploymentId":"6a638c2b4251baa99ac33cca","questionText":"How do I enable preview mode?","status":"active","generatedBy":"contextual","path":"docs/integration/site-integration/app-integration","createdAt":"2026-09-17T08:26:22.164Z","updatedAt":"2026-09-17T08:26:22.164Z","__v":0}],"navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-09-17T08:26:00.409Z","gitLastModified":"2026-10-28T07:26:27.000Z","originalFileLocation":"docs/integration/site-integration/app-integration.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"light\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"How to implement app preview mode in a Voyado Elevate site integration.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Product Discovery developer docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"App preview integration - Product Discovery developer docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"How to implement app preview mode in a Voyado Elevate site integration.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Product Discovery developer docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://elevatedocs.mintlify.app/_mintlify/api/og/v2?division=Site+integration\u0026amp;title=App+preview+integration\u0026amp;description=How+to+implement+app+preview+mode+in+a+Voyado+Elevate+site+integration.\u0026amp;theme=f58243c8184ccc363977f3a7\u0026amp;signature=7a4ff2e0b9209c722f39e0a12885d4e9b399b4cb1734a8ce8048e1588f8fdc87\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"App preview integration - Product Discovery developer docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"How to implement app preview mode in a Voyado Elevate site integration.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://elevatedocs.mintlify.app/_mintlify/api/og/v2?division=Site+integration\u0026amp;title=App+preview+integration\u0026amp;description=How+to+implement+app+preview+mode+in+a+Voyado+Elevate+site+integration.\u0026amp;theme=f58243c8184ccc363977f3a7\u0026amp;signature=7a4ff2e0b9209c722f39e0a12885d4e9b399b4cb1734a8ce8048e1588f8fdc87\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/elevatedocs/pFLF7Ck4WVv5gLWu/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Product Discovery developer docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#fe4a49\">\u003clink data-mint-head rel=\"canonical\" href=\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/integration/site-integration/app-integration.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://voyado.com/\",\"name\":\"Product Discovery developer docs\",\"legalName\":\"Voyado Lund AB\",\"url\":\"https://voyado.com/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://voyado.com/wp-content/uploads/2023/01/cropped-Favicon-192x192.png\"},\"sameAs\":[\"https://www.linkedin.com/company/voyadoab/\",\"https://www.facebook.com/voyado/\",\"https://www.instagram.com/voyado_official/\"]},{\"@type\":\"WebSite\",\"@id\":\"https://product-discovery.developer.voyado.com#website\",\"name\":\"Product Discovery developer docs\",\"url\":\"https://product-discovery.developer.voyado.com\",\"publisher\":{\"@id\":\"https://voyado.com/\"}},{\"@type\":\"WebPage\",\"@id\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration#webpage\",\"url\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration\",\"name\":\"App preview integration\",\"description\":\"How to implement app preview mode in a Voyado Elevate site integration.\",\"dateModified\":\"2026-10-28T07:26:27.000Z\",\"isPartOf\":{\"@id\":\"https://product-discovery.developer.voyado.com#website\"},\"breadcrumb\":{\"@id\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Site integration\",\"item\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/site-integration\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"App preview integration\",\"item\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration#article\",\"headline\":\"App preview integration\",\"name\":\"App preview integration\",\"description\":\"How to implement app preview mode in a Voyado Elevate site integration.\",\"url\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration\",\"mainEntityOfPage\":{\"@id\":\"https://product-discovery.developer.voyado.com/docs/integration/site-integration/app-integration#webpage\"},\"dateModified\":\"2026-10-28T07:26:27.000Z\",\"publisher\":{\"@id\":\"https://voyado.com/\"},\"isPartOf\":{\"@id\":\"https://product-discovery.developer.voyado.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Product Discovery developer docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Product Discovery developer docs","nav":{"global":null,"tabs":[{"tab":"Home","pages":[{"title":"Home","href":"/docs/home/about"}]},{"tab":"Integration","groups":[{"group":"Overview","pages":[{"title":"Integration overview","href":"/docs/integration/overview"}]},{"group":"Essentials","pages":[{"title":"Identifiers and keys","href":"/docs/integration/essentials/identifiers-and-keys"},{"title":"Markets and locales","href":"/docs/integration/essentials/markets-and-locales"},{"title":"Catalog concepts","href":"/docs/integration/essentials/catalog-concepts"},{"title":"Restrictions and limits","href":"/docs/integration/essentials/restrictions-and-limits"},{"title":"Product feed best practices","href":"/docs/integration/essentials/best-practices"}]},{"group":"Configuration","pages":[{"title":"Configuration overview","href":"/docs/integration/configuration"}]},{"group":"Catalog imports","pages":[{"title":"Catalog overview","href":"/docs/integration/catalog-imports/catalog-imports"},{"title":"Catalog entity format overview","href":"/docs/integration/catalog-imports/format-overview"},{"title":"Scheduling","href":"/docs/integration/catalog-imports/scheduling"},{"title":"Validation","href":"/docs/integration/catalog-imports/validation"},{"title":"Consistency guarantees","href":"/docs/integration/catalog-imports/consistency"},{"title":"Catalog import examples","href":"/docs/integration/catalog-imports/import-examples"}]},{"group":"Other imports","pages":[{"title":"Category page imports","href":"/docs/integration/category-page-imports"},{"title":"Navigation imports","href":"/docs/integration/navigation-imports"}]},{"group":"Site integration","pages":[{"title":"Site integration","href":"/docs/integration/site-integration/site-integration"},{"group":"Query integration","pages":[{"title":"Query integration","href":"/docs/integration/site-integration/query-integration/query-integration"},{"title":"Query parameters","href":"/docs/integration/site-integration/query-integration/query-parameters"}]},{"title":"Session management","href":"/docs/integration/site-integration/session-management"},{"title":"Event tracking","description":"How to send event notifications to Voyado Elevate, using the JavaScript library for client-side events and server-side payment notifications for orders.","href":"/docs/integration/site-integration/event-tracking"},{"title":"App preview integration","href":"/docs/integration/site-integration/app-integration"}]},{"group":"Other integrations","pages":[{"title":"Data priming order history","description":"How to add historical order data to Voyado Elevate through data priming, covering the JSONL file specification and validation with the Primer tool.","href":"/docs/integration/order-history"},{"title":"Voyado Engage integration","href":"/docs/integration/voyado-engage-integration"}]}]},{"tab":"API","pages":[{"title":"API","href":"/docs/api/getting-started"}]},{"tab":"Guides","pages":[{"title":"Guides","href":"/docs/guides/overview"}]},{"tab":"Add-ons","pages":[{"title":"Add-ons","href":"/docs/addons/overview"}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/docs/changelog/changelog"}]}]},"basePath":"","title":"App preview integration - Product Discovery developer docs","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":["a74be98ba7"],"chunks":["zoom-image-lightbox-BG6oD64b.js","lightbox-handle-r17bVUz3.js"]}