Cubby components are a powerful set of tools which allow you to quickly add data about your Cubby-powered facilities on your personal website as well as allow advanced functionality such as online payments, reservations and lead creation.
This articles goes over some common steps in setting up a functional Cubby-powered website. It is not an exhaustive list of all functionality provided by the storefront components, but rather a summary of achieving the most common customer flows.
1. Getting your API key
Before you begin adding components to your website, you or an authorised party will need to create a storefront through the Cubby Marketing site . The marketing site allows adjusting the overall component theme, per-components settings and the content that will appear on the components. Once setup you'll need to fetch the unique API key generated for your storefront, by navigating to the "Settings" tab and copying it.
(1)-webp.webp)
2. Adding the component script to your page
The key to getting storefront components running on you site is including the following snippet on each individual page the components should run (or just once if you're making a single page application). We recommend adding this to the <head> tag of your page.
Where `YOUR-API-KEY-HERE` needs to be replaced by the key copied in the previous step. This snippet will register all storefront components on your web page and make them available for use. If you try to add a storefront components to your page but cant see it, you've likely missed this step or incorrectly added your API key.
Note: While it is required to include this snippet on all pages which feature storefront components, we recommend you include it on all pages on your website. The script itself has tracking capabilities which we use to draw user funnels and track customer journeys. This information can then be routed to your personal analytics.
3. Using storefront components
With the cubby script tag placed on your page, you should now be able to use custom cubby html elements. If your organization has few facilities or wants to showcase a particular one you can use the Cubby Facility component with a specific facility slug like so.
<cubby-facility facility="my-facility"></cubby-facility>
my-facility should be replaced by the slug of your target facility, taken from the content section of the Marketing site. Viewing the page should now display the product offering of that facility.
Organizations with multiple facilities may want to place a Cubby Portfolio component somewhere on their landing page. You can easily do so by writing the following somewhere in the page <body>.
<cubby-portfolio></cubby-portfolio>
Opening the page should now display a list of all facilities from your organization. Each element is a link and clicking on them is meant to take users to a page for the given facility. By default the link will be in the format of `/facility/{unique-slug-based-on-facility-name}`. The `facility` path can be configured through the Marketing site in the Settings tab, while individual facility slugs can be changed on the content pages of each facility.
4. Setting up paths
The portfolio links will lead to specific URLs, so its important to set up corresponding pages. One method is creating an individual page for each facility and naming them according to the slug from the Marketing site. A page might look like this
<head>
<script
src="https://cdn.cubbystorage.com/components/latest"
data-api-key="YOUR-API-KEY-HERE"
></script>
</head>
<body>
<!--Your custom content -->
<cubby-facility-info></cubby-facility-info>
<cubby-facility></cubby-facility>
<!--Additional custom content -->
</body>
The Cubby Facility Info component displays a configurable summary of a specific facility, while the Cubby Facility component will show available units within that facility. Both of these components will attempt to target the correct facility by reading the page URL, however if you go the path of making individual pages for each facility you can pass the slug directly to the components.
<cubby-facility-info facility="my-facility"></cubby-facility-info>
<cubby-facility facility="my-facility"></cubby-facility>
Depending on your site structure, you may be able to set up catch all content pages. This way you could reuse the same HTML markup for all facility pages, while the components within would figure out what to render based on the URL.
Another important path you'll likely want to implement on your website is the checkout page. When users select a product they'll be redirected to a checkout page so they can complete their purchase. By default the path to this is `/checkout` but like before it can be configured through the Marketing site.
Cart management is handled in the background, so the only thing you must include on your checkout page is the Cubby checkout component.
<cubby-checkout></cubby-checkout>
This component will display a breakdown of the client's payment as allow clients to enter personal information and make a payment.
5. Search (Alternative flow)
If your organization has a large number of facilities or if you'd like to offer clients a way to perform a targeted search based on their interests, you should consider adding the Cubby Search component to your page. This opinionated component allows users to filter products and facilities. The component will search through all facilities of your organization and all products within them and direct users to the checkout page, similarly to the Cubby Facility component.
<cubby-search></cubby-search>
Following the above instructions will cover some of the most common and important flow to ensure clients can find what they need and be able to purchase it. For advanced used cases you should reference individual component articles.