# Storefront JS SDK

Explore our guides and examples to use our Storefront JavaScript SDK to integrate Firmhouse with your website or e-commerce.

*Note: Our Storefront JS SDK is still quite new! While tested extensively some things might not yet work as expected. We recommend to set this up in a test environment first before implementing it in your live store.*

### What is the Firmhouse Storefront JS SDK?

The Firmhouse Storefront JS SDK allows you to very easily add subscription, lease, rent, and membership functionality to your already existing website or to your existing e-commerce webshop.

With only a few lines of JavaScript and HTML code you can:

* Add an *Add to cart* or *Subscribe* button to your website.
* Show an on-page subscription cart with price overviews and quantity selectors.
* Replace or add a *subscribe* button to your Shopify pages.

### It's that simple, eh?

Yes! At least we hope so. Here's a quick primer:

#### Add the SDK JavaScript library:

Add the following snippet to the `<head>` of your website to add our SDK:

<pre class="language-html"><code class="lang-html">&#x3C;script 
  src="https://storefrontjs.firmhouse.com/dist/storefront.js">&#x3C;/script> 
&#x3C;script> 
window.Firmhouse = { storefrontToken: "<a data-footnote-ref href="#user-content-fn-1">yourtokenhere</a>", } 
&#x3C;/script>
</code></pre>

[Generate a token](/sdks/storefront-js-sdk/create-a-storefront-api-token.md) and replace \`yourtokenhere\` in the previous snippet.

#### Adding a product

Add the following to add a Firmhouse product with ID `123` to the cart:

```html
<button onClick="Firmhouse.addToCart({productId: '123'})">Add to subscription</button>
```

#### Choosing a plan

Add the following to choose a Plan with slug `premium`:

```html
<button onClick="Firmhouse.updatePlan('premium')">Choose Premium</button>
```

#### Opening the cart

To open the current cart:

```html
<button onClick="Firmhouse.showCart()">View cart</button>
```

[^1]: Replace this with your token


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.firmhouse.com/sdks/storefront-js-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
