GetYourGuide + Web Component

This is an unofficial GetYourGuide package.

This web-component is a light wrapper around the GetYourGuide widget focusing on progressive enhancement, simple API, and better page performance (ie. lazy loading).

Getting started

Installation

$ npm install gyg-wc
# $ pnpm add gyg-wc
# $ yarn add gyg-wc

Usage / Examples

<!-- index.html - using Vite -->
<script>
  // ✅ Remove the need to add `partner-id` attribute to each web component
  globalThis.GYG_PARTNER_ID = import.meta.env.VITE_GYG_PARTNER_ID;
</script>
<script type="module">
  import "gyg-wc";
</script>

Activities

<gyg-wc url="{location_url}?partner_id={partner_id}" size="{num_items}">
  <a href="{location_url}?partner_id={partner_id}"> Things to do in ... </a>
</gyg-wc>

Availability

<gyg-wc url="{tour_url}?partner_id={partner_id}">
  <a href="{tour_url}?partner_id={partner_id}"> Check availability for ... </a>
</gyg-wc>

Location

<gyg-wc url="{location_url}?partner_id={partner_id}">
  <a href="{location_url}?partner_id={partner_id}"> Things to do in ... </a>
</gyg-wc>

Search

<gyg-wc query="{search_term}" partner-id="{partner_id}">
  <a href="{search_url}?partner_id={partner_id}"> Things to do in ... </a>
</gyg-wc>

Tours

<gyg-wc urls="[{tour_url}?partner_id={partner_id},...]">
  <a href="{tour_url}?partner_id={partner_id}"> Things to do in ... </a>
</gyg-wc>

Documentation

Refer to the gyg-wc docs page for details and examples.

License

ISC