### Open Manage My Booking Portal via JavaScript

Source: https://support.ventrata.com/en/articles/12255663-how-to-implement-and-use-the-new-manage-my-booking-mmb-portal

These JavaScript examples demonstrate how to open the Manage My Booking portal programmatically. You can open it as a pop-up or embed it within a specific page element.

```javascript
window.VentrataManageMyBooking({
  apiKey: "YOUR_API_KEY",
  popup: true
})
```

```javascript
window.VentrataManageMyBooking(
  { apiKey: "YOUR_API_KEY" },
  { targetElement: document.getElementById("my-mmb-element") }
)
```

--------------------------------

### Display Assigned Guide

Source: https://support.ventrata.com/en/articles/11145253-klaviyo-variables

Outputs the name or identifier of the guide assigned to the tour. Returns an empty string if no guide is assigned.

```jinja
{{event.booking_guide|default:''}}
```

--------------------------------

### Example Marketing Link for Opening Checkout Widget

Source: https://support.ventrata.com/en/articles/12033395-how-to-open-the-checkout-widget-automatically-from-marketing-links

This is an example of a marketing URL designed to trigger the automatic opening of the checkout widget. The `openWidget=true` query parameter instructs the accompanying script to initiate the widget, and additional parameters like `promoCode` can be included to pre-configure the checkout.

```url
https://example.com/page?openWidget=true
```

--------------------------------

### Track Begin Checkout with dataLayer.push (JavaScript)

Source: https://support.ventrata.com/en/articles/9550944-tracking-manual

This code snippet tracks the 'begin_checkout' event, indicating the start of the checkout process. It includes order details, item information, and currency. This event should be fired from the checkout page.

```javascript
dataLayer.push({ ecommerce: null });
dataLayer.push({
  "event": "begin_checkout",
  "ecommerce": {
       "order_id": "17def567-005d-43be-ad81-6a904325b17c",
       "coupons": [],
       "currency": "EUR",
       "checkout_mode": "popup",
       "items": [
       {
       "item_id": "unit_38d8b24e-89a9-488c-9f51-6981dc56a581",
       "booking_id": "2a37bb6d-a62a-4d73-b147-3155bfad1d0f",
       "product_id": "69f07800-0b30-4824-b462-09a7f195295b",
       "item_name": "Chitwan National Park",
       "option_id": "DEFAULT",
       "item_variant": "Chitwan National Park",
       "item_category": "6 seater car",
       "item_category2": "2024-09-18",
       "item_category3": "14:30:00",
       "item_category4": "",
       "crossSell": false,
       "multidate": false,
       "price": 400,
       "tax": 0,
       "discount": 0,
       "quantity": 1,
       "extras": [],
       "packages": []
       }
       ],
       "quantity": 1,
       "extras": [],
       "value": 400,
       "tax": 0,
       "discount": 0
  },
  "custom_timestamp": "1759833980195",
  "preferred_locale": "en",
  "gtm.uniqueEventId": 86
});
```

--------------------------------

### Update Ventrata Consent on User Choice

Source: https://support.ventrata.com/en/articles/11960128-cmp-integration-guide-for-ventrata-checkout-widget

Updates Ventrata widget consent preferences after a user interacts with a CMP modal or preferences panel. This example listens for a 'click' event on a 'save-preferences' button.

```javascript
document.getElementById('save-preferences').addEventListener('click', function() {
  const consents = {
    analytics_storage: document.getElementById('analytics-consent').checked,
    ad_storage: document.getElementById('advertising-consent').checked,
    security_storage: true, // Often essential
    personalization_storage: document.getElementById('personalization-consent').checked,
    functionality_storage: document.getElementById('functional-consent').checked
  };

  window.Ventrata.updateConsents(consents);
  saveUserConsents(consents); // Replace with your CMP's consent saving logic
});
```

--------------------------------

### Construct QR Code Image URL

Source: https://support.ventrata.com/en/articles/11145253-klaviyo-variables

This example shows how to construct a direct URL for a ticket's QR code image using its relative path. This is useful for rendering the QR code in external systems like email marketing platforms. The base API URL is prepended to the relative path.

```html
https://api.ventrata.com/{{event.png_path|default:''}}
```

--------------------------------

### Filter Products in Ventrata Checkout

Source: https://support.ventrata.com/en/articles/10153549-untitled-public-article

