# Storefront

Beans.js is a lightweight library that allows you to integrate Beans Ultimate on any ecommerce store. It allows you to add all the Beans apps to your online store with a few lines of code. It also allows great flexibility if you want to customize the storefront display.

### Including beans.js

Include the beans.js script on each page of your store. It should always be loaded directly from <https://cdn.trybeans.com>, rather than included in a bundle or hosted yourself.

```
<script src="https://cdn.trybeans.com/lib/ultimate/edge/vanilla/ultimate.beans.js?shop=<<public_id>>"></script>
```

The public\_id is a unique identification key that represents your shop. You can get it by reaching out to Beans customer support.

### Initializing beans.js

The following script will help Beans identify the currently authenticated user. Include this script on every page of the store.

```
<script>window.beans_cjs_id='1234567890'; window.beans_cjs_email='customer@email.com';</script>
```

* **window\.beans\_cjs\_id:** Represents the id of the currently authenticated customer and should be dynamically set.
* **window\.beans\_cjs\_email:** Represents the email of the currently authenticated customer and should be dynamically set.

```
const config = {
  currentPage: '',
  onLogin: () => (window.location = '/login'),
  onRegister: () => (window.location = '/register'),
  liana: {
    onAbout: () => (window.location = '/rewards'),
    pagePlaceholder: document.getElementById('rewards'),
  },
  bamboo: {
    onAbout: () => (window.location = '/referral'),
    pagePlaceholder: document.getElementById('referral'),
  },
};
```

* **currentPage:** Should contain the current page, should be one of the following: \
  \&#xNAN;*product|cart|checkout|login|register|reward or* empty for the other pages
* **onLogin:** This should be a function that redirects to your store login page. In the example above the login page is located at */login*. Make sure to replace it with the right location if it is not the one used in your store.
* **onRegister:** This should be a function that redirects to your store registration page. In the example above the registration page is located at */register.* Make sure to replace it with the right location if it is not the one used in your store.
* **liana.onAbout:** This should be a function that redirects to your store reward program page. In the example above the reward, program page is located at */rewards.* Make sure to replace it with the right location if it is not the one used in your store.
* **liana.pagePlaceholder:** On the page created for the rewards program, you should create a container for beans.js to render the program page inside. *pagePlaceholder* should contain that container. In the example above the container has been named rewards, add the following HTML snippet to the rewards program page to use the same value for *pagePlaceholder.*

```
<div id='rewards'></div>
```

* **bamboo.onAbout:** This should be a function that redirects to your store referral program page. In the example above the reward, program page is located at */referral*. Make sure to replace it with the right location if it is not the one used in your store.
* **bamboo.pagePlaceholder:** On the page created for the referral program, you should create a container for beans.js to render the program page inside. *pagePlaceholder* should contain that container. In the example above the container has been named *referral,* add the following HTML snippet to the referral program page to use the same value for *pagePlaceholder.*

```
<div id='referral'></div>
```

Just below the initialization data add the following line to initialize beans.js

```
Beans3.Radix.init(config);
```

You have just integrated beans with your storefront. The reward and referral program page should now display on your store.

<br>


---

# 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://help.trybeans.com/integrations/api/storefront.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.