Beans
ProductsPricingBlog
  • 🚀Getting Started
  • Members
    • Add a member
    • Adjust a member's balance
    • Deactivating a member
    • Import members
    • Custom fields
      • Custom fields on registration
  • rewards
    • Rules
      • Registration
      • Loyalty
      • Cart Booster
      • Facebook Page Like
      • Twitter Follow
      • Instagram Follow
      • Refer a friend
      • Accept referral Invitation
      • Inactivity
      • Celebration
      • Expiration
      • Birthday
    • Tiers
    • Display
      • Redemption block
    • Redemption
      • Redeem points
      • Pending Debits
      • Redemption rate
      • Redemption conditions
      • Buy products with points
      • Redemption issues
    • FAQ
      • How are loyalty revenues generated?
      • Adding Custom CSS
      • Disable checkout auto-redirect
      • Enrollment of customers in the rewards program
      • Why do rules have minimum points?
      • Loyalty points calculation
  • Referrals
    • Getting started
    • Rules
      • Accept Invitation
      • Successful Referral
    • Display
      • Link your referral page to your Shopify store.
      • Link your referral page to your Woocommerce store.
    • Conditions
    • Referrals
    • FAQ
      • Adding Custom CSS
      • Why registration is enforced for referrals.
      • Can Bamboo be used for affiliate marketing?
      • How to test Bamboo?
  • Emails
    • Rules
      • Loyalty â–¸ Welcome
      • Loyalty â–¸ Balance reminder
      • Loyalty â–¸ New transaction
      • Loyalty â–¸ Post-purchase invitation
      • Referral â–¸ Invitation
      • Referral â–¸ Referrer reward
      • Referral â–¸ Friend reward
    • Campaigns
    • Sender email
    • FAQ
      • Replacement tags
      • Sender address
      • Gmail's warning messages
      • Testing email notifications
  • More Apps
    • Social Connect
      • Display
    • Widget
      • Messages
  • INTEGRATIONS
    • Getting Started with Integrations
    • Shopify
      • Referencing Shopify pages
      • Enable customer accounts
      • Template Migration
      • Shopify OS 2.0
      • Using discount codes with redemption
      • Shopify POS
      • Shopify Limitations
      • Uninstallation
      • Shopify customers tags
    • Woocommerce
      • Account Synchronization
      • Referencing WooCommerce pages
      • Setting up permalinks
      • Edit Beans pages
      • Updating your shop domain
      • Manually Installing Beans
      • Reset and reconnect
      • Caching issues
      • Connection Issues
    • Facebook Integration
    • Judge.me Integration
    • Mailchimp Integration
    • Omnisend Integration
    • Sendinblue Integration
    • Weglot Integration
    • API
      • Webhooks
      • Storefront
  • Settings
    • General
    • App activation
    • Plan & Billing
      • Account Suspension
      • List of plans
      • Refund Policy
      • Supported currencies
    • Team access
    • Live Testing
  • FAQ
    • Limitations
    • Phone Support
    • Why is Beans better than the other options?
    • What will my customers see?
    • Can I reach an engineer to talk about technical issues?
    • POS Support
    • Security
    • Terms of Service
    • Privacy Policy
    • GDPR
Powered by GitBook
On this page
  • Including beans.js
  • Initializing beans.js

Was this helpful?

  1. INTEGRATIONS
  2. API

Storefront

Setting up beans.js on your online store

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: 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.

PreviousWebhooksNextGeneral

Last updated 2 years ago

Was this helpful?