This example shows how to filter products displayed in the Ventrata checkout widget by adding a `"products"` object to the `data-config` attribute in the script tag. This allows specifying attributes for filtering the product list.

```html
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "products": {"attribute": "<ATTRIBUTE_NAME>"}}'></script>
```

--------------------------------

### Display Validity Start Date (ISO 8601)

Source: https://support.ventrata.com/en/articles/11145253-klaviyo-variables

Shows the start date of the booking's validity in YYYY-MM-DD format. Defaults to an empty string if not set.

```jinja
{{event.booking_active_from_iso8601|default:''}}
```

--------------------------------

### Display Opening Hours

Source: https://support.ventrata.com/en/articles/11145253-klaviyo-variables

Outputs the opening hours for the tour or service. Returns an empty string if opening hours are not defined.

```jinja
{{event.booking_opening_hours|default:''}}
```

--------------------------------

### Display Question and Answer(s)

Source: https://support.ventrata.com/en/articles/11145253-klaviyo-variables

Retrieves and displays all question and answer pairs associated with the booking. Defaults to an empty string if none exist.

```jinja
{{event.booking_question_answers|default:''}}
```

--------------------------------

### FingerprintJS NPM Integration

Source: https://support.ventrata.com/en/articles/10110300-fingerprint-and-google-recaptcha

Example of how to integrate FingerprintJS using their NPM package for client-side fingerprint generation.

```APIDOC
## FingerprintJS NPM Integration

### Description
This section details the recommended method for integrating FingerprintJS using their official NPM package. This approach minimizes the risk of ad blockers interfering with the fingerprinting process.

### Method
Client-Side JavaScript

### Endpoint
N/A (Client-side library usage)

### Parameters
#### Request Body
None

### Request Example
```javascript
import * as FingerprintJS from '@fingerprintjs/fingerprintjs-pro';

const fpPromise = FingerprintJS.load({
  apiKey: "{fingerprintPublicKey}", // Obtained from GET /ventrata/checkout/config
  endpoint: "https://fp.ventrata.com",
  scriptUrlPattern: "https://fp.ventrata.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js"
});

// Before loading the payment screen:
fpPromise.then(fp => fp.get({ linkedId: "{cardPayments.fraudAssessment.id}" }))
  .then(result => {
    console.log('Fingerprint result:', result.visitorId);
    // Send result.visitorId or other relevant data to your backend if needed
  })
  .catch(error => console.error('FingerprintJS error:', error));
```

### Response
#### Success Response
- **visitorId** (string) - The unique visitor identifier generated by FingerprintJS.

#### Response Example
```json
{
  "visitorId": "a1b2c3d4e5f6..."
}
```
```

--------------------------------

### Retrieve Checkout Configuration

Source: https://support.ventrata.com/en/articles/10110300-fingerprint-and-google-recaptcha

Call this endpoint to get the checkout configuration object, which includes necessary keys for fingerprinting.

```APIDOC
## GET /ventrata/checkout/config

### Description
Retrieves the checkout configuration object required for client-side integrations, including API keys and settings for anti-fraud measures.

### Method
GET

### Endpoint
/ventrata/checkout/config

### Parameters
#### Query Parameters
None

#### Headers
- **authorization** (string) - Required - Bearer token for authentication.
- **octo-capabilities** (string) - Required - Must be set to 'ventrata/checkout' for a correct response.

### Request Example
```javascript
fetch("https://api.ventrata.com/octo/ventrata/checkout/config", {
  "headers": {
    "authorization": "Bearer <YOUR_TOKEN_HERE>",
    "octo-capabilities": "ventrata/checkout"
  },
  "method": "GET"
});
```

### Response
#### Success Response (200)
- **fingerprintPublicKey** (string) - The public key required to initialize the FingerprintJS library.
- Other configuration settings relevant to the checkout process.

#### Response Example
```json
{
  "fingerprintPublicKey": "YOUR_FINGERPRINT_PUBLIC_KEY",
  "someOtherConfig": "value"
}
```
```

--------------------------------

### Display Pickup Notes

Source: https://support.ventrata.com/en/articles/11145253-klaviyo-variables

Outputs any specific notes related to pickup for the booking. Defaults to an empty string if not provided.

```jinja
{{event.booking_pickup_notes|default:''}}
```