# Expresta Buttons JS SDK

This SDK provides a customizable JavaScript integration for embedding a dynamic "Order Now" button into your website or application, enabling seamless access to Expresta’s print-on-demand services.

Designed for large-scale partners, Expresa JS SDK allows their end-users to order books, printables, and other physical products directly through a secure and scalable interface.

Key features:

* Easy-to-integrate JavaScript snippet
* Customizable button styling and placement
* On demand product configuration (e.g., SKU, quantity, metadata)
* Straightforward communication with Expresta’s backend for order processing
* Minimal setup, no server-side integration required



## Screenshots

![App Screenshot](https://cdn.expresta.com/sdk/screenshots/button-dark.png)

![App Screenshot](https://cdn.expresta.com/sdk/screenshots/button-light.png)
## Demo

Init by JS object: https://cdn.expresta.com/sdk/demo/init_by_js.html

Init by HTML attributes: https://cdn.expresta.com/sdk/demo/init_by_attributes.html
## Documentation
Before getting started, please contact cooperation@expresta.eu to set up your business account and receive your initial integration details.

### JS object / HTML attributes explanation
* lang: Language of the button and the domain where the predefined product list will open. Accepted values: sk, cz, at, de, hu, en
* class: Defines the button theme. Accepted values: dark, light. When using HTML attributes, add this as a class to the main wrapper <div>
* account-id: Your business account ID registered with Expresta
* public-key: Your public key provided by Expresta
* utm-source: UTM source parameter for tracking (optional)
* utm-medium: UTM medium parameter for tracking (optional)
* utm-campaign: UTM campaign parameter for tracking (optional)
* utm-content: UTM content parameter for tracking (optional)
* Array of product configurations. Each item should include a valid product_id (previously provided by Expresta) and the desired quantity.

## Usage/Examples

### You can take the JS directly from Expresta CDN
Minified (for production use): https://cdn.expresta.com/sdk/dist/js/buttons.min.js

Full, non-minified source: https://cdn.expresta.com/sdk/src/js/buttons.js

### Initialization with JS
```html
<!-- Empty Div for Expresta Order Button -->
<div class="expresta-button-1"></div>

<!-- Expresta Buttons JS SDK -->
<script src="https://cdn.expresta.com/sdk/dist/js/buttons.min.js"></script>

<!-- Initialization -->
<script>
    OrderButton.init({
        'lang': 'en',
        'class': 'dark',
        'wrap': 'expresta-button-1',
        'account': 55555,
        'public_key': 'XXXX-1111-YYYY-2222',
        'utm_source': 'example-source',
        'utm_medium': 'example-medium',
        'utm_campaign': 'example-campaign',
        'utm_content': 'example-content',
        'products': [
            {
                'id': 1111,
                'qty': 10
            },
            {
                'id': 2222,
                'qty': 20
            }
        ]
    });
</script>
```

### Initialization with HTML
```html
<!-- Container for Expresta Order Button -->
<div class="expresta-order-button"
     data-lang="en"
     data-account="55555"
     data-public_key="XXXX-1111-YYYY-2222"
     data-utm_source="example-source"
     data-utm_medium="example-medium"
     data-utm_campaign="example-campaign"
     data-utm_content="example-content">
    <div data-product_id="1111" data-qty="10"></div>
    <div data-product_id="2222" data-qty="20"></div>
</div>


<!-- Expresta Buttons JS SDK -->
<script src="https://cdn.expresta.com/sdk/dist/js/buttons.min.js"></script>

```
## Support

For technical inquiries, contact us at api@expresta.com

For cooperation and support, contact us at cooperation@expresta.eu

## Authors

- [Expresta Collective](https://career.expresta.com/people)
- [@expresta](https://www.npmjs.com/org/expresta)