Install App 
ClaudePlain HTML install
Place this blocking script in the head. Replace YOUR_STORE_ID.
<script src="https://embed.pennicart.io/v1/loader.js?store=YOUR_STORE_ID"></script>Framework install
Use these explicit tags through your framework’s supported shell. Adapt the markup syntax as needed.
<link rel="stylesheet" id="pc-cloak" href="https://embed.pennicart.io/v1/cloak.css">
<link rel="stylesheet" href="https://embed.pennicart.io/v1/sdk.css">
<script src="https://embed.pennicart.io/v1/runtime.js" data-store="YOUR_STORE_ID" async></script>Connect and test
Follow the attribute documentation and validate the published product-to-order flow.
Plain HTML: use the blocking head loader
The one-line loader is intended for a plain HTML document. Place it in the head without async or defer. It writes the initial stylesheet setup during document parsing and then loads the runtime asynchronously. Replace the store placeholder with your actual identifier.
Frameworks: use the explicit setup
Framework-managed rendering should use the explicit stylesheet and runtime tags. Include the cloak stylesheet with its pc-cloak ID, the SDK stylesheet and the async runtime with data-store. Add these once through your application’s supported document or script mechanism. Do not run the document.write loader after the page has rendered.
Wire the commerce interface
Consult the current documentation for product identifiers and element attributes. The install loads runtime behavior; it does not automatically turn an arbitrary button into a configured shopping cart. Verify the correct product and options reach the cart before building out the rest of the catalog.
Verify routing, checkout and credentials
Test direct product-page visits and client-side navigation if your app uses it. Avoid injecting duplicate runtime scripts. Configure a supported payment provider and keep secret keys out of client code. Use the documented payment interface and confirm the expected order appears after a successful test.