Add GlassHouse with JavaScript

1. Get the package#

The JavaScript SDK is available as a developer preview. Request the package, then install the supplied archive in your storefront project.

pnpm add ./superseeded-glasshouse-0.1.0.tgz

You’ll need access to your store’s server routes and product catalogue. Use Node.js 22+ for the Node integration.

2. Connect your server#

Create an API key in your SuperSeeded account, then follow the server guide to serve /api/glasshouse/* on your store’s origin. Keep the key in your server’s environment settings.

The server connection handles product lookups and shopper sessions. Once it is running, GET /api/glasshouse/config returns the available capabilities.

3. Mount the interface#

Add an empty element where the GlassHouse launcher should appear.

<div id="plant-assistance"></div>

Run this after the element has mounted in the browser.

import { mountGlassHouse } from '@superseeded/glasshouse'
import '@superseeded/glasshouse/style.css'

const glasshouse = await mountGlassHouse({
  target: '#plant-assistance',
  endpoint: '/api/glasshouse/',
  productId: 'lavender-2l',
})

Use your store’s purchasable product or variant ID. Omit productId on a general store page.

4. Follow page navigation#

When your router opens another product, update the context. When it leaves a product page, pass null. Remove the integration when its host component unmounts.

glasshouse.updateContext({ productId: 'lavender-5l' })
glasshouse.updateContext({ productId: null })

// When the host component unmounts:
glasshouse.destroy()

<link rel="stylesheet" href="/glasshouse/glasshouse.css">
<div id="plant-assistance"></div>
<script type="module">
  import { mountGlassHouse } from '/glasshouse/browser.js'
  await mountGlassHouse({
    target: '#plant-assistance',
    endpoint: '/api/glasshouse/',
  })
</script>

5. Try a shopper journey#

Open the launcher, ask about a product and follow its product link. Then create a planting layout. Add the cart adapter when you’re ready to let shoppers apply a design to their cart.