> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fungies.io/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML Data Attributes

> Add checkout buttons to your website using simple HTML data attributes.

HTML data attributes provide a no-code way to add Fungies checkout buttons to any website. Simply add attributes to your HTML elements and include the SDK script.

## Quick Start

```html theme={null}
<!-- Checkout button -->
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay">
  Buy Now
</button>

<!-- Include the SDK -->
<script
  src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@latest"
  defer
  data-auto-init>
</script>
```

## Script Attributes

Add these attributes to the `<script>` tag:

| Attribute                    | Description                                                             |
| ---------------------------- | ----------------------------------------------------------------------- |
| `data-auto-init`             | Automatically initialize the SDK on page load                           |
| `data-auto-display-checkout` | Automatically open checkout on page load (for dedicated checkout pages) |
| `data-fungies-checkout-url`  | Checkout URL (required with `data-auto-display-checkout`)               |
| `data-fungies-mode`          | Display mode: `overlay` or `embed`                                      |
| `data-fungies-frame-target`  | Target element ID for embed mode                                        |

### Auto-Display Example

For dedicated checkout pages that should immediately show the checkout:

```html theme={null}
<div id="checkout-container"></div>

<script
  src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@latest"
  defer
  data-auto-init
  data-auto-display-checkout
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="embed"
  data-fungies-frame-target="checkout-container">
</script>
```

## Button Attributes

Add these attributes to any clickable element (button, anchor, div, etc.):

### Required

| Attribute                   | Description                                  |
| --------------------------- | -------------------------------------------- |
| `data-fungies-checkout-url` | The checkout URL from your Fungies dashboard |

### Display Options

| Attribute                   | Values             | Description                                      |
| --------------------------- | ------------------ | ------------------------------------------------ |
| `data-fungies-mode`         | `overlay`, `embed` | How to display the checkout (default: `overlay`) |
| `data-fungies-frame-target` | Element ID         | Target element for embed mode                    |

### Billing Data

| Attribute                         | Description                           |
| --------------------------------- | ------------------------------------- |
| `data-fungies-billing-email`      | Customer email                        |
| `data-fungies-billing-first-name` | Customer first name                   |
| `data-fungies-billing-last-name`  | Customer last name                    |
| `data-fungies-billing-country`    | Country code (e.g., `US`, `GB`, `PL`) |
| `data-fungies-billing-state`      | State/province                        |
| `data-fungies-billing-city`       | City                                  |
| `data-fungies-billing-zip-code`   | Postal/ZIP code                       |

### Other Options

| Attribute                    | Description                             |
| ---------------------------- | --------------------------------------- |
| `data-fungies-discount-code` | Discount code to apply                  |
| `data-fungies-quantity`      | Product quantity                        |
| `data-fungies-items`         | JSON array of items (for multi-product) |
| `data-fungies-custom-fields` | JSON object of custom fields            |

### Legacy (Deprecated)

| Attribute                     | Description                                                |
| ----------------------------- | ---------------------------------------------------------- |
| `data-fungies-customer-email` | Use `data-fungies-billing-email` instead                   |
| `data-fungies-button`         | Legacy URL format, use `data-fungies-checkout-url` instead |

## Complete Examples

### Basic Overlay Button

```html theme={null}
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  class="buy-button">
  Buy Now - $29
</button>
```

### With Prefilled Billing Data

```html theme={null}
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-billing-email="customer@example.com"
  data-fungies-billing-first-name="John"
  data-fungies-billing-last-name="Doe"
  data-fungies-billing-country="US">
  Complete Purchase
</button>
```

### With Discount Code

```html theme={null}
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-discount-code="SUMMER20">
  Buy Now (20% Off!)
</button>
```

### With Quantity

```html theme={null}
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-quantity="3">
  Buy 3 for $59
</button>
```

### Multi-Product Checkout

```html theme={null}
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-items='[{"offerId":"offer-1","quantity":2},{"offerId":"offer-2","quantity":1}]'>
  Buy Bundle
</button>
```

### With Custom Fields

```html theme={null}
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-custom-fields='{"user_id":"123","server":"US-West"}'>
  Buy Now
</button>
```

### Embedded Checkout

```html theme={null}
<div id="checkout-container" style="min-height: 600px;"></div>

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="embed"
  data-fungies-frame-target="checkout-container">
  Load Checkout
</button>
```

## Styling

The SDK doesn't add any styles to your buttons. Style them however you want:

```html theme={null}
<style>
  .fungies-btn {
    background: #6035EC;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
  }
  .fungies-btn:hover {
    background: #4c2abd;
  }
</style>

<button
  class="fungies-btn"
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay">
  Buy Now
</button>
```

## Dynamic Elements

If you add checkout buttons dynamically (e.g., via JavaScript or a framework), call `Fungies.ScanDOM()` to attach click handlers:

```javascript theme={null}
// After adding new elements to the DOM
Fungies.ScanDOM();
```

Or import and call directly:

```javascript theme={null}
import { Fungies } from "@fungies/fungies-js";

// After dynamically adding elements
Fungies.ScanDOM();
```