Offset Cantina

Embed an Offset wine shop on your website. Inquire at https://offsetpartners.com/

Get Started

To get your website running with Offset, follow these steps:

• Please email [email protected] to obtain an API key.

• Include the Offset JavaScript and CSS snippets to every page of your site.

• Use the custom Offset element tags where the account element, side cart, and other elements should appear.

1. Include the Offset Snippets

To use the Offset Cantina, you must first include the Offset JavaScript and CSS snippets to every page of your site:

CSS Add the following above the closing </head> tag.

<link href="https://unpkg.com/offsetpartners-elements/example/dist/style.css" rel="stylesheet">

JavaScript Add the following above the closing </body> tag.

<script>
window.OFFSET = {
    apiKey: "YOUR API KEY HERE"
};
</script>
<script src="https://unpkg.com/offsetpartners-elements/example/dist/offsetpartners-elements.js"></script>

Alternative Installation If you're using a module bundler like webpack or vite, you can install the offset cantina using npm:

npm install @offsetpartners/cantina

Then call defineElements() once anywhere in your JavaScript:

import { defineElements } from "@offsetpartners/cantina";
defineElements();

2. Use the Offset Elements

With the snippets installed, you can now use the Offset Cantina throughout your website:

<offset-account-login></offset-account-login>

See https://offsetpartners.github.io/offsetresources/#/elements for the available elements that come with Offset Cantina.

Developer Usage

• pnpm install
• pnpm run dev
• Visit http://localhost:5173