Embedding the Customer Portal on Your Headless Site
Steps to Implement
Section titled “Steps to Implement”Step 1: Create the container element for the embed to insert
Section titled “Step 1: Create the container element for the embed to insert”<div id="corso-embedded-ui"></div>Step 2: Ensure the script tag is placed
Section titled “Step 2: Ensure the script tag is placed”You can copy your script tag in the Corso Admin by going to Settings > Theme > Customer Portal Embedded UI > Headless Embed Script > Copy.
Example Script Tag
Section titled “Example Script Tag”<script type="module" src="https://cdn.corso.com/js/corso-embedded-ui.js?appUrl=https%3A%2F%2Fapp.corso.com/corso-store-name"></script><div id="corso-embedded-ui"></div>Step 2: Ensure the script tag is placed
Section titled “Step 2: Ensure the script tag is placed”You can copy your script tag in the Corso Admin by going to Settings > Theme > Customer Portal Embedded UI > Headless Embed Script > Copy.
Example Script Tag
Section titled “Example Script Tag”<script type="module" src="https://cdn.corso.com/js/corso-embedded-ui.js?appUrl=https%3A%2F%2Fapp.corso.com/corso-store-name"></script>Debugging
Section titled “Debugging”While implementing, it may be helpful to pass a second query param to enable debug logging. This should be removed before going to production.
Example Script Tag with Debug Enabled
Section titled “Example Script Tag with Debug Enabled”<script type="module" src="https://cdn.corso.com/js/corso-embedded-ui.js?appUrl=https%3A%2F%2Fapp.corso.com/corso-store-name&isDebug=true"></script>Once the script is embedded, you can dynamically set orderId on the host page URL (for example, https://merchant.example/returns?orderId=12345) to load that specific customer experience inside the frame. This is typically done from order confirmation emails, or other places within the flow when directing to a tracking / order editing experience.